How to use the colour palette generator
- Type or pick a base colour, or open Get a palette from a photo.
- Choose a harmony and press Generate new palette (or Space) until you like it. Lock the colours to keep, edit any colour with the pencil, and add up to 10 colours.
- Check the contrast table and the colour-blind previews, then copy CSS variables, Tailwind, SCSS or JSON, or download a PNG or SVG swatch card.
How the harmonies work
Each harmony turns the base colour round the colour wheel by fixed angles: 180° for complementary, ±150° for split complementary, 120° and 240° for triadic, 60°, 180° and 240° for tetradic, and 90° steps for square. Analogous colours sit 30° apart. When you ask for more colours than the harmony has hues, the extra ones are lighter and darker versions of them, and every press of Generate adds small random changes to saturation and lightness, so palettes don't repeat. The base colour itself always stays exactly as you chose it.
Example
The base colour #2A9D8F is a teal (Cadet blue is the nearest CSS name) with a hue of 173°. A triadic palette adds hues 293° and 53°, giving #2A9D8F, #8F2A9D, #9D8F2A at the exact wheel positions before any random variation.
For text, white on #2A9D8F has a contrast ratio of 3.32:1 (only enough for large text), while black on #2A9D8F reaches 6.31:1 (AA). So black text is the readable choice on this teal, which is why its swatch shows black writing. Contrast is worked out as (lighter luminance + 0.05) ÷ (darker luminance + 0.05), where luminance = 0.2126 R + 0.7152 G + 0.0722 B of the linearised red, green and blue; white on black gives the maximum, 21.00:1.
Tips for a usable palette
- Keep one or two neutral colours (very light and very dark) for backgrounds and body text, and use the strong colours for buttons, links and highlights.
- Red and green look alike to many colour-blind people. Check the Protanopia and Deuteranopia previews, and don't use colour alone to show meaning.
- Need a colour from an existing design? Take it with the colour picker from image, then paste its HEX code as the base colour here.
Contrast thresholds: WCAG 2.2 success criteria 1.4.3 and 1.4.6 (w3.org, checked 7 October 2026). Colour-blind previews use the Machado, Oliveira and Fernandes (2009) simulation model at full severity; they show roughly how colours may look, and aren't a vision test.