2/16/2025
Since 2023 you can use the
color-mix
function to create new colors based on other colors.
background-color: color-mix(in oklab, green, white);
The above will produce a lighter green, mixing 50% green with 50% white.
You can alter those percentages.
background-color: color-mix(in oklab, green 40%, white 30%);
When the total is less than 100% the remainder is given to transparency. When the total is above 100% the final listed value is reduced until 100% is the total.
oklab
is a color space. I found it was summed best here, which describes oklab
as:
the most useful and desired option, which is perceptually uniform mixing. In other words a 50-50 mix of two colors gives the color that looks halfway between them.