More palatable palettes with OKLCH

Although support is still limited, it’s not too early to begin using The Next Big Thing in CSS color.

2023-05-23

Momentum is building in Web Dev World for a relatively new CSS color model, OKLCH, that promises to take fuller advantage of both newer display types and the way our eyes really work. While it’ll be a good while before you can be almost certain a typical device/browser combo will support this color model, proper use of fallbacks will let you safely start using it now in your website.

From the web’s beginnings in the 1990s, colors on the web have typically been shown with hex notation of red-green-blue (RGB) colors, such as #ff0000 for the brightest red or #00ff00 for the brightest green. Of course, those weren’t really the brightest colors but, rather, the best that RGB/hex could indicate.

Moreover, such notations weren’t that intuitive for non-developers to understand when trying to translate colors of, say, logos to RGB/hex-safe versions. Even worse, as monitors (and, later, phone displays) became able to display more color combinations, RGB/hex just wasn’t enough to do the job, so other color models came on the scene as the years passed.

About a decade ago, many CSS gurus began urging web devs to use the HSL (hue-saturation-lightness) model, saying it was a lot easier for their non-dev colleagues to understand and more like the way humans themselves see colors. However, even HSL had its problems. One notable one, shared by all the other models of the time, was that changing an HSL color’s saturation or lightness typically changed its hue, as well, complicating attempts to achieve and maintain uniform color palettes.

Now, perhaps, there’s a solution: the OKLCH model, developed in 2020. It’s an improvement (hence, the “OK” part of the name) on a 1976 effort, LCH (lightness-chroma-hue). Among its main perceived advantages — see the “References and related reading” at the end for far more than I’ll explain here — is that OKLCH allows keeping a color’s hue the same while one adjusts brightness or color saturation (chroma). This makes for superior color palettes over those still using earlier color models, as is true for the RGB/hex-based palettes within Tailwind CSS.

For example, consider Tailwind’s palette of greens. When those colors’ values are run through the OKLCH Color Picker and Converter, the results show that the hue — the “greenness,” if you will — changes slightly (wavering from bluer to yellower, then back) as one goes from light to dark along the choices. Now, compare that to a similar palette of greens that use OKLCH to keep their hue all the way through. (If you’re using an older browser, you’ll see RGB/hex representations rather than the OKLCH colors.)

Tailwind CSS green palette:

           

Similar, OKLCH-based green palette:

           

Your current display may not allow you to see much difference, especially given its subtle nature; so here’s a table comparing the OKLCH hue results for the two:

ColorTailwindOKLCH
50155.83150
100156.74150
200155.99150
300154.45150
400151.71150
500149.58150
600149.21150
700150.07150
800151.33150
900152.54150
950152.93150

All the major browser engines currently support OKLCH, but most displays still can’t come close to matching some of its more vivid colors. The best that most consumers can use right now are on phones’ OLED displays. Of course, quite a few users are still on certain oddball browsers, or older browser versions, that don’t support OKLCH; so you’ll want to use @supports to provide both standard and OKLCH versions of color variables (the OKLCH Color Picker and Converter makes this super-easy):

.myElement {
	--very-light-blue: #dcebfe;
	--medium-red: #db232f;
	--brick-red: #971a20;
	--bright-yellow: #f9f28c;
}
@supports (color: oklch(49% 0.1 252)) {
	.myElement {
		--very-light-blue: oklch(93.5% 0.03 252);
		--medium-red: oklch(57.5% 0.215 25);
		--brick-red: oklch(44% 0.16 25);
		--bright-yellow: oklch(94.5% 0.124 105);
	}
}

Note: This sort of thing shows why you may want to use CSS variables even in Sass, since you can assign new values to existing CSS variables but not to existing Sass variables.


Update, 2023-05-26: Since I initially issued this post, Chris Coyier has weighed in anew regarding OKLCH, and not nearly as favorably as he did in his earlier post on the subject, “OK, OKLCH 👑.” Thus, I have added his newer effort to the following list.


  1. That’s how he capitalized the title. ↩︎

Reply via email
View comments