CSSworkingbaseline-2023
color-mix() and modern color
Derive a whole palette from one brand colour.
Stop hand-picking tints and shades in a colour picker — color-mix() blends two colours in a chosen colour space, so one token can generate its own hovers, surfaces, and overlays.
Tints: mix the brand toward white
HTML+CSS+JSintro Press Run to execute
The four swatches render as one row going from the full amber --brand to progressively paler tints, each step holding less brand and more white. It shows a whole lightness ramp built from a single token — no second colour was hard-coded.