Colors
Color Blindness Safe Palette Generator
Used by developers, writers, and creators worldwide.
A color blindness safe palette generator solves a real problem: about 1 in 12 men has some form of color vision deficiency, which means a poorly chosen palette can make charts unreadable or data misleading for a significant slice of your audience. This tool produces palettes where hue, lightness, and saturation differences stay perceptible even when red-green or blue-yellow channels are compromised. Choose how many colors you need — from a tight 3-color set to a broader range — and select the specific deficiency type: deuteranopia, protanopia, tritanopia, or universal to cover all three at once. Output is hex values ready to paste into Figma, CSS, D3.js, or Chart.js immediately.
Loading usage…
Free forever — no account required
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Set the Number of Colors to match how many distinct categories your chart, map, or UI element needs.
- Choose a Color Blindness Type — select Universal to cover all major types, or pick a specific type if your use case requires it.
- Click Generate to produce a palette of hex color values optimized for the selected vision profile.
- Copy individual hex codes directly into your design tool, CSS file, or charting library color array.
- If the palette will be used in a live product, verify the results using a color blindness simulator before shipping.
Use Cases
- •Building a multi-series Chart.js line chart where every series stays distinct for red-green colorblind users
- •Theming a Figma component library to satisfy WCAG 1.4.1 non-text contrast requirements
- •Coloring categorical choropleth maps in D3.js for data journalism pieces with broad public audiences
- •Picking status-indicator colors (error, warning, success) in a React dashboard that must pass accessibility audits
- •Generating safe swatches for scientific figures submitted to journals with accessible-graphics requirements
Tips
- →Pair the generated colors with different line styles or marker shapes in charts — color alone should never be the only differentiator.
- →Generate a 3-color palette first; if those three are clearly distinct in simulation, adding more colors from a larger generation gives you confidence in the base.
- →Universal mode produces more muted, lower-saturation results — if you need vibrant colors, generate type-specific palettes and manually cross-check the other types.
- →In data viz, assign the most important data series to the blue or orange end of the palette, since those survive the most types of color blindness most reliably.
- →When exporting to Figma, create a local color style for each hex value so the accessible palette propagates consistently across your entire component library.
- →Avoid placing two generated colors next to each other at full saturation with similar lightness — even safe hues can blur at boundaries when contrast is low.
FAQ
what colors are actually safe for colorblind people
Blues, oranges, and certain cyans remain distinguishable across most deficiency types because they don't collapse into the same perceptual zone. Saturated red-green pairs are the most common failure — even adding lightness contrast between two colors improves separability significantly when hue alone can't carry the load.
difference between deuteranopia and protanopia
Both are red-green deficiencies but affect different cone cells. Protanopia reduces red sensitivity, making reds appear very dark; deuteranopia reduces green sensitivity and is more common, affecting roughly 6% of males. Selecting Universal in this generator produces palettes that satisfy both simultaneously.
how many colors can a colorblind safe palette realistically have
Reliably distinguishable palettes for all deficiency types cap out around 8 to 10 colors — beyond that, perceptual differences become too small to guarantee separability. If you need more categories, supplement color with shape, pattern, or direct labels rather than adding more hues.