BYTETOOLS

Colorblind Safe Palette Generator

Generate a categorical palette that stays distinguishable under protanopia, deuteranopia and tritanopia, verified with CIEDE2000 on every simulated pair.

5
15
65
14
25
5
Colours found
15.2
Worst-case ΔE₀₀
4
Vision models checked

Palette

#d76963
Series 1
#5ba44f
Series 2
#00a788
Series 3
#8781e0
Series 4
#bd6db9
Series 5

How the palette looks with each deficiency

Normal colour vision
Protanopia (no red cones)
Deuteranopia (no green cones)
Tritanopia (no blue cones)

The simulation uses the standard dichromacy approximation matrices. Real colour-vision deficiency varies in severity and anomalous trichromacy (the most common form) sits between these swatches and normal vision, so treat this as a strong guide rather than a guarantee.

CSS custom properties

:root {
  --chart-1: #d76963;
  --chart-2: #5ba44f;
  --chart-3: #00a788;
  --chart-4: #8781e0;
  --chart-5: #bd6db9;
}

What is the Colorblind Safe Palette Generator?

Around one in twelve men has some form of colour-vision deficiency, and the default categorical palettes in most charting libraries fall apart for them.

  • Every pair verified with CIEDE2000 under three deficiency types
  • Side-by-side simulation rows for normal, protan, deutan and tritan vision
  • Adjustable colour count, separation threshold, lightness, chroma and start hue
  • Falls back to lightness contrast when hue alone is not enough
  • Reports honestly when your target cannot be met
  • Copyable hex list and ready-made CSS custom properties

How to use the Colorblind Safe Palette Generator

  1. 1

    Set how many colours your chart or legend needs.

  2. 2

    Set the minimum ΔE₀₀ separation — 12 is workable, 18 or more is comfortable.

  3. 3

    Adjust base lightness, chroma and starting hue to match your design.

  4. 4

    Check the four simulation rows underneath, then copy the hex list or the CSS custom properties.

About the Colorblind Safe Palette Generator

Around one in twelve men has some form of colour-vision deficiency, and the default categorical palettes in most charting libraries fall apart for them. This generator builds a palette that is checked rather than assumed: candidate hues are spaced evenly around the OKLCH wheel, and each candidate is only accepted if it stays far enough from every colour already chosen.

The check runs four times over — normal vision plus protanopia, deuteranopia and tritanopia — and measures separation with CIEDE2000 rather than a naive RGB distance. A colour joins the palette only when the smallest gap across all four vision models clears your threshold, so nothing passes on a technicality.

When hue alone cannot separate the number of colours you asked for, the generator widens the search to nearby lightnesses and tells you it did, because lightness contrast is the one cue that survives every form of deficiency. If it still cannot reach your count, it says so honestly instead of returning colours that fail. Everything runs locally in your browser.

Frequently asked questions

How many colors can a colorblind-safe palette have?

Fewer than you would like. At a comfortable separation you can usually get five or six purely from hue, and eight to ten once lightness is allowed to vary. Beyond that, add a second channel — shape, pattern or direct labels — because colour alone stops being reliable.

What ΔE separation should I use?

Around 12 keeps colours distinguishable when they sit side by side in a legend. Push to 18 or higher if the colours will appear as small scattered marks on a chart, where there is no adjacent reference to compare against.

Which types of color blindness does this cover?

The three dichromacies: protanopia (no red cones), deuteranopia (no green cones) and tritanopia (no blue cones). Anomalous trichromacy, which is more common and milder, sits between these simulations and normal vision, so a palette that clears dichromacy will clear it too.

Are the colorblindness simulations accurate?

They use the standard dichromacy approximation matrices, which are widely used and good enough for design decisions, but they are a model rather than a measurement. Severity varies between individuals, so treat a passing palette as a strong guide, not a certificate.

Is a colorblind-safe palette enough for accessibility?

No, and WCAG says as much: colour must never be the only way information is conveyed. Pair the palette with distinct line styles, markers or labels so the chart still works in greyscale and for anyone using a screen reader.

Related tools