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.