search⌘KtranslateENexpand_moreupload_fileConvert

home/developer-tools/color-palette-generator

Color Palette Generator

Colour palette generator

Build a five-colour palette from colour-wheel rules, lock the ones you like, check text contrast, and export as CSS, Tailwind or JSON.

AnalogousComplementaryTriadicSplit complementaryMonochrome

lock_openprimary

#26ABC0hsl(188 67% 45%)AA · 6.7

lock_openaccent

#4E9BDFhsl(208 69% 59%)AA · 6.2

lock_opensupport

#242E99hsl(235 62% 37%)AAA · 10.9

lock_opensoft

#D7F4EChsl(164 57% 90%)AAA · 15.8

lock_opendeep

#21452Ahsl(136 36% 20%)AAA · 10.8

Click a hex to copy · lock colours to keep them when you regenerate

casinoGenerate

live preview

LightDark

AcmeProductPricingDocs

new · v2.0Ship faster with a palette that works.Headings, buttons, badges and cards, all from your five colours.

Get startedLearn more

12kusers

98%uptime

4.9rating

CSSTailwindJSONSCSS

content_copyCopy

:root { --color-primary: #26abc0; --color-accent: #4e9bdf; --color-support: #242e99; --color-soft: #d7f4ec; --color-deep: #21452a;}

Analogous

~/why-these-colours-work

Neighbours on the wheel.

Colours that sit next to each other share undertones, so they feel calm and natural together: like a sunset or a forest.

good forBrand identities, backgrounds, soft UI.

watch outCan feel flat: pick one colour to act as the accent.

~/can-people-read-it

Every text pairing, checked.

Each colour as a background with white or black text, scored against WCAG. 4.5 : 1 is the minimum for body text, 3 : 1 for large headings.

Aa2.74 : 1fail

Aa6.71 : 1AA

Aa2.97 : 1fail

Aa6.19 : 1AA

Aa10.90 : 1AAA

Aa1.69 : 1fail

Aa1.16 : 1fail

Aa15.79 : 1AAA

Aa10.77 : 1AAA

Aa1.71 : 1fail

~/hsl-lightness-is-not-brightness

Same HSL lightness, very different brightness.

HSL was designed in 1978 to be cheap to compute on frame buffers, not to match perception. Every swatch below has identical HSL saturation and lightness. The bars show each colour’s OKLab lightness, a model fitted to how bright colours actually look, computed live from the hex value.

HSL saturation100%HSL lightness50%

0.63

0°

0.73

30°

0.97

60°

0.89

90°

0.87

120°

0.88

150°

0.91

180°

0.62

210°

0.45

240°

0.53

270°

0.70

300°

0.65

330°

OKLab L range0.45-0.97

brightest hue60°

darkest hue240°

WCAG ratio on white1.07 vs 8.59

One tonal scale, built two ways

Nine shades from 50 to 800. The top row steps HSL lightness evenly; the bottom row steps OKLCH lightness evenly and keeps chroma inside the sRGB gamut. Check how evenly the measured L moves and where white text first passes 4.5 : 1.

Hue211°Chroma0.14Following primary

HSL, lightness 95% to 15% in equal stepshsl(187 67% l)

50L 0.971.1:1 on whiteclipped

100L 0.911.3:1 on whiteclipped

200L 0.861.5:1 on whiteclipped

300L 0.811.7:1 on whiteclipped

400L 0.772.0:1 on whiteclipped

500L 0.692.7:1 on whiteclipped

600L 0.574.2:1 on whiteclipped

700L 0.457.1:1 on whiteclipped

800L 0.3212.4:1 on whiteclipped

OKLCH, lightness 0.97 to 0.25 in equal stepsoklch(L 0.14 211), chroma capped to sRGB

50L 0.971.1:1 on whiteclipped

100L 0.881.4:1 on whiteclipped

200L 0.791.9:1 on whiteclipped

300L 0.702.6:1 on whiteclipped

400L 0.613.6:1 on whiteclipped

500L 0.525.3:1 on whiteclipped

600L 0.437.9:1 on whiteclipped

700L 0.3411.5:1 on whiteclipped

800L 0.2515.8:1 on whiteclipped

HSL step ΔL (OKLab)0.047-0.131

OKLCH step ΔL0.088-0.092

HSL: first AA on white700

OKLCH: first AA on white500

oklch scale · CSScontent_copyCopy

:root { --primary-50: oklch(97.0% 0.026 211); --primary-100: oklch(88.0% 0.106 211); --primary-200: oklch(79.0% 0.137 211); --primary-300: oklch(70.0% 0.121 211); --primary-400: oklch(61.0% 0.106 211); --primary-500: oklch(52.0% 0.090 211); --primary-600: oklch(43.0% 0.075 211); --primary-700: oklch(34.0% 0.059 211); --primary-800: oklch(25.0% 0.043 211);}

~/how-much-colour-fits

The most saturated colour you can have depends on its lightness.

For the hue set above, each column is the highest OKLCH chroma that still fits in sRGB (solid) and Display P3 (tall, light). Limits are found by bisection on the real conversion matrices. The dashed line is the chroma you asked the scale for; wherever it rises above a column, that shade was clipped.

L 0OKLCH lightnessL 1

sRGB limitextra in Display P3requested chroma 0.14

desktop_windowsYour display reports sRGB onlyYour screen can’t show the extra P3 colour, so the light bars are clipped by your browser and look the same as sRGB.

sRGB cusp (max chroma)C 0.143 at L 0.84

P3 cuspC 0.185 at L 0.80

P3 gain at the cusp+29%

your primary vs sRGB limitC 0.111 of 0.119 (93%)

RGB colour spaces compared

Triangle areas are computed from each space’s CIE xy primaries. xy area is not perceptual, so treat the ratio as a rough size.

spacedefined bywhiteprimaries R · G · B (xy)xy areacss · this browser

sRGBIEC 61966-2-1 (1999)D650.64, 0.33 · 0.3, 0.6 · 0.15, 0.061.00× sRGBcheck_circlecolor(srgb …)

Display P3Apple (2015), DCI-P3 primariesD650.68, 0.32 · 0.265, 0.69 · 0.15, 0.061.36× sRGBcheck_circlecolor(display-p3 …)

Adobe RGB (1998)Adobe Systems (1998)D650.64, 0.33 · 0.21, 0.71 · 0.15, 0.061.35× sRGBcheck_circlecolor(a98-rgb …)

Rec. 2020ITU-R BT.2020 (2012)D650.708, 0.292 · 0.17, 0.797 · 0.131, 0.0461.89× sRGBcheck_circlecolor(rec2020 …)

ProPhoto RGBKodak ROMM, ISO 22028-2D500.7347, 0.2653 · 0.1596, 0.8404 · 0.0366, 0.00012.47× sRGBcheck_circlecolor(prophoto-rgb …)

CIELAB · OKLabCIE (1976) · Ottosson (2020)D50 · D65none; unboundedall visiblecheck_circlelab() · oklab()

~/as-others-see-it

Your palette through four kinds of colour vision.

Simulated with the Machado, Oliveira and Fernandes (2009) matrices at full severity, applied in linear RGB. Below, every pair of colours is scored by OKLab distance (ΔE OK) under each simulation. About 0.02 is a just-noticeable difference; under 0.06 two colours are hard to tell apart as UI elements, so don’t let them carry meaning on colour alone.

Typical visionThree cone types

#26abc0#4e9bdf#242e99#d7f4ec#21452a

ProtanopiaNo L (red) cones · about 1% of men

#9aa5c1#7d9ee2#00429c#f2f0ec#454028

DeuteranopiaNo M (green) cones · about 1% of men; milder deuteranomaly about 5%

#8696c0#698fde#003797#ececed#403c2c

TritanopiaNo S (blue) cones · about 1 in 10,000

#00b4b1#00abb3#004b60#d0f5f1#1a443e

AchromatopsiaNo colour, luminance only · about 1 in 30,000

#9c9c9c#969696#3d3d3d#eeeeee#3e3e3e

Distinct for dichromats; only luminance-only vision merges pairs

Ten pairs from five colours. Worst case is the lowest distance across the four simulations.

primary · accenttypical 0.077worst 0.020under achromatopsiahard to tell apart

primary · supporttypical 0.344worst 0.316under deuteranopiadistinct

primary · softtypical 0.275worst 0.238under protanopiadistinct

primary · deeptypical 0.342worst 0.329under achromatopsiadistinct

accent · supporttypical 0.306worst 0.283under deuteranopiadistinct

accent · softtypical 0.299worst 0.276under achromatopsiadistinct

accent · deeptypical 0.349worst 0.309under achromatopsiadistinct

support · softtypical 0.597worst 0.561under tritanopiadistinct

support · deeptypical 0.211worst 0.004under achromatopsiahard to tell apart

soft · deeptypical 0.590worst 0.585under achromatopsiadistinct

~/reference

Your primary colour in every CSS syntax.

Each value below is converted from #26abc0 with the CSS Color 4 matrices (lab and lch use D50, as the spec requires). The swatch is painted by your browser from that exact string, and the last column asks CSS.supports() whether it parses.

syntaxvaluespecsupported

hex#26abc0CSS1; 4/8-digit forms in Color 4check_circleyes

rgb()rgb(38 171 192)CSS1; space syntax in Color 4check_circleyes

hsl()hsl(188 67% 45%)CSS Color 3 (2011)check_circleyes

hwb()hwb(188 15% 25%)CSS Color 4check_circleyes

lab()lab(64.0 -30.1 -21.3)CSS Color 4 (D50)check_circleyes

lch()lch(64.0 36.8 215.2)CSS Color 4 (D50)check_circleyes

oklab()oklab(0.683 -0.095 -0.057)CSS Color 4check_circleyes

oklch()oklch(68.3% 0.111 211.2)CSS Color 4check_circleyes

color()color(display-p3 0.3287 0.6609 0.7418)CSS Color 4check_circleyes

color-mix()color-mix(in oklch, #26abc0 70%, white)CSS Color 5check_circleyes

relative colouroklch(from #26abc0 calc(l + 0.1) c h)CSS Color 5check_circleyes