Color palette generator

Every palette is built on the color wheel (hue, in HSL terms) from your base color:

Harmony	How it's built	Mood
Complementary	Base + the opposite hue (180°), with lighter and darker tints	High contrast, energetic
Analogous	Neighboring hues on the wheel	Calm, natural
Triadic	Three hues evenly spaced (120° apart)	Vibrant, balanced
Split complementary	Base + the two hues next to its complement	Contrast with less tension
Tetradic	Four hues evenly spaced (a square on the wheel), plus a light tint of the base	Rich, needs one dominant color
Monochromatic	One hue in lighter and darker shades	Clean, cohesive

Each palette has five colors, with your base color labeled. Click Random base color for inspiration, or adjust the base with the color picker until the palette fits.

Start from a forest green, #0B7A55, and pick Complementary. You get the base green, a lighter and a darker version of it, a deep raspberry red from the opposite side of the wheel, and a softer tint of that red. A typical way to use it on a website:

• the dark green for headers and text links,
• the base green for primary buttons, with white text (the contrast check tells you whether white or black reads better),
• the light green tint for section backgrounds,
• the red only for a sale badge or an important call to action.

Switch the same base to Analogous for a calm range from green to teal, or to Monochromatic for a single-hue look with five lightness steps.

Each swatch shows its HEX code (with a copy button), its RGB values and its HSL values (hue in degrees, saturation and lightness in percent). Use whichever your tool expects: HEX and RGB for CSS, Figma and most design apps; HSL when you want to make a color lighter or darker by changing one number.

At the bottom you can copy all HEX codes as a list, copy the palette as CSS custom properties ready to paste into a stylesheet, or download it as JSON with the base color and harmony, which is handy for design tokens.

Under each color the tool shows its contrast ratio with white text and with black text, as defined by WCAG 2, the Web Content Accessibility Guidelines, and the label the ratio earns:

Contrast ratio	WCAG 2 level
7:1 or more	AAA for normal text
4.5:1 or more	AA for normal text
3:1 or more	AA for large text only (about 18 pt, or 14 pt bold)
below 3:1	Fails for text

The text on each swatch automatically uses whichever of black or white reads better. Use colors that pass AA for body text and buttons; lighter, low-contrast colors work well for backgrounds, borders and illustrations.

• Follow the 60-30-10 rule of thumb: one dominant color for most of the space, a secondary color, and an accent for buttons and highlights.
• Pair a saturated brand color with neutral grays or near-whites rather than using all five colors at full strength.
• Harmony rules are a starting point; the calculated shades are worth fine-tuning by eye, especially very dark or very light ones.
• Check your final combinations on real screens, in both light and dark mode.

Everything runs in your browser.