CSS color-mix() with OKLCH: Build Practical UI Color Ramps

Prerequisites

• A base brand or accent color you already trust.
• A stylesheet where CSS custom properties are allowed.
• A fallback color for each important token.
• A contrast checker for any text, icon, or UI state that must remain readable.

If you need a quick refresher on modern color syntax, the CSS color formats guide covers HEX, RGB, HSL, OKLCH, color-mix(), alpha, and fallback context before you start wiring tokens into a UI.

Why Mix in OKLCH

color-mix() asks for an interpolation space. That space decides how the browser travels from one color to another. Mixing in srgb can be fine for small utility effects, but RGB channels are not organized around human perception. OKLCH gives you a more design-friendly way to think about the result: lightness, chroma, and hue.

That does not mean OKLCH magically fixes every palette. It means the intermediate colors are often easier to reason about when you care about perceived lightness and colorful intensity. You still need to check contrast, gamut, and final appearance in the real component.

How color-mix() Percentages Work

In a color-mix() expression, percentages describe how much of each color participates in the mix. If you provide one percentage, the remaining share is assigned to the other color. For example, mixing a brand color at 20% with white creates a very pale tint. Mixing the brand color at 85% with black keeps the brand dominant while darkening it.

:root {
  --brand-tint: color-mix(in oklch, var(--brand-oklch) 20%, white);
  --brand-hover: color-mix(in oklch, var(--brand-oklch) 85%, black);
  --brand-muted: color-mix(in oklch, var(--brand-oklch) 55%, gray);
}

Step 1: Start with a Stable Base Color

Start with one approved color and store it as a custom property. The fallback can be a HEX value, while the modern value can be OKLCH. Keeping both close together makes the intent easier to review.

:root {
  --brand: #2f6fed;
  --brand-oklch: oklch(0.58 0.21 263);
}

Step 2: Mix Toward White for Soft Surfaces

A common use for color-mix() is creating a soft background from an accent color. In OKLCH, mixing toward white can create a lighter surface that keeps more of the original hue direction.

:root {
  --brand-surface: #eef4ff;
  --brand-surface-strong: #d9e6ff;
}

@supports (background-color: color-mix(in oklch, black 50%, white)) {
  :root {
    --brand-surface: color-mix(in oklch, var(--brand-oklch) 12%, white);
    --brand-surface-strong: color-mix(in oklch, var(--brand-oklch) 24%, white);
  }
}

Step 3: Mix Toward Black for Hover and Active States

For button hover and active states, mix the base color toward black in small steps. Keep the movement modest. Large jumps can make the UI feel inconsistent and may change contrast more than expected.

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

.button-primary:hover {
  background-color: #275ed0;
}

.button-primary:active {
  background-color: #214fae;
}

@supports (background-color: color-mix(in oklch, black 50%, white)) {
  .button-primary {
    background-color: var(--brand-oklch);
  }

  .button-primary:hover {
    background-color: color-mix(in oklch, var(--brand-oklch) 88%, black);
  }

  .button-primary:active {
    background-color: color-mix(in oklch, var(--brand-oklch) 78%, black);
  }
}

Step 4: Create Borders and Focus Rings

Borders and focus rings need enough contrast to be perceived against adjacent surfaces. A useful pattern is to mix the base color toward white for subtle borders and use a stronger, less diluted mix for focus outlines.

.field {
  border: 1px solid #b8c9ef;
}

.field:focus-visible {
  outline: 3px solid #5f8df5;
  outline-offset: 3px;
}

@supports (outline-color: color-mix(in oklch, black 50%, white)) {
  .field {
    border-color: color-mix(in oklch, var(--brand-oklch) 35%, white);
  }

  .field:focus-visible {
    outline-color: color-mix(in oklch, var(--brand-oklch) 76%, white);
  }
}

Step 5: Keep Fallbacks Close to the Modern Value

A fallback should be a real color, not a placeholder. For simple properties, a fallback declaration followed by a modern declaration can work well. For custom-property token systems, an @supports block is clearer because unsupported modern color functions inside variables can be harder to reason about than a plain ignored declaration.

.notice {
  background-color: #eef4ff;
  border-color: #b8c9ef;
  color: #102a36;
}

@supports (background-color: color-mix(in oklch, black 50%, white)) {
  .notice {
    background-color: color-mix(in oklch, var(--brand-oklch) 12%, white);
    border-color: color-mix(in oklch, var(--brand-oklch) 35%, white);
  }
}

Step 6: Verify the Result

After generating colors, test the actual pairs. color-mix() can make a palette easier to maintain, but it does not guarantee accessible contrast, brand fit, or good dark-mode behavior. Use the CSS color generator to inspect generated values, then check important foreground and background pairs before shipping.

1. Inspect the computed color in browser dev tools.
2. Check text contrast on every mixed background.
3. Check focus rings against both the component and surrounding surface.
4. Test hover and active states with keyboard and pointer interaction.
5. Keep documented fallbacks and @supports coverage for production-critical colors.

Step 7: Freeze Important Results as Tokens

Generated colors are convenient, but important product colors should still become named tokens once they are approved. That gives designers, developers, and reviewers a stable contract. The color can be produced with color-mix() during exploration and then documented as a named role such as --color-action-primary-hover or --color-info-surface.

This is especially useful when a mixed value affects accessibility, brand review, screenshots, or exported design documentation. A formula explains where the color came from, but a token explains how the color should be used.

Example Token Set

Common Mistakes

• Mixing every state by the same percentage without checking contrast.
• Assuming OKLCH hue numbers match HSL hue numbers exactly.
• Using color-mix() output for text without testing the final foreground/background pair.
• Removing fallbacks before confirming the site's support target.
• Putting modern color functions inside custom properties without a feature-query plan.
• Treating generated ramps as final design tokens without review.
• Using the background shorthand when only background-color should change.

For deeper implementation details around interpolation and color-space choice, Hue Codex documents its approach in the color mixing and gradients methodology.

FAQ

Final Takeaway

CSS color-mix() with OKLCH is strongest when it supports a clear token workflow: start with an approved base color, generate related surfaces and states, keep fallbacks nearby, and verify the actual UI pairs. As a next step, generate one surface, one hover state, one border, and one focus outline, then freeze only the values that pass contrast, support, and component review.