Lightness vs Tints vs Shades

What is this?

This demo compares 2 techniques from the chosen color:

• color-mix() to use black or white over 10 steps
• oklch to calc() lightness to 0% or 100% over 10 steps

The demo exposes a few difficult things about color:

1. sometimes adding white is better than reducing lightness, but sometimes it’s not
2. mixing white or black naturally reduce chroma during lightening, but can also quickly create boring unsaturated results
3. color spaces really matter, across each hue and for various saturations
4. lightness 0% in oklch doesn’t mean black, nor 100% in white

Takeaway for me:

Lightness calc(), if tamed with appropriate amounts of chroma reduction alongside the lightness changes, is probably the best route, but it’s difficult to roll your own chroma reduction system across N steps and so most adjustments may never reach black or white in the end of the steps.

Using color-mix() has the advantage of always reaching actual black or white without intervention, but in middle range saturation colors it can suck the life out of the mix.