NEOKYRU
NEOKYRU Free Online Tools
Design & Color Tools
100% Client-Side 100% client-side privacy. All calculations and styling execute locally in your browser with zero server uploads.

Color Blindness Simulator

Simulate color perception for Protanopia, Deuteranopia, Tritanopia, and Achromatopsia

Color #1 (Base)
#6366F1
Color #2
#F16366
Color #3
#8B5CF6
Color #4
#10B981
Color #5
#F59E0B

Color Blindness Vision Simulation

Test how people with various visual deficiencies perceive this palette in real-world scenarios.

Tailwind Matcher

Closest Tailwind CSS Color

Mathematically computed closest match in Tailwind's standard palette using perceptual Euclidean distance.

indigo-500
#6366f1
ΔE Distance: 0 (near identical)
bg-indigo-500 text-indigo-500
Material Design 3

Material 50 to 900 Tonal Palette

Derived shade scale for Android, Flutter, and web UI design systems based on #6366F1. Tap any swatch to copy HEX.

Export Color Scheme

CSS Variables
:root {
  --color-1: #6366F1;
  --color-2: #F16366;
  --color-3: #8B5CF6;
  --color-4: #10B981;
  --color-5: #F59E0B;
}
Tailwind Config
// tailwind.config.js theme.colors
colors: {
  brand: {
    100: '#6366F1',
    200: '#F16366',
    300: '#8B5CF6',
    400: '#10B981',
    500: '#F59E0B',
  }
}
JSON Palette
[
  {
    "name": "Color 1",
    "hex": "#6366F1"
  },
  {
    "name": "Color 2",
    "hex": "#F16366"
  },
  {
    "name": "Color 3",
    "hex": "#8B5CF6"
  },
  {
    "name": "Color 4",
    "hex": "#10B981"
  },
  {
    "name": "Color 5",
    "hex": "#F59E0B"
  }
]

About Color Blindness Simulator

Test how your colors and website palettes look to people with visual deficiencies. Simulates red-blindness, green-blindness, blue-blindness, and total monochromacy using proven scientific color matrices.

Key Capabilities & Features

  • Simulates 8 vision conditions: Protanopia, Protanomaly, Deuteranopia, Deuteranomaly, Tritanopia, Tritanomaly, Achromatopsia, and Achromatomaly
  • Applies real-time Viénot / Brettel / Machado mathematical transformation matrices
  • Live palette simulation across entire custom color schemes simultaneously
  • Helps UI designers meet WCAG compliance and design inclusive digital products
  • Completely private client-side execution

How to Use Color Blindness Simulator

1

Set Your Palette

Input or generate your color palette in the studio.

2

Select Deficiency Type

Pick a vision deficiency (such as Deuteranopia or Protanopia) from the dropdown.

3

Review Perception

Inspect how the colors transform to identify problematic color pairings.

Privacy & In-Browser Execution Guarantee

100% client-side privacy. All calculations and styling execute locally in your browser with zero server uploads.

Frequently Asked Questions

What is the most common form of color blindness?

Deuteranomaly (green-weakness) is the most common form, affecting approximately 5% of males globally.

Why should designers simulate color blindness?

Simulating color perception ensures critical information (like error states, charts, and buttons) isn't communicated solely through indistinguishable color hues.

Related Tools in this Suite

WCAG Contrast Checker
Verify WCAG 2.1 & 2.2 accessibility compliance for AA and AAA standards
Contrast Checker
Calculate color contrast ratio between text and background with live preview
Color Palette Generator
Generate aesthetic harmonious color schemes and palettes with one click
Color Picker
Pick, inspect, and copy HEX, RGB, HSL, and CMYK color codes instantly