Palette generator & colour-blind check
Build a harmonious palette, then see how it looks to people with colour vision deficiency and which pairs get confused.
Palette
How it looks with colour vision deficiency
Palettes that work for everyone
Picking colours that look good together is half the job; making sure everyone can tell them apart is the other half. Red and green status indicators, chart series that differ only by hue and pastel UI states can all collapse into one colour for the roughly 8% of men with red-green colour blindness. Catching this early costs a minute; finding it in a bug report from a customer costs more.
Start with a base colour and choose a harmony: complementary, analogous, triadic, split complementary, tetradic or monochrome. The generator rotates the hue in the OKLCH colour space (so lightness and chroma stay consistent) and shows the palette. You can also paste your own list of colours. The second half shows how the palette looks under protanopia, deuteranopia, tritanopia and achromatopsia, and lists pairs of colours that are easy to tell apart normally but become confusable in a given condition.
Making palettes robust
- Vary lightness as well as hue; lightness differences are visible to everyone.
- Pair colour with a second cue: icon, label, line style or pattern.
- Avoid red and green as the only difference between two states.
- Check text contrast separately with the colour converter's WCAG checker.
The simulation is an approximation intended for design checks, not a medical tool. Everything runs in your browser.
Frequently asked questions
What is a colour harmony?
A rule for picking colours that go well together by rotating the hue: complementary (opposite), analogous (neighbours), triadic (three evenly spaced), split complementary and tetradic (two pairs). Monochrome keeps one hue and varies lightness.
How common is colour blindness?
About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, most often red-green (protanopia and deuteranopia). Roughly 300 million people worldwide.
How does the simulation work?
Each colour is converted to linear RGB and multiplied by a 3 by 3 matrix from the Machado, Oliveira and Fernandes (2009) model at full severity, then converted back. It approximates dichromacy; real vision varies.
What should I do if two colours are confusable?
Do not rely on colour alone: add icons, labels, patterns or different lightness. A change in lightness survives every kind of colour blindness, so make the colours differ in brightness as well as hue.