One brand colour, a whole button set (relative colours)
Change only --brand (try oklch(0.6 0.18 150) for green) and every derived colour follows.
oklch() describes colour by how light it looks, how colourful it is and its hue, reaching the vivid colours of modern screens; color-mix() blends two colours, relative colour syntax derives new colours from an existing one, and contrast ratios tell you whether text is readable.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make three swatches .red, .green, .blue with the same oklch lightness 0.65 and chroma 0.15, and a fallback hex for each.
Given --brand: #0f766e, write a .callout whose background is a 12% tint of the brand mixed with white and whose border is the brand colour 0.1 darker in oklch.
Explain it without notes
What do the three numbers in oklch() mean, and what does it fix compared with hsl()?
What is a colour gamut, and what happens when you use a colour the screen can't show?
Show two uses of color-mix() and explain why the colour space matters.
What are the WCAG contrast thresholds, and how is the ratio calculated?
Preview
Console
Nothing logged yet.