{"id":"l-css-3-3","courseId":"css-mastery","lang":"en","kind":"lesson","summary":"Define colors in oklch() so lightness is predictable, derive tints with color-mix(), and build hover and disabled states from one base color with relative color syntax.","html":"

Waypoint’s four track colors were picked one at a time in a design tool, as hex codes. The Design pink looked loud, the Accessibility green looked washed out, and the white badge text passed contrast on two tracks and failed on the other two. When the team needed a pale tint for each track’s badge background, someone generated eight more hex codes by eye. Then the hover states. Twenty colors, no system, and nobody could say why #0891b2 was right.

\n

Modern CSS color lets you define one base color per track and derive everything else with rules.

\n

Why oklch()

\n

Hex, rgb() and hsl() all describe colors in the sRGB space, organised around how screens emit light, not how eyes see it. HSL’s “lightness” is the worst offender: hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) claim the same lightness, but the yellow is dazzling and the blue is dark. Any palette built by rotating the hue in HSL ends up with wildly different contrast.

\n

oklch() is built on the OKLab model, designed so that numbers track perception:

\n\n
tokens.css
:root {\n  --track-design: oklch(62% 0.19 350);\n  --track-perf:   oklch(62% 0.19 220);\n  --track-a11y:   oklch(62% 0.19 150);\n  --track-platform: oklch(62% 0.19 280);\n}
\n

Same lightness, same chroma, four hues. The tracks now carry equal visual weight, and if white text passes contrast on one, it will be very close on all four. You still verify contrast (perception models aren’t contrast formulas), but you start close instead of guessing.

\n\n

Tints and shades with color-mix()

\n

color-mix() blends two colors in a color space you choose:

\n
CSS
.badge {\n  background: color-mix(in oklch, var(--track) 15%, white);\n  color: color-mix(in oklch, var(--track) 70%, black);\n}\n.session-card.is-cancelled {\n  background: color-mix(in oklch, var(--track), transparent 85%);\n}
\n

The percentage belongs to the color it follows; the other color gets the rest. So var(--track) 15%, white is mostly white with a hint of the track: a badge background. Mixing with transparent produces a translucent version, without needing a separate alpha token.

\n

The color space changes the result. Mixing blue and yellow in srgb passes through a muddy grey; in oklch the hue travels around the wheel and stays vivid. For UI tints, oklch or oklab gives the most even steps. color-mix() is Baseline 2023.

\n\n

Relative colors: edit one channel

\n

Relative color syntax unpacks a base color into its channels, lets you change any of them, and packs it back:

\n
CSS
.session-card {\n  --track: var(--track-design);\n  border-inline-start: 6px solid var(--track);\n\n  &:hover,\n  &.is-active {\n    border-color: oklch(from var(--track) calc(l - 0.15) c h);\n  }\n\n  &.is-past {\n    border-color: oklch(from var(--track) l 0.03 h);   /* nearly grey, same hue */\n  }\n\n  & .badge-soft {\n    background: oklch(from var(--track) l c h / 20%);  /* same color, 20% alpha */\n  }\n}
\n

After from var(--track), the keywords l, c and h hold the base color’s channels as numbers, and you can use them in calc(). Note that l here is the 0 to 1 number, so subtracting 0.15 darkens by 15 points. Every derived state now follows the base color automatically: add a fifth track and its hover, past and soft variants exist the moment you define its base.

\n

Relative colors are Baseline 2024, in Chrome, Edge, Firefox and Safari. If you must support older browsers, don’t count on a static fallback declaration written first: these values contain var(), so an older browser accepts them at parse time and then hits the invalid-at-computed-value-time trap from Custom Properties and @property, discarding your fallback too. Wrap the derived states in @supports (color: oklch(from red l c h)) { … } instead, so older browsers keep the base rule.

\n\n

Your turn

\n

The exercise card has hard-coded hex values for its badge tint and active border. Replace them with a color-mix() tint and a relative-color active state, and add a Performance track that matches the Design track’s lightness and chroma. The checks read the computed OKLCH channels. Next, you’ll take this palette into dark mode with color-scheme and light-dark().

\n","toc":[{"id":"sec-1","text":"Why oklch()","level":2},{"id":"sec-2","text":"Tints and shades with color-mix()","level":2},{"id":"sec-3","text":"Relative colors: edit one channel","level":2},{"id":"sec-4","text":"Your turn","level":2}],"takeaways":["oklch(L C H) separates perceived lightness, chroma (colorfulness) and hue, so two colors with the same L look equally light, which HSL can’t promise.","A palette with fixed lightness and chroma and varying hue gives every category the same visual weight and similar contrast.","color-mix(in oklch, var(--track) 15%, white) makes a tint from any base color, and the color space you mix in changes the result.","Relative color syntax, such as oklch(from var(--track) calc(l - 0.15) c h), derives a state color by editing one channel of the base color."],"further":[{"title":"oklch() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch"},{"title":"color-mix() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color-mix"},{"title":"Using relative colors (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors"}],"quiz":[{"q":"

hsl(60 100% 50%) and hsl(240 100% 50%) have the same lightness value. Why does white text read well on one and badly on the other?

","options":[{"text":"Because HSL lightness isn’t perceptual; pure yellow looks far lighter than pure blue at the same L.","why":"Correct. HSL is a geometric reshuffle of RGB. OKLCH’s L is designed to match perceived lightness, so equal L means similar contrast."},{"text":"Because the browser renders yellow with extra brightness on most screens.","why":"Screens render both as specified; the difference is in human perception, which HSL doesn’t model."},{"text":"Because 50% lightness is outside the sRGB gamut for blue.","why":"hsl() colors are always inside sRGB; gamut isn’t the issue here."}],"answer":0},{"q":"

What does color-mix(in oklch, var(--track) 20%, white) produce when --track is a saturated pink?

","options":[{"text":"Pink at 20% opacity over whatever is behind it.","why":"Mixing with white produces an opaque color. Transparency would come from mixing with transparent."},{"text":"A darker pink, because 20% is a small amount of white.","why":"The 20% applies to the pink; white gets the remaining 80%, so the result is much lighter."},{"text":"A pale pink tint, 20% pink and 80% white, interpolated in OKLCH.","why":"Correct. Percentages apply to the color they follow, and the other color gets the rest."},{"text":"An error, because custom properties can’t be used inside color-mix().","why":"var() works inside color-mix() like anywhere else; it’s substituted before the function is evaluated."}],"answer":2},{"q":"

Which declaration gives a hover state 0.1 darker than --track but with the same chroma and hue, whatever --track is?

","options":[{"text":"filter: brightness(0.9)","why":"filter darkens the whole element, including text and images, and works in RGB space, so hue can shift."},{"text":"background: oklch(from var(--track) calc(l - 0.1) c h)","why":"Correct. Relative color syntax unpacks the base color into l, c and h, lets you adjust one channel, and repacks it."},{"text":"background: oklch(calc(var(--track) - 0.1))","why":"You can’t subtract from a whole color; without from, oklch() expects three separate channel values."}],"answer":1},{"q":"

Your track colors are written as oklch(62% 0.25 150), and on an older sRGB laptop the green looks slightly different from the designer’s P3 monitor. What happened?

","options":[{"text":"The browser rejected the color and used the fallback.","why":"The color is valid. Out-of-gamut colors aren’t rejected; they’re mapped into what the screen can show."},{"text":"OKLCH is not supported on that laptop.","why":"Support depends on the browser, not the screen, and every current browser supports oklch()."},{"text":"The P3 monitor is miscalibrated.","why":"The difference is expected: the chroma is beyond what sRGB screens can display."},{"text":"The color is outside the sRGB gamut, so the browser mapped it to the closest color the screen can display.","why":"Correct. oklch() can describe colors more vivid than sRGB. Wide-gamut screens show them; others get the nearest displayable color."}],"answer":3}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n

Designing in oklch()

\n Design\n
\n
\n

The Cost of a Frame

\n Performance\n
","css":".track-design { --track: oklch(62% 0.19 350); }\n\n.session-card {\n margin-block-end: 12px;\n padding: 12px 16px;\n border-radius: 12px;\n border-inline-start: 6px solid var(--track, #94a3b8);\n}\n.session-card h3 { margin: 0 0 8px; }\n.badge {\n display: inline-block;\n padding: 0.1em 0.6em;\n border-radius: 999px;\n}\n\n/* Hand-picked values: replace them with rules derived from --track */\n.badge { background: #fce7f3; }\n.session-card.is-active { border-inline-start-color: #9d174d; }\n\n/* Add the Performance track here */\n"},"solution":{"html":"
\n

Designing in oklch()

\n Design\n
\n
\n

The Cost of a Frame

\n Performance\n
","css":".track-design { --track: oklch(62% 0.19 350); }\n\n.session-card {\n margin-block-end: 12px;\n padding: 12px 16px;\n border-radius: 12px;\n border-inline-start: 6px solid var(--track, #94a3b8);\n}\n.session-card h3 { margin: 0 0 8px; }\n.badge {\n display: inline-block;\n padding: 0.1em 0.6em;\n border-radius: 999px;\n}\n\n.track-perf { --track: oklch(62% 0.19 220); }\n\n.badge { background: color-mix(in oklch, var(--track) 15%, white); }\n.session-card.is-active {\n border-inline-start-color: oklch(from var(--track) calc(l - 0.15) c h);\n}\n"},"checks":[{"id":"badge-tint","test":"const ok = (s) => { const m = /oklch\\(([\\d.]+) ([\\d.]+) ([\\d.]+)/.exec(s); return m ? m.slice(1).map(Number) : null; }; const near = (a, b, t) => Math.abs(a - b) <= t; const c = ok(style('#design .badge', 'background-color')); return !!c && near(c[0], 0.943, 0.01) && near(c[1], 0.0285, 0.006) && near(c[2], 350, 2);"},{"id":"active-darker","test":"const ok = (s) => { const m = /oklch\\(([\\d.]+) ([\\d.]+) ([\\d.]+)/.exec(s); return m ? m.slice(1).map(Number) : null; }; const near = (a, b, t) => Math.abs(a - b) <= t; const c = ok(style('#design', 'border-left-color')); return !!c && near(c[0], 0.47, 0.01) && near(c[1], 0.19, 0.01) && near(c[2], 350, 1);"},{"id":"perf-track","test":"const ok = (s) => { const m = /oklch\\(([\\d.]+) ([\\d.]+) ([\\d.]+)/.exec(s); return m ? m.slice(1).map(Number) : null; }; const near = (a, b, t) => Math.abs(a - b) <= t; const c = ok(style('#perf', 'border-left-color')); return !!c && near(c[0], 0.62, 0.01) && near(c[1], 0.19, 0.01) && near(c[2], 220, 1);"},{"id":"perf-badge-follows","test":"const ok = (s) => { const m = /oklch\\(([\\d.]+) ([\\d.]+) ([\\d.]+)/.exec(s); return m ? m.slice(1).map(Number) : null; }; const near = (a, b, t) => Math.abs(a - b) <= t; const c = ok(style('#perf .badge', 'background-color')); return !!c && near(c[0], 0.943, 0.01) && near(c[2], 220, 2);"},{"id":"derived-for-new-tracks","test":"const ok = (s) => { const m = /oklch\\(([\\d.]+) ([\\d.]+) ([\\d.]+)/.exec(s); return m ? m.slice(1).map(Number) : null; }; const near = (a, b, t) => Math.abs(a - b) <= t; const card = $('#perf'); card.classList.add('is-active'); await tick(16); const c = ok(style(card, 'border-left-color')); card.classList.remove('is-active'); await tick(16); return !!c && near(c[0], 0.47, 0.01) && near(c[2], 220, 1);"}],"title":"Derive the track colors","prompt":"

The Design track’s base color is --track: oklch(62% 0.19 350), but its badge tint and active border are hand-picked hex codes. Replace them with rules that work for any track:

\n
    \n
  1. Badge background: mix 15% of --track with white, in oklch.
    2. \n
  2. Active card (.is-active) border: the track color with lightness 0.15 lower, same chroma and hue, using relative color syntax.
    3. \n
  3. Add a .track-perf class whose --track has the same lightness and chroma as Design, with hue 220.
    4. \n
\n

The checks read the computed OKLCH values, and also activate the Performance card to make sure your rules aren’t specific to one track.

\n","hints":["color-mix(in oklch, A 15%, B) gives 15% of A and 85% of B.","Relative syntax starts with from: oklch(from var(--track) … c h). The l channel is a number from 0 to 1.",".badge { background: color-mix(in oklch, var(--track) 15%, white); }, .is-active { border-inline-start-color: oklch(from var(--track) calc(l - 0.15) c h); }, .track-perf { --track: oklch(62% 0.19 220); }."],"explanation":"

Both state colors now read --track at the element where they’re used, so every track gets its own tint and active border from one base value. color-mix(in oklch, var(--track) 15%, white) interpolates lightness and chroma towards white while keeping the hue, giving a pale tint (L ≈ 0.94). The relative color form unpacks --track into l, c and h, subtracts 0.15 from the lightness and repacks it, so the active border is the same pink, only darker. Because the Performance track shares L and C with Design, its colors carry the same visual weight.

\n","checkLabels":{"badge-tint":"The Design badge is a 15% tint of the track color","active-darker":"The active border is 0.15 darker than the track","perf-track":"The Performance track has the same L and C with hue 220","perf-badge-follows":"The Performance badge tint follows its own track","derived-for-new-tracks":"An active Performance card gets its own darker border"}},"words":794,"readMinutes":4}