Notebook

Cheat sheet

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?

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.

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.

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.

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.

Saturation

The biggest mood lever by far. Low reads expensive, calm, serious. High reads consumer, urgent, young.

Lightness spread

Wide spread reads analytical and legible. Narrow spread reads soft, tonal, atmospheric — and charts badly.

Neutral temperature

Warm grays read human and handmade. Cool grays read corporate and technical. Almost nobody touches this dial; it's strong.

Hue count

One reads disciplined. Four or more reads friendly — or chaotic, depending on whether lightness is matched.

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
Chasereference 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
Cignareference 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
Stripereference 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
Targetreference 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
GOV.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
BPreference 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
UNICEFreference 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
Hermè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
Airbnbreference 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
Spotifyreference 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
BMWreference 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
McDonald'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
Courserareference 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
Deloittereference 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
T-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
Coinbasereference 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
Twitchreference 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
Zillowreference 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
Glossierreference 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

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 more19 sources — tools, papers and books

Tools, palettes and standards

  1. [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.

    https://colorbrewer2.org
  2. [2]

    Harrower, M., & Brewer, C. A. (2003). ColorBrewer.org: An online tool for selecting colour schemes for maps. The Cartographic Journal, 40(1), 27–37.

    The peer-reviewed paper behind the tool.

  3. [3]

    van der Walt, S., & Smith, N. (2015). matplotlib colormaps.

    Design write-up for viridis, magma, inferno and plasma, including the perceptual-delta plots that show why jet fails.

    https://bids.github.io/colormap/
  4. [4]

    Crameri, F. (2018–). Scientific colour maps.

    Perceptually uniform, CVD-safe ramps with ports for most tools.

    https://www.fabiocrameri.ch/colourmaps/
  5. [5]

    Moreland, K. Color map advice for scientific visualization.

    Per-map guidance plus downloadable colour tables.

    https://www.kennethmoreland.com/color-advice/
  6. [6]

    World Wide Web Consortium. (2025). Web Content Accessibility Guidelines (WCAG) 2.1 [W3C Recommendation].

    Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

    https://www.w3.org/TR/WCAG21/

Papers

  1. [7]

    Crameri, F., Shephard, G. E., & Heron, P. J. (2020). The misuse of colour in science communication. Nature Communications, 11, 5444.

    The clearest modern case against rainbow and red–green maps, with practical alternatives.

    https://doi.org/10.1038/s41467-020-19160-7
  2. [8]

    Borland, D., & Taylor, R. M. (2007). Rainbow color map (still) considered harmful. IEEE Computer Graphics and Applications, 27(2), 14–17.

    The paper that made anti-rainbow the default position.

    https://doi.org/10.1109/MCG.2007.323435
  3. [9]

    Ware, C., Stone, M., Szafir, D. A., & Rhyne, T.-M. (2023). Rainbow colormaps are not all bad. IEEE Computer Graphics and Applications, 43(3), 88–93.

    The rebuttal. Rainbow maps test well for reading a value off a key; the critique holds for judging shape and gradient.

    https://doi.org/10.1109/MCG.2023.3246111
  4. [10]

    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.

  5. [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.

    https://doi.org/10.1111/0004-5608.00043
  6. [12]

    Rogowitz, B. E., & Treinish, L. A. (1998). Data visualization: The end of the rainbow. IEEE Spectrum, 35(12), 52–59.

    One of the earliest statements of the perceptual argument.

    https://doi.org/10.1109/6.736450

Books

  1. [13]

    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.

  2. [14]

    Ware, C. (2021). Information visualization: Perception for design (4th ed.). Morgan Kaufmann.

    Standard reference for why lightness, not hue, carries perceptual separation.

  3. [15]

    Tufte, E. R. (1983). The visual display of quantitative information. Graphics Press.

    Origin of the restraint argument and the data-ink ratio.

  4. [16]

    Stone, M. (2003). A field guide to digital color. A K Peters.

    Colour theory written for screens rather than pigment.

  5. [17]

    Cairo, A. (2016). The truthful art: Data, charts, and maps for communication. New Riders.

    On the ethics of encoding choices, including unintentional misleading.

  6. [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.

  7. [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.

Interested in collaboration?