CSS color-mix() and oklch: Modern Color Systems for WordPress Themes

CSS color-mix() lets you blend two colors in any color space directly in CSS, replacing preprocessor functions like Sass’s mix() or LESS’s mix(). Combined with the new oklch(), lab(), and display-p3 color spaces, it enables vivid, perceptually uniform color systems in WordPress themes.

Problem: A WordPress theme uses hardcoded hex colour values throughout its CSS — mixing tints, shades, and transparency requires maintaining dozens of separate variables, and changing the brand colour means updating every variant manually.

Solution: Use color-mix() with the oklch colour space to generate tints and shades from a single source variable, and define the palette in theme.json so it propagates to both the editor and the front end. oklch produces perceptually uniform colour steps that hsl does not.

The examples below use color-mix() to generate tints and shades from a single custom property, build a button hover state without JavaScript, and define a WordPress theme.json palette using oklch colors.

/* color-mix() syntax:
   color-mix(in ,  [],  []) */

:root {
  --brand: oklch(55% 0.2 250);   /* vivid blue in OKLCH */
  --white: #ffffff;
  --black: #000000;
}

/* Generate tints (mix with white) */
.btn-primary {
  --tint-10: color-mix(in oklch, var(--brand) 90%, var(--white));
  --tint-30: color-mix(in oklch, var(--brand) 70%, var(--white));

  background: var(--brand);
  color: var(--white);
}

.btn-primary:hover {
  /* Darken by mixing with black — no JS, no Sass */
  background: color-mix(in oklch, var(--brand) 80%, var(--black));
}

/* Desaturate by mixing with a grey */
.btn-disabled {
  background: color-mix(in oklch, var(--brand) 30%, oklch(70% 0 0));
  cursor: not-allowed;
}

/* oklch is perceptually uniform — equal L values look equally bright */
.palette {
  --red:    oklch(55% 0.22 25);
  --green:  oklch(55% 0.18 145);
  --blue:   oklch(55% 0.20 250);
  /* All three appear equally bright despite different hues */
}

Add modern color space support to a WordPress theme.json:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "brand",       "color": "oklch(55% 0.2 250)",  "name": "Brand Blue" },
        { "slug": "brand-light", "color": "color-mix(in oklch, oklch(55% 0.2 250) 70%, white)", "name": "Brand Light" },
        { "slug": "brand-dark",  "color": "color-mix(in oklch, oklch(55% 0.2 250) 80%, black)", "name": "Brand Dark" },
        { "slug": "accent",      "color": "oklch(65% 0.22 45)",  "name": "Accent Orange" }
      ],
      "custom": true,
      "duotone": []
    }
  }
}

NOTE: color-mix() is supported in all modern browsers since 2023. For older browsers provide a fallback custom property: declare a hex fallback before the color-mix() value, and browsers that don't support it will use the hex.