For data-visualization and dashboard builders
Color for data visualization
Chart color has one job: keep series apart for every reader, including the roughly one in twelve men with red-green color blindness. These starting points bias toward hue separation with lightness backup, and the dashboard preview shows your palette on bars, a line, and a donut before any stakeholder does.
Starting points
Three starter palettes, generated live
Each set is produced by the palette engine, not picked from a mood board. Open one in the generator to lock what fits and reroll the rest.
Four distinct series
Because four hues at ninety-degree spacing, the safest default for categorical series.
Vibrant categorical
Because saturated hues hold up at thin line weights and small legend chips.
Dark dashboard
Because series tuned for dark panels, where over-bright hues bloom.
The shelf
Working colors of the field
The named colors data-visualization and dashboard builders reach for, each resolved against the 31,912-name registry. Tap a swatch to copy the hex; open the name for the full page with codes, palettes, and contrast data.
- Cobalt #030AA7 the anchor series blue: dark enough for thin lines on white
- Vermilion #F4320C the color-blind-safe red of the classic Okabe-Ito palette family
- Goldenrod #FDCB18 a yellow that survives on white, where pure yellow vanishes
- Amethyst #9966CC a violet series that separates from both blue and magenta
- Tangerine #FF9300 a second warm series distinguishable from vermilion by lightness
- Steel Blue #4682B4 a calmer blue for secondary series and confidence bands
- Magenta #FF00FF high-visibility highlight series; use once per chart
- Jade #00A86B a green that holds its identity under deuteranopia simulation
- Cerulean #55AAEE a light blue for area fills that must not swallow the line
- Persimmon #E59B34 annotation and callout color that is not the danger red
- Ivory #FFFFF0 a chart background softer than pure white under long viewing
- Chartreuse #C1F80A the emergency 8th series; loud, so it goes last
Speak the language
Terms this field runs on
-
Color blindness Design for deuteranopia first: it is the most common form, and red-green pairs are your riskiest choice. Full definition →
?
Color blindness
Reduced ability to distinguish certain colors, most often red and green. Designing with enough lightness contrast keeps interfaces usable for everyone.Full glossary entry → -
Relative luminance If series survive in grayscale, they survive everywhere. Luminance is the backup channel hue forgets. Full definition →
?
Relative luminance
How bright a color appears to the eye, weighting green most and blue least. Contrast ratios are built from the luminance of the two colors involved.Full glossary entry → -
Chroma Equal-chroma series read as equal importance. One saturated series among muted ones reads as the point. Full definition →
?
Chroma
A more perceptually accurate cousin of saturation, used in Lab and OKLCH. Chroma measures colorfulness independent of lightness, which is why it gives more even results when building palettes.Full glossary entry → -
Grayscale Print the chart mentally in gray: the fastest audit of whether lightness is doing its share. Full definition →
?
Grayscale
Colors with no hue or saturation, running from black to white through grays. Converting to grayscale reveals a palette's value structure.Full glossary entry → -
Delta E (ΔE) Two series under ΔE 10 apart will be confused at legend-chip size. Measure, don't squint. Full definition →
?
Delta E (ΔE)
A measure of how different two colors look. Below 1 the difference is invisible to almost everyone; below 2.3 most people can't tell them apart; above 10 they are clearly different colors. We use CIEDE2000, the modern standard.Full glossary entry →
The workflow
How data-visualization and dashboard builders use this site
- 1 Generate spaced hues Square and triadic modes place hues far apart by construction; lock the ones your brand requires and reroll the rest. Generator in square mode →
- 2 Preview on a real chart The dashboard scene renders your palette as bars, a line, and a donut with a legend, then re-renders it through color-blindness simulation. Dashboard preview →
- 3 Verify the risky pairs Red-green and blue-purple pairs are the usual failures. Simulate any two candidates side by side. Color blindness simulator →
- 4 Export for your stack JSON tokens or CSS variables drop into Chart.js themes, D3 scales, or BI tool settings. Exports →
Field notes
What goes wrong, and the fix
- Red vs green as the key contrast The most common chart pairing is also the one eight percent of men cannot separate. Give the pair a lightness gap, or swap green for a blue-leaning teal, then simulate. Simulator →
- Rainbow sequential scales Rainbows imply categories; amounts want a single-hue lightness ladder. Build the ladder in OKLCH so equal data steps look equal on screen. Ladder builder →
- Testing on the big version only A palette distinct at 600px collapses at legend-chip size. The dashboard preview includes small chips; check series there, not just on the chart body. Dashboard preview →
FAQ
Common questions
- How many categorical colors can a chart hold?
- Beyond six or seven, adjacent categories stop being nameable and legends stop helping. Prefer grouping the tail into an 'other' series over stretching the palette.
- How do I make a chart color-blind safe?
- Separate series by lightness as well as hue, avoid leaning on red versus green alone, and check the dashboard preview's simulation lens. If two series merge there, add a lightness step or a pattern.
- Sequential or categorical palette?
- Categorical for kinds of things, sequential for amounts of one thing. For sequential ramps, build an OKLCH lightness ladder with the tint and shade tool so equal data steps look equal.
- What are good colors for a line chart with many series?
- Fewer series beats better colors: highlight the two or three lines the chart is about and push the rest to one muted gray. One saturated color among neutrals communicates more than eight saturated colors competing.
- Should positive and negative values be green and red?
- Convention says yes, accessibility says be careful: pair the hues with a clear lightness difference and reinforce with sign or direction markers. A blue-orange diverging pair carries the same meaning with less risk.
- How do I keep brand colors and chart clarity together?
- Lock the brand hue as series one in the generator and let square mode place the remaining series at maximum distance from it. Then run the dashboard preview's simulation lens before anyone presents it.
Other work