Color Palette Picker

Complementary: Two hues opposite each other on the wheel. Maximum tension, good for a single accent against a dominant colour.

Analogous: Neighbouring hues. Calm and cohesive, the safest choice for a background family.

Triadic: Three hues at even thirds. Balanced and lively without any pair fighting.

Split complementary: A base hue plus the two neighbours of its complement. Keeps the contrast but loses the clash.

Tetradic and square: Four hues forming two complementary pairs. Rich, but usually needs one colour to dominate and the rest to stay as accents.

Monochromatic: A single hue across five lightness steps. Elegant, and impossible to get wrong.

Rotating hue in HSL keeps the L number constant but not the perceived brightness. A yellow at 60% lightness glares while a blue at the same 60% sinks, so a classic HSL triad never looks like a balanced set.

OKLCH is perceptually uniform, so the same rotation produces colours that genuinely read as equally bright. Both options are offered here: switch between them and watch the yellow and blue swatches change while the numbers stay the same.

Where a rotated hue lands outside the sRGB gamut, chroma is walked down until it fits while hue and lightness are preserved, which is the gamut mapping CSS Color 4 specifies.

• Seven harmony types, generated in OKLCH or classic HSL
• Perceptual 50 to 950 tonal scale from any base colour
• Curated palettes across seven categories
• Copy each swatch as HEX, RGB, HSL or OKLCH
• Readable text guidance and WCAG contrast on every swatch
• Colour blindness simulation for the whole palette
• Export to CSS variables, Tailwind v3 and v4, SCSS, JSON or SVG
• Shareable links that carry the palette in the URL