Color in a wider gamut in CSS

oklch is lightness, chroma and hue, so a palette is one number changing at a time.

:root {
  --brand: oklch(62% 0.19 256);
  --brand-tint: color-mix(in oklab, var(--brand) 20%, white);
  --brand-dark: oklch(from var(--brand) calc(l - 0.15) c h);
  --ink: oklch(22% 0.02 260);
}

.button {
  background: var(--brand);
  color: white;
}

.button:hover {
  background: var(--brand-dark);
}

.note {
  background: var(--brand-tint);
  color: var(--ink);
}

How it works

1. The three parts are perceptual, so equal lightness really looks equal.
2. color-mix() blends two colors in a space you name.
3. A relative color syntax derives one color from another.

Keywords and builtins used here

• background
• button
• calc
• color
• note
• oklch
• var

The run, in numbers

Lines

20

Characters to type

350

Tokens

106

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 85 seconds.

Type this snippet

Step 2 of 4 in Color & type, step 11 of 26 in Selectors & the box model.

← Previous Next →