Loading…

How to use Color Blindness Simulator

Enter your colors, pick a color-blindness type, and compare the original and simulated swatches to spot pairs that become hard to tell apart.

Frequently asked questions

What types of color blindness are simulated?

Common deficiencies including protanopia, deuteranopia and tritanopia, which affect red, green and blue perception.

Why test for color blindness?

Around 1 in 12 men have some color vision deficiency, so checking ensures your UI colors stay distinguishable for everyone.

How is the simulation calculated?

Your colors are transformed with established color-vision-deficiency matrices that approximate how each type perceives them.

More Color Tools

Color Name Finder
Find the nearest CSS named color for any hex value
CSS Color Names Reference
Complete table of all 148 CSS named colors with hex values
Tailwind Color Finder
Browse and copy the complete Tailwind CSS color palette
Color Distance Calculator
Measure perceptual color difference using the ΔECIEDE2000 metric
Color Temperature Tool
Visualize warm/cool color temperature and generate palettes
HEX to RGBA Converter
Convert HEX colors to rgba() with custom alpha / opacity
Color Palette Sorter
Sort a list of hex colors by hue, saturation, or lightness
UI Color Scheme Builder
Build a complete UI color scheme with semantic role assignment
Contrast Grid Checker
Check WCAG contrast for every foreground/background pair in a palette at once
OKLCH Color Converter
Convert HEX/RGB to and from OKLCH and OKLab (CSS Color 4)
Material Tonal Palette
Generate a 50–900 tonal scale from one base color for design systems
Complementary Color Finder
Find the exact complementary (opposite) color for any hex value

← View all Color ToolsBrowse all 1,100+ tools →