Color Cheat Sheet for Data Viz and Dashboard Design
Palettes by industry and by mood, each shown in a sample dashboard layout. Everything is copy-and-paste ready — and there's a glossary at the end if any of the vocabulary is new.
Click any swatch to copy its hex · click Copy to take the whole ramp
How to use this⌄
In a hurry? Jump to section 5, find something close to your client's industry, and copy the ramp. That's a perfectly good starting point.
Not sure what mood you're after? Section 4 has eight, each with the settings that produce it.
Want to understand the reasoning? Sections 1 and 3 are the short version of why any of this matters.
Copying colors: click any swatch for that one hex, or the Copy button for the whole ramp.
Industry not listed? That's fine — pick the mood that fits instead. Industry is a shortcut, not a requirement.
The references in section 7 are optional. Nothing here needs them to be useful.
01
Start here: do you need color at all?
1
Does position already separate these?
Bar charts, columns, dot plots — the axis has already done the work. Adding a hue per category spends color on information the reader can already see.
→Gray everything, one accent hue on the series you're talking about.
✗ color spent on nothing
Six hues encode what the axis already says. Color is now unavailable for anything meaningful.
✓ gray + one accent
Position does the separating. Color is saved to say one thing: look here.
2
Do the categories have an order?
Tiers, satisfaction bands, age brackets, deal stages, sizes. These look categorical but aren't.
→Sequential. A qualitative palette here destroys the order.
3
Genuinely unordered and tracked across several charts?
The real case for categorical: EMEA must be the same blue on every chart in the dashboard so the eye can follow it.
→Now a qualitative palette earns its place. Cap it at 5–6.
Gray is an instruction, not an absence. It actively says don't look here — it isn't what's left when you run out of colors. Default every series to gray, then pay one hue to the series you're actually discussing. Reach for a full palette only when a question above forces it.
02
If you do need a palette
Sequential
Seq
Ordered continuous data. One hue, light→dark.
Diverging
Div
A meaningful zero or benchmark. Two hues, neutral middle.
Qualitative
last resort
Only after the gate above. Unordered, cross-chart identity, 5–6 max.
SymptomFix
Legend has 8+ entries
Group them, split into small multiples (facets), or label the lines directly. No legend survives eight entries.
Every bar a different color
Gray + one accent.
Rainbow on a continuous measure
Use a perceptually uniform ramp (see glossary) — rainbow scales invent boundaries that aren't in the data.
Hue used for both category and alert
Pick one job for hue. Shape or position takes the other.
03
Three things worth knowing
Here's the idea underneath everything else: color is a way of directing attention, not just a way of labelling things. These three follow from that, and they're the ones that tend to surface only after a few projects.
Your color budget is per dashboard, not per chart
Viewers read the whole screen. A hue spent in one chart makes it less distinctive everywhere else. Blue used for a KPI, a category and a map ramp means nothing.
Do this: Decide your hues once, for the whole dashboard, before you build any single chart — this hue is always region, this one is always alert. In Power BI or Tableau that means setting a theme up front rather than picking colors visual by visual.
✗ blue means 3 things
✓ one hue, one job
Semantic colors only work while they're scarce
Red means something is wrong because it's rare. Three reds on a healthy dashboard and users learn to scan past it.
Do this: On a good day, a well-built dashboard should look almost entirely neutral. If someone calls it boring when nothing is broken, that's the system working — and it's worth saying so when you hand it over.
✗ red is wallpaper
✓ red is a signal
Assignment order carries meaning you didn't intend
The darkest, most saturated color reads as most important — whatever the data says. Alphabetical legends hand that weight to whoever starts with A.
Do this: Assign color by importance or by data order. Try not to leave it to whatever order the tool happened to use.
✗ alphabetical
✓ by size / importance
04
By feeling
Derive your own: the five dials
mechanism
Mood is not a hue lookup. These five dials do the work, roughly in order of impact — hue comes last.
1
Saturation
The biggest mood lever by far. Low reads expensive, calm, serious. High reads consumer, urgent, young.
2
Lightness spread
Wide spread reads analytical and legible. Narrow spread reads soft, tonal, atmospheric — and charts badly.
3
Neutral temperature
Warm grays read human and handmade. Cool grays read corporate and technical. Almost nobody touches this dial; it's strong.
4
Hue count
One reads disciplined. Four or more reads friendly — or chaotic, depending on whether lightness is matched.
5
Hue itself
Last, and mostly a matter of picking a convention your audience already holds. It carries less of the mood than you might expect — the dials above are doing most of the work.
Proof: every ramp below is the same blue. Only saturation and neutral temperature change — and they land in completely different registers.
Saturation 85%reads consumer, urgent, young
Saturation 45%reads institutional, competent
Saturation 18%reads premium, restrained
Warm neutralssame lightness, warmer grays
⚠“Luxury = brown” is really “luxury = low saturation” wearing a hue costume — brown is desaturated dark orange. Deep green or charcoal-and-bone would read just as premium.
Fancy / high-class
Premium = subtraction, not addition.
Seq
Div
in use
HowSaturation 15–35% (HSL). Near-black such as #1a1a1a rather than pure #000. One accent hue, neutrals do the rest. Hairline gridlines, wide margins. No gradients or shadows — heavy ink reads cheap.
Trustworthy / institutional
Competent and unexcitable. Safe, rarely memorable.
Seq
Div
in use
HowMid-to-deep blue anchor, saturation 40–60% (HSL). Cool grays for all secondary elements. Warm hues only as a diverging counterpoint.
Energetic / youthful
High contrast, unexpected pairings. Fatigues fast on dense data.
Seq
Div
in use
HowSaturation 70–90% (HSL) on one or two elements only — energy comes from contrast against neutrals. Pair warm and cool at matched lightness.
Calm / minimal
Near-monochrome. Unhurried. Risky for dense data.
Seq
Div
in use
HowOne hue family, vary lightness only. Saturation under 30% (HSL). Off-white rather than pure white. Failure mode is insufficient contrast — check the contrast between your lightest and darkest steps (WCAG AA wants 4.5:1 for normal text).
Warm / human
Earthy and handmade rather than corporate.
Seq
Div
in use
HowShift every hue toward yellow/orange, including neutrals (warm grays). Saturation 35–55% (HSL). Terracotta against sage for diverging.
Bold / disruptive
Deliberately uncomfortable. Reads as confident, but it won’t land with every audience — check the room first.
Seq
Div
in use
HowBreak one convention, not three. Full-strength hue against near-black or off-white, no midtones. A second bold hue cancels the first.
Playful / approachable
Multi-hue and friendly. Breaks when you need order.
Seq
Div
in use
How4–6 hues at matched lightness — that's what makes multi-hue read friendly not noisy. Build ramps from one hue kept outside the categorical set.
Technical / precise
Dark by default
Engineering and observability register. Dark, because the tooling this audience lives in is dark.
Seq
Div
UI
Print
in use
HowCanvas #12151a–#1c2028, never pure black. Gridlines at 6–10% white opacity, axes 35–45%, labels around 70%. Saturation reads ~15–20% hotter on dark — pull every hue back. One exception: academic papers, print and LaTeX still assume a light background.
⚠Viridis (the standard perceptually uniform ramp, built into Python, R and most tools) is designed for light backgrounds — its dark purple end, #440154, all but disappears on a near-black canvas. Lift the ramp or swap it.
05
By industry
Finance / Banking
Trust-first
CChasereference brand
Conservative, high-contrast. Red/green is entrenched — make it accessible, don't fight it.
Seq
Div
in use
⚠In Greater China, red = gains, green = losses. Opposite of Western convention.
Healthcare / Life Sciences
Calm, clinical
CCignareference brand
Moderate saturation, cool hues. This audience scans under stress.
Seq
Div
in use
⚠Reserve saturated red for real clinical alerts only, or staff learn to ignore it.
Tech / SaaS / B2B
Brand-forward
SStripereference brand
Highest brand-color pressure. Use the brand hue as accent, not as the whole scale.
Seq
Div
in use
⚠One brand hue rarely yields 5–8 distinct steps. Ask for their gray scale too.
Retail / E-commerce
Warm, energetic
TTargetreference brand
Higher saturation tolerance. Keep alert color separate from brand color.
Seq
Div
in use
⚠Keep seasonal campaign palettes out of permanent reporting.
Government / Public Sector
Accessible by default
GGOV.UKreference brand
Often a legal WCAG obligation. Colorblind-safe by default, not retrofit.
Seq
Div
in use
⚠Red/blue two-category reads as partisan in US-facing work, whatever the data.
Energy / Sustainability
Earned trust
BBPreference brand
Green is overused to the point of greenwashing fatigue. Deploy it selectively.
Seq
Div
in use
⚠For emissions, state green = less in the legend. Viewers assume green = more.
Nonprofit / Impact
Warm but credible
UUNICEFreference brand
Serves donors and funders at once. Restrained data palette, warmth from imagery.
Seq
Div
in use
⚠Funder packs get printed. Test grayscale and projection.
Luxury / Fashion
Restraint = status
HHermèsreference brand
Premium comes from subtraction: fewer colors, lower saturation, more space.
Seq
Div
in use
⚠Metallics have no flat hex. A muted ochre reads richer than literal gold.
Hospitality / Travel
Aspirational warmth
AAirbnbreference brand
Warm brand hue, but the data (load factor, delays) is operational.
Seq
Div
in use
⚠Coral and red are near-identical when small. Pick a different alert hue.
Media / Streaming
Dark-mode native
SSpotifyreference brand
Dark-first, so the palette inverts: brightest chip = high end.
Seq
Div
in use
⚠Dark-tuned palettes wash out when exported to white PDF. Build both.
Automotive / Mobility
Engineered precision
BBMWreference brand
Technical, graphite-heavy. Color used for signal, not decoration.
Seq
Div
in use
⚠Silver/graphite brand palettes are all mid-gray. Push lightness apart hard.
Food & Beverage / QSR
Appetite-forward
MMcDonald'sreference brand
Warm and saturated by nature — which collides with alert colors.
Seq
Div
in use
⚠Yellow blows out against white. Anchor the pale end with warm off-white.
Education / EdTech
Non-judgmental
CCourserareference brand
Students read these as verdicts on themselves. Blue–orange beats red–green.
Seq
Div
in use
⚠Minors and parents see these. Red 'failing' fills land harder than intended.
Professional Services
Credible, understated
DDeloittereference brand
Deck-first. Optimize for projection and grayscale print, not screen.
Seq
Div
in use
⚠Assume a board member prints it in B&W. Test grayscale separation.
Telecom
High-visibility brand
TT-Mobilereference brand
Brand hue chosen for billboard recall, not chart legibility.
Seq
Div
in use
⚠Magenta and red look nearly identical to people with protanopia (a common form of red-green color blindness). Use amber for alerts instead.
Crypto / Trading
Dark, fast, dense
CCoinbasereference brand
Red/green even more entrenched than finance — but desaturate on dark.
Seq
Div
in use
⚠Flashing red/green cells are hostile to colorblind and motion-sensitive users.
Gaming
Saturated, expressive
TTwitchreference brand
The one category where saturated-on-dark is native, not a mistake.
Seq
Div
in use
⚠Purple + blue is a near-invisible collision. Separate by lightness.
Real Estate / PropTech
Map-heavy
ZZillowreference brand
Choropleths — maps shaded by value — lean on color as the whole encoding, with no position cue to fall back on.
Seq
Div
in use
⚠The basemap is part of your palette. Mute roads, water and terrain hard.
Beauty / Cosmetics
Soft, tonal
GGlossierreference brand
Entire brand palette lives in a narrow light band. Hardest to chart.
Seq
Div
in use
⚠No dark values = no usable ramp. Negotiate one deep anchor tone early.
06
Non-negotiables
RuleWhy
Never encode meaning in color alone
Around 8% of men have red-green color vision deficiency. Add a label, shape or position cue as well.
Perceptually uniform sequential scales
Rainbow creates false boundaries in continuous data.
Brand color = accent, not the palette
Brand palettes lack the perceptual steps a data scale needs.
Test grayscale + colorblind before delivery
Five minutes. Catches nearly everything.
Check cultural associations for the real audience
Red/green and red/blue meanings flip by region.
Glossary
Plain-language versions of the terms used above. No shame in needing these — most of them are field jargon rather than anything fundamental.
Hex code
The #1F6FC4 format every tool accepts. Six characters: red, green and blue, two each.
Ramp (or scale)
An ordered set of colors used together — the five swatches in each row here.
Sequential (Seq)
One hue going light to dark. For data with a low-to-high order: revenue, population, age.
Diverging (Div)
Two hues meeting at a neutral middle. For data with a meaningful centre: profit vs loss, above vs below target. Variance-to-target counts — zero is your middle.
Qualitative (categorical)
Distinct hues at similar lightness, for categories with no order: regions, product lines.
Hue, saturation, lightness (HSL)
Three ways to describe a color. Hue is which color it is; saturation is how vivid; lightness is how pale or dark. Most color pickers let you drag these separately — that's where the percentages in section 4 come from.
Perceptually uniform
A ramp where equal steps in the data look like equal steps to the eye. Rainbow scales fail this, which is why they seem to show edges that aren't really there.
Viridis
The best-known perceptually uniform ramp — the blue-green-yellow one. Built into Python, R, Tableau and most other tools, usually under that name.
CVD (color vision deficiency)
Color blindness. The common form makes red and green hard to tell apart, and affects roughly 8% of men.
WCAG
The W3C's accessibility guidelines. The part that matters here is contrast: level AA asks for 4.5:1 between text and its background.
Facet / small multiples
Splitting one crowded chart into a grid of smaller ones, one per category. Often better than adding more colors.
Choropleth
A map where areas are shaded by value — sales by region, for instance.
Protanopia / deuteranopia
Specific types of red-green color blindness.
Accent hue
The single color you keep in reserve to mark the thing you want noticed.
⚠Two quick checks before you deliver, both about a minute: paste a screenshot into a colorblindness simulator such as Coblis, and view the same screenshot in grayscale to see whether your categories still separate.
07
References & further reading
Where the ideas in this sheet come from. Nothing here is original research — it's a working synthesis, and these are the sources worth going to directly.
See moreShow less⌄19 sources — tools, papers and books
Tools, palettes and standards
[1]
Brewer, C. A., & Harrower, M. (2002–). ColorBrewer 2.0: Color advice for cartography. The Pennsylvania State University.
Source of the sequential / diverging / qualitative taxonomy used in section 2.
Gołębiowska, I., & Çöltekin, A. (2022). What's wrong with the rainbow? An interdisciplinary review of empirical evidence for and against the rainbow color scheme in visualizations. ISPRS Journal of Photogrammetry and Remote Sensing, 194, 195–208.
Review of evidence on both sides; concludes the answer is task-dependent.
[11]
Olson, J. M., & Brewer, C. A. (1997). An evaluation of color selections to accommodate map users with color-vision impairments. Annals of the Association of American Geographers, 87(1), 103–134.
Early empirical grounding for the CVD-safe palettes still in use.
Knaflic, C. N. (2015). Storytelling with data: A data visualization guide for business professionals. Wiley.
The clearest treatment of the gray-plus-one-accent technique behind sections 1 and 3.
[14]
Ware, C. (2021). Information visualization: Perception for design (4th ed.). Morgan Kaufmann.
Standard reference for why lightness, not hue, carries perceptual separation.
[15]
Tufte, E. R. (1983). The visual display of quantitative information. Graphics Press.
Origin of the restraint argument and the data-ink ratio.
[16]
Stone, M. (2003). A field guide to digital color. A K Peters.
Colour theory written for screens rather than pigment.
[17]
Cairo, A. (2016). The truthful art: Data, charts, and maps for communication. New Riders.
On the ethics of encoding choices, including unintentional misleading.
[18]
Few, S. (2013). Information dashboard design: Displaying data for at-a-glance monitoring (2nd ed.). Analytics Press.
Dashboard-specific; source of much of the alert-scarcity thinking in section 3.
[19]
Brewer, C. A. (2015). Designing better maps: A guide for GIS users (2nd ed.). Esri Press.
Book-length version of the ColorBrewer reasoning.
Accessed September 2026. This sheet is a working synthesis, not original research — where a claim matters to a decision, go to the source rather than citing the sheet.
Hex values are approximations inspired by public brand identities, not official values — pull real codes from brand guidelines before client delivery. Brand names are references only; no trademarked artwork is reproduced.
Data Analysis · BI Dashboards · Customer Insights · Market Research · Data Analysis · BI Dashboards · Customer Insights · Market Research · Data Analysis · BI Dashboards · Customer Insights · Market Research · Data Analysis · BI Dashboards · Customer Insights · Market Research · Data Analysis · BI Dashboards · Customer Insights · Market Research ·