Color Blindness Simulator
Simulate how a palette looks with common color vision deficiencies.
About the Color Blindness Simulator
Build a small palette and preview how it appears to people with protanopia, deuteranopia, tritanopia or achromatopsia using matrix-based color transforms, helping you pick more accessible color combinations.
Examples
Red/green pair
#ef4444, #22c55eOutput
YAMLDeuteranopia: both appear yellow-brownKeyboard shortcuts
- Copy the main outputCtrl / ⌘ + Shift + C
- Download the resultCtrl / ⌘ + S
- Share this toolCtrl / ⌘ + Shift + S
- Reset the inputsAlt + R
- Open the tool search paletteCtrl / ⌘ + K
Related tools
Contrast Checker
Color
Check WCAG 2.1 contrast ratio between two colors.
Color Converter
Color
Convert colors between HEX, RGB, HSL, HWB, OKLCH and CMYK.
Color Mixer
Color
Blend two colors with a ratio slider and preview CSS blend modes.
Gradient Palette Extractor
Color
Extract and normalize colors from CSS gradients or lists.
Hex to SwiftUI & UIColor Converter
Color
Turn a hex color into SwiftUI, UIKit and asset catalog code.
Palette Generator
Color
Build palettes and export a full light + dark theme as CSS variables or Tailwind tokens.
Frequently asked questions
Read more
- From one brand colour to a full light and dark theme
How a single hex value becomes a 50-950 shade scale and a complete light and dark token set — and how to export it as CSS variables or Tailwind theme tokens.
- Color contrast and WCAG: making UI accessible
How WCAG contrast ratios are calculated, which levels apply to which content, and practical fixes for common failures.
- Web accessibility quick wins for developers
High-impact, low-effort accessibility fixes — semantic HTML, focus states, color contrast and ARIA done right — that don't require a redesign.
Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser