Data & charts

One data color, stepped lighter for the parts of a whole. Black, white and the accent keep their jobs; numbers get cyan.

Data--data #1192e8
The main mark. The darkest step.

Data 300--data-300 #33b1ff
Second segment; fill on black.

Data 200--data-200 #82cfff
Third segment.

Data 100--data-100 #bae6ff
Remainders: owed, left over.

Track--gray #f2f2f2
Empty meter track.

Not recorded--highlight #ffe500
Missing data: a month or item not recorded.

Rules

One hue. Every chart on a page uses the same data color. Identity comes from labels and order, not from a second hue.
The main step is the darkest. Nothing on the page is darker than --data. Lighter steps are for the other parts of the same whole, in order.
Missing data is yellow. A month not recorded is a --highlight bar with no outline, the same yellow as the Critical tag that names it; the legend calls it “Not recorded”, and the count of missing items carries the warning (a .sys-tag).
Hover lightens. Since the main step is already darkest, a hovered bar steps to --data-300.
Past a target, hash it. On a meter, the part beyond the goal gets white diagonal hash lines over the fill (Meter).
The accent is not a data color. Magenta stays for hover on titles and the one active thing. Yellow stays for tags, the highlight mark, missing data and lines on black.
On black, fills and lines use --data-300, which reads at 8:1.
Text stays ink. Values and labels are never set in the data color.
Tables are left-aligned. In data tables every column, header and number lines up on the left. Tabular digits keep amounts readable without right-aligning them.

Example

Equity 62%, owed 38%

Tested alternatives

A site may set its own data color the way it sets its accent, by overriding the four tokens. These were tried on the dashboard and pass contrast and colorblind checks against the accent; cyan was chosen. Each name opens the dashboard demo in that color.

Option	--data	300	200	100
Cyan (default)	`#1192e8`	`#33b1ff`	`#82cfff`	`#bae6ff`
Blue	`#1f5fd1`	`#6690e6`	`#94b3ef`	`#c9d7f6`
Purple	`#6929c4`	`#9a6ee8`	`#b28df0`	`#ece3fc`
Green	`#1a7f37`	`#4fae6b`	`#7cc590`	`#d3eedb`

Draw spending, balances, equity and shares in the one data color, with lighter steps for the rest of the whole.

Don’t

Use green for good and red for bad on bars, or give each series its own hue. Status is carried by tags and words.

Site variations

Site	Variation	Why
Financial Dashboard	Chart color switchable by link (`?colors=blue\|green\|purple`) for comparison	Kept from the color trial.