Color Blind Simulator
Simulate protanopia, deuteranopia, and tritanopia perception of any color in your browser.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this color blind simulator
- Pick a source color with the color picker or paste a hex value.
- Press Simulate to render the color as each dichromacy would perceive it.
- Compare the original swatch with the three simulated swatches (protanopia, deuteranopia, tritanopia).
- Read the hex and RGB output for each variant in the result panel.
- Use Copy result to copy the four hex values to the clipboard.
About this color blind simulator
The color blind simulator previews how a color appears to viewers with the three common forms of dichromacy — protanopia (no L cones, red-blind), deuteranopia (no M cones, green-blind), and tritanopia (no S cones, blue-blind). It multiplies your input sRGB triple by the canonical Machado, Oliveira and Fernandes (2009) simulation matrices, which are the same matrices used inside Chrome DevTools and most accessibility audit tools. The matrices act directly on gamma-corrected sRGB, so the output is what a typical display would render after each cone class is removed.
Worked example: starting from #3b82f6 (the Tailwind blue), the simulator produces approximately #4181f2 for protanopia, #5e7df1 for deuteranopia, and #3b94d7 for tritanopia. The blue stays recognisable as blue across all three because blue lies on the protanopia/deuteranopia confusion axis where most of the visual weight comes from the S cones — the small numerical shifts confirm the deficiency is in red-green rather than blue-yellow discrimination.
Nothing leaves your browser — the matrix multiplication runs locally on the entered hex.
FAQ
- What does the color blind simulator actually do under the hood?
- It applies the Machado et al. (2009) 3×3 sRGB simulation matrix for the selected dichromacy directly to your input color and returns the resulting hex and RGB.
- Why are the simulated colors not dramatically different from the original?
- Many colors fall close to the dichromacy confusion lines, so they shift only slightly. The biggest changes appear when you simulate reds and greens for protanopia and deuteranopia.
- Does this cover anomalous trichromacy (mild color blindness)?
- The bundled matrices are for full dichromacy (severity 1.0). Anomalous trichromacy (e.g. deuteranomaly) shows a milder version of the same shift and can be approximated by blending the output with the original.
- Why not use a CSS filter instead?
- CSS color-matrix filters apply only to rendered elements, not to a color value you want to copy. This tool returns the actual converted hex so you can paste it into your palette or design tokens.
- Are the simulations medically accurate?
- They are research-grade approximations widely used in accessibility tooling. They are not a substitute for testing your real interface with users who have color vision deficiencies.