Giving new meanings to the color functions in CSS

When talking about colors in HTML and CSS, most people only know the "classic three": RGB, Hex (which is a type of RGB), and HSL. But there are many ways to define colors in CSS.

This article is a tongue-in-cheek review of some of the different ways to write a color in CSS. It is not an in-depth review and not really that funny anyway, but if it refreshes some knowledge (or provides a new one), I'll consider it a success.

Let's start! First with the old, then moving into the new.

RGB

Did you think RGB stood for Red-Green-Blue? Guess again! Maybe it did in the past, but now it should be more of a recursive acronym: RGB Got Boring. Let's face it: RGB is everywhere, and everyone likes it, just like vanilla –and if you don't love vanilla, you are a monster!–. But just like vanilla, it is a plain flavor. It tastes good, it combines with many other different flavors, but it gets old fast too.

RGB is limited in the number of colors and doesn't play as nice with the new ultra-mega-super-hyper-high-definition monitors in the market right now as it used to with the big chunky CRTs. But it comes in handy, so it's good to know about it.

Here are some ways of writing colors in RGB:

.rgb-got-boring {
  color: rgb(255, 255, 255);
  color: rgba(255, 255, 255, 0.5);
  /* RGB's new notation? Interesting... but still boring */
  color: rgb(255 255 255);
  color: rgb(255 255 255 / .5);
}

HEX

As mentioned above, HEX is a type of RGB, and as RGB, it got a bit old and boring. So instead of a short for "HEXadecimal," the new meaning should be "Hollering EXes." Because it may sound like a good idea (especially if you had one too many drinks), and it may work; But –trust me– you don't really want to do it.

Still, if you feel in the mood, these are some ways to write colors in HEX:

.hollering-exes {
  color: #fff;
  color: #fff8;     /* the last digit is for alpha */
  color: #ffffff;
  color: #ffffff88; /* the last two digits are for alpha */
}

HSL

HSL changes meaning too. It used to refer to the Hue, Saturation, and Lightness, but the acronym needs a little refresher. This function is more like High Shoe Laces: they look cool and fashionable, they may match some styles... but deep inside, you know that they are dated and don't really fit the outfit you are wearing.

Gone are the days when HSL was "the best way" to do theming and create color swatches in CSS (there are better color spaces and relative colors now)... but I won't stop you from using it:

.high-shoe-laces {
  color: hsl(180, 50%, 50%);
  color: hsla(180, 50%, 50%, 0.5);
  /* HSL's new notation! (among others) */
  color: hsl(180 50% 50%);
  color: hsl(180 50% 50% / .5);
}

HWB

New to CSS as part of the Color Level 4 Module, HWB stands for Hue-Whiteness-Blackness... but it may as well stand for "HoW'Bout no?" Yes, it is a different way to express colors than HSL or RGB (it is more natural to humans). Still, it feels like it falls short compared to the other colorspaces introduced as part of the Color Level 4 module.

.howbout-no {
  color: hwb(180 50% 50%);
}

LAB

Lab stands for Lightness, a*, and b*, which doesn't say much about that colorspace, to be honest. A better acronym would be "Looking All Badass" because that's how colors in Lab look: A-MA-ZING!

Seriously, they are amazing and a better approach to how humans see and perceive lightness and color. Safari (even without the "Technology Preview" part) currently supports Lab. You should definitely try it:

.looking-all-badass {
  color: lab(66% -35 -42);  
  color: lab(66% -35 -42 / 1);
}

LCH

Related to Lab (also all badass), looking at colors in LCH is like Looking at Colors in HD. Who cares about the lightness, chroma, or hue or hue –or is it "huh?"– when you have such vibrant and cool colors available at your fingertips (or your browser window.)

Also available on Safari and behind some (colorful) flags on Firefox:

.looking-at-colors-in-hd {
  color: lch(66% -35 -42);  
  color: lch(66% -35 -42 / 1);
}

CMYK

If when I say "Color Machines You Know" your first thought is a printer, give yourself a cookie! Because there's only one machine you know that uses Cyan, Magenta, Yellow, and Black (Key color), and that's a printer. And nothing else. NOTHING.

This color definition is mainly for those color machines you know. Even when you probably don't own one at home, because you are not a GenX or an Elder Millennial, but a cool Millenial or GenZ. Definitely, not a boomer.

Writing colors for printers is cool and easy: just use percentages... unfortunately, browsers don't like this one:

.color-machines-you-know {
  color: device-cmyk(100% 0% 0% 0%);    
  color: device-cmyk(100% 0% 0% 0% / 1);
}

OKLab + OKLCH

Do you remember being little, asking for permission from your parents, and they kept saying "No" all the time, but eventually they said, "Ok, you can do it"? This is kind of like that. We already have Lab and LCH, which are nice, but we are asking for something better, so we get OKLab and OKLCH, which are easier to use and predict. Something like "OK, here's a new Lab and LCH just for you."

Want to try them? Check them on Safari (Technology Preview):

.ok-looking-all-badass-in-hd {
  color: oklab(66% -35 -42);    
  color: oklch(66% -35 -42 / 1);
}

P3

Nobody knows what P3 stands for (Ok, ok, I bet maybe someone does)... so we can come up with whatever acronym we want. And what better acronym for P3 than it being 3 P's: Purposely Phenomenal & Phantastic.

Note: Someone told me that Phantastic might refer not only to Fantastic but also to some hallucinogenic substances... which makes it even better! Especially if we consider the whole new world of vibrant colors that you'll experience when using P3. Of course, you'll think those colors are high-definition.

P3 can be used with the color() function:

.purposely-phenomenal-phantastic {
  color: color(display-p3 0 1 1);
}