Lesson 0005
Pick a palette that does not fight your typography or your data.
Primary source:
Refactoring UI (chapter on Color), plus
ColorBrewer 2.0 for data viz palettes.
Same five bars, same data. The eye reads two very different stories.
Pure RGB primaries, all 100% saturated. The eye fights every bar at once. No story.
Quiet neutrals, one accent on the bar that matters. The reader sees the third bar first. Story delivered.
Every colour can be described in many systems (RGB, hex, HSL, CMYK, Lab). For design decisions, HSL is the only one that maps to how humans actually think about colour: Hue, Saturation, Lightness. Learn HSL, ignore hex except for copy-paste.
Property 1 of 3
Hue is the position on the colour wheel, measured 0 to 360 degrees. Red = 0, yellow = 60, green = 120, cyan = 180, blue = 240, magenta = 300.
Hue is what people mean when they say “colour”. Two colours with the same hue feel related; two colours with hues 180° apart feel opposite (complementary).
Property 2 of 3
Same hue (blue, 220°), same lightness (50%), increasing saturation from gray to pure. Saturation is the “loudness” of a colour.
Default for UI body: low saturation (10 to 30%). Reserve high saturation (70%+) for one or two attention-grabbing elements per view. A page where every colour is maxed feels like a kindergarten poster.
Property 3 of 3
Same hue and saturation, just sliding from dark to light. Lightness is what carries accessibility: legible text needs strong lightness contrast with its background, regardless of hue.
Practical rule: avoid pure white (100%) and pure black (0%). Use 98% and 8% instead. Pure values feel harsh; slightly-off values feel intentional.
Ninety percent of every BI interface is neutral: gray text, gray dividers, gray backgrounds. Get the neutral scale right and the design is already 80% done.
Ten steps, from near-white (50) to near-black (900). Each step is for a job:
Notice the trick: the neutral scale is not pure gray. There is a slight hue (here, a hint of blue at 220°). A whisper of hue makes neutrals feel warm or cool and lets them harmonise with the accent. Pure gray (0% saturation) often looks dead.
On top of the neutral scale, you add one accent (your brand colour) and a small set of semantic colours that carry meaning, not decoration.
These are not aesthetic choices. They are signals. Green means “safe to proceed”; red means “stop”. Using red for a decorative heading or green for a random tag costs you the semantic meaning. The user reads danger or approval where you meant nothing.
Rule: total palette = 1 neutral scale + 1 accent + 3 semantic. That is enough for almost any internal tool, dashboard, or document.
Charts need different colour rules than UI. The colour encodes the data, so you must pick the right kind of palette for the kind of data.
For data that goes from low to high in one direction: revenue, count, percentile. One hue, varying lightness. Heatmaps use this almost exclusively.
For data with a meaningful zero or midpoint: profit vs loss, above vs below target, sentiment. Two hues meeting at a neutral.
For unordered categories: product line, region, source. Pick hues equally spaced on the colour wheel. Limit to 6 or 7 categories; beyond that no one can distinguish.
The pitfall: using a categorical palette for sequential data (rainbow heatmap) destroys the ordering. Using a sequential palette for unordered categories creates a false ordering. Match the palette to the data shape.
When in doubt, copy from ColorBrewer 2.0. Every palette is colourblind-tested.
#000 on #FFF is harsh and
surprisingly hard to read. Use #1a1a1a on #fafaf8 instead.
You are designing a sales dashboard with four KPI tiles, a bar chart by region, and a heatmap of daily revenue. How many colours do you allow yourself?
Answer: roughly five distinct colour families, total.
1. Neutral scale (gray text, gray dividers, gray backgrounds) for 80% of the dashboard.
2. Accent blue (your brand). The KPI tile that beats target uses blue text on the number; others use neutral. Bar chart uses blue for the focal bar, gray for the rest.
3. Semantic green: arrow next to a KPI tile that grew over last quarter.
4. Semantic red: arrow next to a KPI tile that shrank, plus the bottom of the heatmap (loss days).
5. Sequential blue (the same blue as your accent, in 9 lightness steps) for the heatmap.
Five families, but the eye sees mostly gray with one or two splashes of meaning. That is the professional look. Beginners reach for ten distinct hues; designers reach for one and lean on lightness.
Exercise 1 of 5
Name the three properties of HSL from memory, in order. Don’t peek.
Hue, Saturation, Lightness.
Hue = which colour. Saturation = how intense. Lightness = how bright. If you can describe a colour in those three dimensions, you can specify it precisely without ever reading a hex code.
Exercise 2 of 5
You are colour-coding a heatmap of monthly revenue: bright when high, dim when low. Which palette type do you reach for?
A. Sequential palette.
Revenue goes from low to high in one direction. One hue, varying lightness. If you used categorical (rainbow), the eye would invent ordering where there is none. If you used diverging, the midpoint would imply a meaningful zero that does not exist.
Exercise 3 of 5
A teammate sends you a dashboard mock where every chart bar, every KPI label, and every icon is fully saturated. Each is a different hue. What rule is being broken?
Two sins at once: fully saturated everywhere and too many colours.
The fix is the neutral-scale rule. Make 80% of the dashboard neutral. Use the accent on one focal element per chart. Saturated colours only carry meaning when the rest of the page is quiet.
Exercise 4 of 5
You need to show profit-vs-loss on a regional map. Profit greens, losses reds, zero in the middle. Two-part question: (a) which palette type, and (b) what is the one risk?
(a) Diverging palette. Two hues meeting at a neutral midpoint.
(b) Red and green are the classic colourblind trap. 8% of men and ~0.5% of women cannot distinguish them. Use orange-vs-blue (the ColorBrewer default) instead, or add icons / labels so the meaning does not depend on colour alone.
Always test palettes through a colourblind simulator. ColorBrewer marks colourblind-safe options with a tick.
Exercise 5 of 5
Why is HSL more useful than hex (e.g. #3b82f6) when picking colours by hand?
HSL maps to how humans think: which colour, how intense, how bright. Hex maps to how machines store colour (three 8-bit channels) and tells you nothing intuitive.
In HSL you can say “same hue, darker” by lowering the L. In hex you would have to compute new RGB values. HSL is the design language; hex is the storage format.
Ask me anything. Have a Holistics dashboard or diagram with a palette you are unsure about? Drop the hex codes or a screenshot and I will diagnose it against these rules.