About one in twelve men and one in two hundred women see color differently. The Color Blindness Simulator takes one solid hex color. It then shows how that color may appear under four color vision deficiency types.
It is built for designers, developers, and teachers who want accessible color choices. You enter a hex value, and the tool shows swatches and hex codes side by side as you type.
Table of Contents
- What the Tool Does
- How to Use It, Step by Step
- The Simulation Formula
- Worked Example
- How to Read the Results
- About the Four Deficiency Types
- Limitations and Assumptions
- FAQs About the Color Blindness Simulator
What the Tool Does
The tool works on one solid color at a time. One hex input feeds all five swatches at once.
- Normal Vision: your original color, shown as a swatch and hex code.
- Protanopia: a red-blind version of the color.
- Deuteranopia: a green-blind version of the color.
- Tritanopia: a blue-blind version of the color.
- Achromatopsia: a gray version, as if no color were seen.
- Three small cards show your input as hex, your input as RGB, and a live status.
How to Use It, Step by Step
- Click the color picker box to choose a color with your mouse.
- Or type a value in the Select or Enter Color hex field.
- Use a six digit code like #2563EB, or a three digit short code like #F00.
- Watch the five swatches update as you type a valid color.
- Compare the simulated hex codes under each swatch.
- Use the Copy Hex Codes button to copy all five results as text.
The Simulation Formula
The tool reads the red, green, and blue parts of your hex color. It then mixes each channel using a fixed set of numbers for each deficiency type. The result is rounded and turned back into a hex code.
Hex ColortoRed, Green, BluexFixed Mix Numbers=Simulated Color
The green-blind mix uses these rows, where R, G, and B are 0 to 255:
- New Red = 0.625 R + 0.375 G
- New Green = 0.700 R + 0.300 G
- New Blue = 0.300 G + 0.700 B
The gray version uses New Gray = 0.299 R + 0.587 G + 0.114 B, applied to all three channels. Each result is clamped to the 0 to 255 range.
Worked Example
Trevor tests a warm red button color, hex #EF4444. In red, green, blue terms that is 239, 68, 68. Here is what the tool returns for each row.
| Row | Sample Math | Output Hex |
|---|
| Normal Vision | no change | #EF4444 |
| Protanopia | red near 165, green near 163 | #A5A344 |
| Deuteranopia | red 175, green 188, blue 68 | #AFBC44 |
| Tritanopia | red 230, green 68, blue 68 | #E64444 |
| Achromatopsia | 0.299(239) + 0.587(68) + 0.114(68) | #777777 |
The bright red turns muddy yellow-green in the first two rows. That shift is why red and green are hard to tell apart for many people. A cool blue like #2563EB behaves differently and shifts toward teal in the blue-blind row.
How to Read the Results
Normal Vision is your starting point. Compare every other swatch against it.
Two colors may look clearly different in the Normal row. If they look nearly the same in the Protanopia or Deuteranopia row, that pair is a risk. Red and green status dots are the classic trap.
The Achromatopsia row is a good final check. If two colors share one gray value, they carry no contrast for a person who sees no color. You can confirm that contrast with a color contrast checker.
About the Four Deficiency Types
Protanopia and deuteranopia are both red-green types and are the most common. Tritanopia is a rare blue-yellow type. Achromatopsia means seeing in shades of gray only, which is very rare.
Real human vision is more complex than four fixed formulas. These numbers give a quick preview, not a medical result. To build a safe palette, pair color with text labels, icons, or patterns so no message depends on hue alone.
If you need the raw channel values, the hex to RGB converter shows them. To confirm a code is well formed before testing, try the hex color validator. More color and code utilities sit in the developer tools hub.
Limitations and Assumptions
- The tool uses simple linear mix numbers applied to sRGB values. It does not match clinical simulators that first convert color to a linear light space.
- Both six digit and three digit hex codes work. Color names and plain RGB text are still ignored.
- The achromatopsia row only removes color. It does not model the reduced sharpness or light sensitivity that can come with it.
- The tool previews one color, not a full image or web page.
To check readable text pairs for any background, the contrast color finder can suggest a safe foreground. To name a shade you landed on, the CSS color name finder maps hex codes to named colors.
FAQs About the Color Blindness Simulator
Is This a Medical Test for Color Blindness?
No. It only previews how a color may shift for common deficiency types. It cannot diagnose anyone and is not a substitute for an eye exam.
Why Did My Swatches Clear and Show an Alert?
The field needs a valid hex code, such as #1A2B3C or #F00. When the value is blank or invalid, the tool clears the swatches and asks you to fix the color field.
Why Do Red and Green Look Alike in Two Rows?
Protanopia and deuteranopia are both red-green types. Reds and greens often collapse toward a similar yellow-brown, which is the exact problem the tool helps you spot.
Do the Colors Match What a Person Actually Sees?
They are a close preview, not a perfect copy. The formulas are simplified and skip the linear light step that lab grade tools use, so treat them as guidance.
Does the Tool Send My Colors to a Server?
No. All of the math runs in your browser with the hex value you type. Nothing is uploaded or stored.
What Does the Status Card Tell Me?
The status card reads Valid for a good color and Invalid hex for a bad code. It reads Enter a hex color when the field is empty. This confirms the tool accepted your input.
This calculator gives general estimates only and is not professional advice. Reviewed for general accuracy by Prof. Dr. Khalil Mudassar, PhD.