2026topopentools

Color Palette Generator

Pick a base color and instantly build complementary, analogous, triadic, tetradic, and monochromatic color schemes. Copy any hex code or a whole set — all in your browser.

WCAG text contrast on this color

White text

Ratio: 3.30:1

AA ✗AAA ✗Large text AA ✓

Black text

Ratio: 6.37:1

AA ✓AAA ✗Large text AA ✓

Complementary

The base color plus its opposite on the wheel (+180°).

#16A34A

#A3166F

Analogous

Neighbouring hues (-30°, base, +30°) for a harmonious feel.

#28A316

#16A34A

#16A391

Triadic

Three evenly spaced hues (base, +120°, +240°).

#16A34A

#4A16A3

#A34A16

Tetradic

Four hues forming a rectangle (base, +90°, +180°, +270°).

#16A34A

#1628A3

#A3166F

#A39116

Monochromatic

Same hue at increasing lightness for shades and tints.

#0C5A29

#159D47

#1EE166

#62EA94

#A5F3C2

Palettes are calculated in your browser using HSL color math — nothing is uploaded to any server.

Understanding the Color Palette Generator

The Color Palette Generator turns a single base color into five ready-to-use color schemes. Pick a color with the swatch picker or type any hex value (shorthand like #19F works too), and the tool instantly produces complementary, analogous, triadic, tetradic, and monochromatic palettes. Each generated color is shown as a swatch with its uppercase HEX code and a one-click copy button, plus a "Copy all" button per set that grabs the whole scheme as a comma-separated list. It runs entirely in your browser using HSL color math, so nothing is uploaded and results appear the moment you change the base color. Ideal for web design, branding, and UI work.

How it works

Your base color is first converted from HEX to HSL (hue, saturation, lightness). Color theory schemes are then created by rotating the hue around the 360-degree color wheel while keeping saturation and lightness fixed: complementary adds 180 degrees, triadic uses 120 and 240, tetradic uses 90, 180, and 270, and analogous nudges 30 degrees either side. The monochromatic set instead keeps the hue constant and steps lightness through fixed values to create shades and tints. Each resulting HSL value is converted back to a HEX code and rendered as a swatch. Editing the hex field or moving the picker recalculates every set immediately.

Hue rotation: new_hue = (base_hue + offset) mod 360. Complementary offset = 180; Triadic = {120, 240}; Tetradic = {90, 180, 270}; Analogous = {-30, +30}. Monochromatic: keep H and S, set L to {20, 35, 50, 65, 80}%. HEX is converted to HSL, transformed, then converted back to HEX.

Worked example

Start with the green #16A34A (HSL roughly 142 degrees, 75 percent saturation, 36 percent lightness). The complementary set returns #16A34A plus its opposite around #A3166F (a magenta-red at hue 322). Triadic rotates to hue 262 and 22, giving a blue-violet and an orange. The monochromatic set holds hue 142 and varies lightness, producing a dark #0C5226 through a light #84E0A8. Click any swatch's Copy button, or Copy all to grab the whole scheme for your CSS.

Tips & common mistakes

  • Enter hex with or without the leading # — three-digit shorthand like #19F is automatically expanded to #1199FF.
  • Use the monochromatic set for backgrounds, borders, and hover states that share one hue without clashing.
  • Complementary pairs create strong contrast — great for call-to-action buttons against a neutral page.
  • Analogous schemes feel calm and cohesive, making them a safe choice for large areas and gradients.
  • Use "Copy all" to paste a full set straight into CSS custom properties or a design tool's swatch list.
  • Check text-on-color contrast separately for accessibility — vivid palette colors aren't always WCAG-compliant for body text.

Related tools

JSON Formatter & ValidatorFormat, beautify, minify, and validate JSON with clear error messages.Base64 Encode / DecodeEncode text to Base64 or decode Base64 back to text, with full Unicode support.URL Encode / DecodePercent-encode or decode text for safe use in URLs and query strings.Hash GeneratorGenerate MD5, SHA-1, SHA-256, and SHA-512 hashes from any text.

Frequently Asked Questions

What color harmonies does it generate?

From a single base color it builds five sets: complementary, analogous, triadic, tetradic, and a monochromatic shade-and-tint scale. Each gives you a ready-made, balanced color scheme for designs, sites, and brand work.

Can I copy the hex codes?

Yes. Every swatch shows its uppercase HEX value with its own copy button, and each set has a "Copy all" button that copies the whole scheme as a comma-separated list you can paste into CSS or a design tool.

How are the palettes generated?

The base color is converted to HSL, then hues are rotated around the color wheel (for example +180° for complementary, +120°/+240° for triadic) while monochromatic colors vary lightness in fixed steps. Results convert back to hex.