Study · CSS · Colour
Colour relationships in CSS
Build related surfaces and readable text from one base colour.
A theme is a set of relationships: surfaces derive from one base colour, and text is calculated against the surface it sits on.
Choose foreground contrast from the surface
contrast-color() chooses whichever of black or white contrasts more with a color. Adjust the sample surface to see that decision change. It is a useful starting point for light or dark colors; midtones may need a stronger contrast solver.
The foreground is selected by contrast-color().
Derive surfaces from one colour
This site describes its base with oklch(): lightness, chroma and hue. The sunken surface mixes that base toward black; the raised surface mixes it toward white. Surface distance controls the separation. Adjust the base and see all three move together.
Give text a contrast target
The site calculates a primary and supporting foreground against each surface. They have different contrast targets, so hierarchy survives a change of theme. Try a darker base or a stronger target: the text responds to the surface rather than keeping a fixed grey.
These examples use the theme’s CSS colour calculations and retain its JavaScript fallback for browsers without custom CSS functions. A target can exceed what a particular surface allows; the solver then approaches the available limit. Explore hue, chroma and the complementary accent together in A colour axis with contrast.