I recently stripped Tailwind out of my website and replaced it with good old-fashioned CSS.

In the process of doing this I converted all my colors to use the oklch() color function and started using a relative color palette, instead of explicitly defining each shade.

About OKLCH

If you're not familiar with oklch(), it's a modern color function that more closely aligns with how humans perceive color compared to older functions like hsl() or rgb().

The oklch() color function has been available in all modern browsers since May 2023.

OKLCH is derived from the OKLab color space. In OKLCH, the L represents the lightness, the C measures the color's chroma, and the H measures the hue.

Unlike how the lightness in HSL is calculated based on other colors, the lightness in OKLCH refers to the "brightness" we visually perceive with our eyes.

The syntax for oklch() is worth mentioning. The values in oklch() are space separated, rather than comma separated.

css

// ✅ valid syntax
oklch(0.738 0.1799 148.67);
oklch(0.738 0.1799 148.67 / 0.5);

// ❌ invalid syntax
oklch(0.738,0.1799,148.67);
oklch(0.738,0.1799,148.67,0.5);

Relative Colors

Relative colors are easy enough to define. All it takes is a starting color and a CSS color function! It doesn't have to be oklch(), that's just my preferred function at the moment.

The following example is saying: create a color using var(--custom-color) as the starting point, give the new color a lightness of 0.8 and keep the chroma and hue values from the original color.

css

oklch(from var(--custom-color) 0.8 c h);

Relative Colors Example

Below is an example of a relative color palette, where one color determines all the shades in the palette. There is an example using oklch() and one using hsl() to highlight the differences in range.

The differences in range may be easier or more difficult to discern depending on your device and browser.

The following color-input web component was created by Adam Argyle.

oklch()

99%

90%

80%

70%

60%

50%

40%

30%

20%

10%

hsl()

99%

90%

80%

70%

60%

50%

40%

30%

20%

10%