Study · CSS · Colour
A colour axis with contrast
Change one base colour while surfaces, text and an accent follow different rules.
A theme needs more than a collection of attractive swatches. Its surfaces must belong together, and its text must remain distinguishable as those surfaces change.
One colour, several relationships
Start with hue, lightness and chroma in OKLCH. Surface distance makes darker and lighter neighbours. The accent sits on the opposite side of the hue circle. Try the colour controls first, then change the two text-contrast targets.
Illustrative weather
Adjust the base colour and requested contrast.Ratios are requested targets. At some middle lightnesses, even the darkest or lightest text cannot reach a high target.
The text is recalculated against each surface using the theme's CSS contrast function, with a JavaScript fallback where custom CSS functions are unavailable. A contrast ratio describes the luminance difference between a foreground and its background. The supporting and primary targets let hierarchy change without assigning unrelated text colours.
A requested ratio is not always possible: at some middle lightnesses neither black nor white can reach it. The solver approaches the available limit instead. The accent remains a small non-textual marker, so it does not have to double as a text surface. These controls affect only the specimen.