Color Palette Generator
Start from a base colour and a harmony, lock what you like and re-roll the rest. Every palette shows which pairs are readable as text, and the link holds the whole palette, so you can share it.
Five-colour palette
Split complementary
- Aa 6.7#E76F51
- Aa 7.6#00AFA2
- Aa 7.3#2B9FF1
- Aa 18.5#FFEDE8
- Aa 8.2#89321B
1 pair passes AA as text and background.
The two beside the opposite. The dots sit at each colour’s hue; nearer the rim is more vivid.
Base colour, every format
- HEX#E76F51
- RGBrgb(231, 111, 81)
- HSLhsl(12, 76%, 61%)
- HSVor HSBhsv(12, 65%, 91%)
- CMYKnaive, no profilecmyk(0%, 52%, 65%, 9%)
- OKLCHoklch(67.8% 0.156 35.2)
- LABCIELAB, D65lab(60.7% 44.3 38.4)
- CSS nameclosesttomato
Readable pairs
Text and background pairs from this palette, by WCAG 2.2 contrast. Tap one to open it in the contrast checker.
Export
:root {
--color-primary: #e76f51;
--color-secondary: #00afa2;
--color-tertiary: #2b9ff1;
--color-accent: #ffede8;
--color-neutral: #89321b;
}
The other colours are built round it. Paste any format.
Harmony
How this works: Method, 7 sources, Checked against 2 worked examples,
How this works
Method
A colour harmony is a rule for picking hues that sit in a fixed relationship on the colour wheel. Complementary colours face each other across it, analogous colours are neighbours, triadic ones form an equilateral triangle, split complementary takes the two hues either side of the opposite, tetradic forms a square and monochrome keeps one hue and changes only lightness and strength. Full method
Sources
- Wikipedia, Color scheme
- W3C, CSS Color Module Level 4
- W3C: WCAG 2.1, Success Criterion 1.4.3 Contrast (Minimum)
- W3C, WCAG 2.2: definitions of contrast ratio and relative luminance
- Björn Ottosson (2020), A perceptual color space for image processing
- Myndex, SAPC-APCA documentation (APCA-W3 0.0.98G-4g)
- Machado, Oliveira and Fernandes (2009), A Physiologically-based Model for Simulation of Color Vision Deficiency
How it’s tested
2 worked examples for this page are checked by automated tests before every release: given the inputs, the tool must show the expected answer.
Changes
- Added eight pages: a colour picker for photos, a WCAG 2.2 and APCA contrast checker, a palette generator, a colour blindness simulator, and hex, RGB and CMYK converters.
- Redesigned: paste a colour in any format, HSV and CMYK added, opacity, a contrast check against white and black text, and colour harmonies.
- Fixed a crash when opening the colour picker.
- First published.
How the palettes are built
A colour harmony is a rule for picking hues that sit in a fixed relationship on the colour wheel. Complementary colours face each other across it, analogous colours are neighbours, triadic ones form an equilateral triangle, split complementary takes the two hues either side of the opposite, tetradic forms a square and monochrome keeps one hue and changes only lightness and strength.
Most generators turn the hue in HSL, where the same lightness value looks very different from hue to hue: a yellow at 50% is far brighter than a blue at 50%. This one turns the hue in OKLCH, a version of OKLab built for exactly this, so the colours of a palette keep the base colour’s perceived lightness and vividness. Colours a screen can’t show at that strength are pulled in by reducing chroma, never by shifting the hue.
Each palette has five colours: the base, the rule’s other hues, and lighter and darker steps for backgrounds and text. Lock the ones you like and re-roll: the locked colours stay, the first locked colour becomes the base, and the rest are rebuilt with a little variation in hue and lightness each time. Contrast is worked out for every swatch and every pair, so you can see at once which combinations can carry text.
new hue = base hue + turn (complementary 180°, triadic ±120°, split 150° and 210°, tetradic 90° steps)
- Harmonies such as complementary, analogous, triadic and tetradic are traditional colour-wheel schemes used in art and design. Source: Wikipedia, Color scheme.
- CSS Color Module Level 4 adds oklch(), whose lightness, chroma and hue axes let a colour be rotated in hue without its perceived lightness changing much. Source: W3C, CSS Color Module Level 4.
Every harmony of #E76F51
The five colours each rule builds from #E76F51, a warm coral, with the hue turns it uses.
| Harmony | Hue turns | Colours |
|---|---|---|
| Complementary | 0°, 180° | #E76F51 #A22F10 #00AAC6 #60DDFA #FFF2EE |
| Analogous | -30°, 0°, 30° | #E76F51 #E4698A #D68100 #A33940 #FFD3BB |
| Triadic | 0°, 120°, 240° | #E76F51 #26B36C #7D8DF6 #FFEDE8 #89321B |
| Split complementary | 0°, 150°, 210° | #E76F51 #00AFA2 #2B9FF1 #FFEDE8 #89321B |
| Tetradic | 0°, 90°, 180°, 270° | #E76F51 #82A827 #00AAC6 #AF7CE4 #FFEDE8 |
| Monochrome | 0° | #E76F51 #761F07 #B04328 #FFB09C #FFF2EE |
Frequently Asked Questions
How do I share a palette?
Copy the page’s address, or use Share in the ⋯ menu. The link holds the five colours, the harmony and which colours are locked, so whoever opens it sees exactly your palette and can carry on re-rolling from it.
Can I use the palette in Tailwind or CSS?
Yes. The Export box gives the palette as CSS custom properties, a Tailwind colours block, SCSS variables, JSON (with each colour’s best text colour) and SVG, each with a copy button, and Download PNG saves a swatch image for a mood board or a slide.
Which harmony should I start with?
Analogous and monochrome palettes are calm and easy to use for interfaces. Complementary and split complementary give a strong accent for buttons and highlights. Triadic and tetradic palettes are lively; let one colour lead and use the others sparingly.
Why does a palette fail contrast?
Harmonies choose hues, not lightness, and colours of similar lightness can’t carry text on each other whatever their hue. Lock your favourite and re-roll until a much lighter or darker partner appears, or use black or white text: each swatch shows which reads better and by how much.