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.
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.
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.
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.
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.
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.
Documentation for the color-mix CSS feature
Up-to-date information on browser support for color-mix
Video by Kevin Powell on the use of color-mix with currentColor