Design
Color blindness simulator
Preview your colors as different types of color vision see them.
Normal
Protanopia (red-blind)
Deuteranopia (green-blind)
Tritanopia (blue-blind)
Achromatopsia (no color)
Approximate simulation (Viénot/Brettel matrices), computed in your browser. If two swatches look identical in a row, that pair may be hard to tell apart for that vision type.
How it works
1
Enter your colors
Add a color or a palette you want to check.
2
Simulate
See how it appears under common color-vision deficiencies.
3
Adjust
Tweak any pairs that become hard to tell apart.
Frequent questions
Which vision types are simulated?
The common forms of color-vision deficiency, including red–green types (protanopia and deuteranopia) and blue–yellow (tritanopia).
Why check for color blindness?
Around one in twelve men has some color-vision deficiency. Checking ensures information you convey with color — like status or chart series — stays distinguishable for everyone.
Explore more tools
Colors
Convert colors between HEX, RGB and HSL.
Contrast checker
Check color contrast against WCAG AA/AAA.
Palette generator
Harmonies, tints and shades from a base color.
Gradient generator
Build linear and radial CSS gradients.
Color mixer
Blend two colors and get the steps between.
Blob generator
Generate organic SVG blob shapes.
Color theme maker
Build a light/dark theme and export CSS variables.
Palette from image
Extract dominant colors from an image.