2026年11月14日

CSS color-mix(): Shades and Transparency from WordPress Theme Colors

Themes & Design

This article is a localized edition of the Japanese original. Read the Japanese original

CSS color-mix() is a function that creates a color by mixing two colors in the proportions you specify. In WordPress, if you combine it with the color variables your theme provides (--wp--preset--color--slug), your hover colors and light background colors change along with the theme's palette.

The syntax and behavior in this article follow MDN's documentation and CSS Color Module Level 5 as of November 2026.

color-mix() syntax

color-mix(in colorspace, color1 percentage1, color2 percentage2)

in colorspace specifies which color space to mix in. You can use srgb, oklab, oklch, hsl and others.
Percentages are values from 0 to 100 percent and can be omitted.
Example: color-mix(in srgb, blue 30%, white) gives a color that is "30% blue, 70% white".

The percentage rules are as follows.

How you write it	Result
Both omitted	Mixes 50% of each
Only one given (e.g. `blue 30%, white`)	The other is the remainder subtracted from 100 percent (70% white)
Total over 100 percent (e.g. `60%` and `60%`)	Scaled down, keeping the ratio, so the total is 100 percent (50% each)
Total under 100 percent (e.g. `30%` and `30%`)	Mixed at a 50/50 ratio, and the total of 60% becomes the opacity (slightly see-through)
Both 0%	Invalid (the declaration is not used)

The latest specification also defines omitting the color space (the default is oklab) and mixing three or more colors, but browser support for these is not consistent. This article uses only the widely working form: "two colors, with the color space stated".

The color space changes how colors mix

Even with the same two colors, the color in between depends on the color space you mix in.

Color space	Characteristics
`srgb`	Mixes the traditional RGB values directly. Blue and yellow tend to turn a dull grayish color
`oklab`	Mixes in a space close to how people perceive lightness. Midtones stay clearer, and shades mixed with white or black tend to look natural
`oklch` / `hsl`	Mixes by following the hue (the angle of the color). Gives vivid midtones, such as purple appearing between red and blue

As a rule of thumb, use oklab or srgb just to make shades, and oklch for vivid gradient midtones. In the end, compare them on a real screen and decide.

Browser support

The basic two-color form works in Chrome and Edge 111, Firefox 113 and Safari 16.2 and later. MDN treats it as a feature widely usable in major browsers since May 2023 (Baseline Widely available). How to handle older browsers is explained later in "Preparing for browsers without support".

Where to write it in WordPress

color-mix() is a CSS value, so you can use it anywhere you can write CSS.

Where to write it	Good for
Your child theme's `style.css`	Managing the theme's look in one place
Classic themes: "Appearance" → "Customize" → "Additional CSS"	Trying out just a few lines
Block themes: "Additional CSS" under "Styles" in the Site Editor	Adding just a few lines in a block theme
`styles.css` in `theme.json`	Building your own block theme and including the CSS in the theme

For creating a child theme, see How to add CSS to a WordPress child theme; for theme.json, see How to set up your design with WordPress theme.json.

Find your theme’s color variables

Colors registered in settings.color.palette in theme.json are output by WordPress on the page as CSS variables named --wp--preset--color--slug. Slugs differ from theme to theme (primary, contrast, accent-1 and so on), so first check the names in your theme.

Open your site in the browser and open the developer tools (F12).
Select body in "Elements" and look at the variables starting with --wp--preset--color-- listed under "Styles".

The examples below assume there is a color with the slug primary. Replace it with your theme's slug.

Example 1: Create a button hover color

Mixing a little black into the base color gives a slightly darker color. When you change the theme color, the hover color follows.

.my-button {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}

.my-button:hover,
.my-button:focus-visible {
	/* Mix 85% of the base color with 15% black to darken it slightly */
	background-color: color-mix(in oklab, var(--wp--preset--color--primary) 85%, black);
}

To apply it to a "Buttons" block in the block editor, enter my-button in the block's "Advanced" → "Additional CSS class(es)".

Example 2: Create a light background color

Mixing in plenty of white gives a light color in the same family. It suits the background of notice boxes and table header rows.

.notice-box {
	background-color: color-mix(in oklab, var(--wp--preset--color--primary) 12%, white);
	border-left: 4px solid var(--wp--preset--color--primary);
	padding: 1em 1.25em;
}

Example 3: Create a semi-transparent color

To make a color see-through, mix it with transparent. The percentage you mix in becomes the opacity.

.hero-overlay {
	/* Make the base color 70% opaque */
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
}

Putting color-mix() inside rgba(), as in rgba(color-mix(...), 0.7), is not valid CSS syntax, so the whole declaration is ignored. Adjust transparency with the form above.

Example 4: Use it for a gradient midtone

You can also write color-mix() as a color stop in linear-gradient(). Putting a midtone mixed in oklch between the two colors keeps the middle from turning dull.

.gradient-band {
	background: linear-gradient(
		to right,
		#1e66f5,
		color-mix(in oklch, #1e66f5, #fe640b) 50%,
		#fe640b
	);
}

linear-gradient() itself also lets you specify the interpolation color space, as in linear-gradient(in oklch to right, #1e66f5, #fe640b), but the color-mix() approach above lets you decide the midtone's position and how it is mixed separately.

Preparing for browsers without support

For values without var(), write a regular color first and color-mix() after it; browsers without support ignore the later line and use the earlier color.

.notice-box {
	background-color: #eef3fe; /* For browsers without support */
	background-color: color-mix(in oklab, #1e66f5 12%, white);
}

However, this does not protect declarations that contain var(). A value containing var() is treated as valid when the CSS is parsed, and when it turns out to be invalid just before rendering, it falls back to the initial value (transparent for a background) rather than the color written earlier. When combining with theme variables, separate them with @supports.

.notice-box {
	background-color: #eef3fe;
}

@supports (color: color-mix(in srgb, red, blue)) {
	.notice-box {
		background-color: color-mix(in oklab, var(--wp--preset--color--primary) 12%, white);
	}
}

What to check when the color does not apply

In the developer tools, see whether the declaration is struck through. If it is, the syntax is wrong (forgot in, wrong color space name, both percentages 0%, etc.).
Make sure the variable's slug is correct. If you use a variable that does not exist, the whole declaration becomes invalid and falls back to the initial value (transparent for a background).
If you use a caching plugin or a CDN, clear the CSS cache before checking.

References: color-mix() (MDN), CSS Color Module Level 5 (W3C)

Questions about WordPress? The publisher of this site is based in Japan and replies in Japanese. Contact (Japanese)