Seedling
Last updated:

Investigating the color-mix property

This is a Seedling
The idea is here, the rest of the words aren't yet. Check back soon, or don't, and catch it when it's done.

The color-mix() function takes two color values into it, and passes back a mix of the two in a colorspace by a certain amount. Like our own B&Q (Home Depot for an American equivalent…maybe) paint mixing service, or kids loose with a bunch of paintbrushes and neon paint. So altogether, it takes 2 color values but also a percentage parameter as well, for example: background-color: color-mix(in srgb, #34c9eb 40%, white).

background-color: color-mix(in srgb, #34c9eb 40%, white)

There’s also quite a list of available colorspace options; srgb, srgb-linear, lab, oklab, xyz, xyz-d50, xyz-d65, hsl, hwb, lch, oklch. There is no default, and I have no idea what half of these are.

What does it look like?

  1. Text at 0%

  2. Text at 25%

  3. Text at 50%

  4. Text at 75%

  5. Text at 100%

Browser Support

Fully supported

Chrome 111
Edge 111
Firefox 113
Safari 16.2
You might also like...