How the color-mix() CSS Feature Can Help Simplify Your Site's Colors

Although CSS preprocessors have had the ability to mix and modify colors for quite a while now, there hasn't been a clean way to achieve the same thing with vanilla CSS. Luckily, this seems to be changing with the help of a CSS feature that is now supported in all major browsers.

How color-mix() works

The color-mix() CSS feature mixes two colors together with a chosen method and returns the result. For example, the following mixes blue with white in a 60/40 ratio:

color: color-mix(in lab, rgba(0, 0, 255) 60%, white 40%);

More details on what methods and color spaces are available can be found in the color-mix documentation.

Potential Use Cases

More accessible link colors

In a lot of cases, if a single color value contrasts well with a light background it's unlikely that the same color will also contrast well with a dark background. On a website that supports both light and dark themes, or even just has components with different backgrounds and text colors, this can pose an issue when it comes to accessibility.

As demonstrated in a recent video by Kevin Powell, color-mix can be used in conjunction with currentColor to help address this issue. Assuming that the text color is set properly in the place where the accent color is being used, mixing the accent with currentColor can help improve the odds that it will meet minimum contrast requirements.

The example below shows this being used to define the colors used for links:

When combined with media queries such as prefers-color-scheme and prefers-contrast, this could become an incredibly powerful option for improved accessibility. It is worth noting, however, that you should still always check to ensure that the resulting colors meet the standard.

Simpler dynamic theming using color variables

In addition to accessibility, another potential use case for color-mix is in the implementation of dynamic color themes. A preprocessor like SASS can easily handle the task of mixing colors for predefined themes, but if a site required support for user-defined color values it became significantly more complicated. With color-mix, accomplishing this is quite simple.

In the example below, we use a single CSS variable to handle the accent color for each theme and two others to handle whether the page is in light or dark mode. Because the color mixing is done in the css itself rather than a preprocessor, themes can be generated on the fly without requiring recompilation or converting colors to HSL. In the example, this can be demonstrated by entering a custom color value into the "Accent Color" field.

And More

Although these are a few notable use cases for color-mix, they are far from the only ways it can be utilized. This feature appears to be a very powerful tool for both streamlining color styles and offering increased accessibility to users who need it and it will be very interesting to see where developers take it from here.