The many ways to write a color in CSS

#css #html #color

Hi! My name is Cyan, and I am a Color. I'm not as popular as I used to be –not trying to brag, but I was a hit on the Internet in the 90s & early 2000s–, and I am still quite eye-catchy:

Big rectangle with nothing but cyan color — This is a recent picture of me

With the many changes on the web and CSS, I've been going through an identity crisis. People call me in different ways, and I am starting to forget who I really am.

You see, some colors have names, some others don't... and some others have multiple names! For example, I am Cyan, but some random people call me Aqua! (yes, like the Barbie Girl band!)

cyan
aqua

I have to say Aqua is a cool name, it has a ring to it, but I still feel more like a Cyan. Although I must admit, it is nice to have two names.

You may find amazing that we colors have "color languages" similar to the human languages you have. And my name can be translated to many of them!

For example, there's RGB (which stands for Red-Green-Blue). In it, a color can be written in many ways: with and without transparency (alpha), using percentages or numbers, using the rgb() or rgba() functions...

There are 24 ways to write my name in RGB:

rgb(0, 255, 255)
rgb(0, 255, 255, 1)
rgb(0, 255, 255, 100%)
rgb(0%, 100%, 100%)
rgb(0%, 100%, 100%, 1)
rgb(0%, 100%, 100%, 100%)
rgb(0 255 255)
rgb(0 255 255 / 1)
rgb(0 255 255 / 100%)
rgb(0% 100% 100%)
rgb(0% 100% 100% / 1)
rgb(0% 100% 100% / 100%)
rgba(0, 255, 255)
rgba(0, 255, 255, 1)
rgba(0, 255, 255, 100%)
rgba(0%, 100%, 100%)
rgba(0%, 100%, 100%, 1)
rgba(0%, 100%, 100%, 100%)
rgba(0 255 255)
rgba(0 255 255 / 1)
rgba(0 255 255 / 100%)
rgba(0% 100% 100%)
rgba(0% 100% 100% / 1)
rgba(0% 100% 100% / 100%)

Then we have HEX, which is a type of RGB. My name can be written in 4 HEX ways: in a long or short form, and with transparency (alpha) or without it.

#00ffff
#0ff
#00ffffff
0fff

My favorite color language is HSL (Hue-Saturation-Lightness). If it were a human language, it would be French. It is stylish, beautiful, and sounds sexy... plus it supports alpha and many options.

That's why I am so happy that my name can be written in 24 different ways in HSL (but I won't be changing it from Cyan any time soon):

hsl(180, 100%, 50%)
hsl(180, 100%, 50%, 1)
hsl(180, 100%, 50%, 100%)
hsl(180deg, 100%, 50%)
hsl(180deg, 100%, 50%, 1)
hsl(180deg, 100%, 50%, 100%)
hsl(180 100% 50%)
hsl(180 100% 50% / 1)
hsl(180 100% 50% / 100%)
hsl(180deg 100% 50%)
hsl(180deg 100% 50% / 1)
hsl(180deg 100% 50% / 100%)
hsla(180, 100%, 50%)
hsla(180, 100%, 50%, 1)
hsla(180, 100%, 50%, 100%)
hsla(180deg, 100%, 50%)
hsla(180deg, 100%, 50%, 1)
hsla(180deg, 100%, 50%, 100%)
hsla(180 100% 50%)
hsla(180 100% 50% / 1)
hsla(180 100% 50% / 100%)
hsla(180deg 100% 50%)
hsla(180deg 100% 50% / 1)
hsla(180deg 100% 50% / 100%)

Those are the languages that I speak more fluently, and almost every color and browser can understand them, which is nice.

Then, one day CSS changed and decided to add new languages. They are a bit challenging sometimes because they are written slightly differently... but I told myself, "Hey, Cyan! you can do it!" And I am trying to learn them too.

I started with HWB (Hue-Whiteness-Blackness) because it reminds me of HSL. It is new and doesn't have many bells and whistles, but it sounds elegant:

hwb(180 0% 0%)
hwb(180 0% 0% / 1)
hwb(180 0% 0% / 100%)
hwb(180deg 0% 0%)
hwb(180deg 0% 0% / 1)
hwb(180deg 0% 0% / 100%)

On the side, I am trying to learn Lab and LCH... unfortunately I don't think my name can be completely translated into those color languages... or maybe the problem is quite the opposite. They are tough!

In Lab (aka CIE L*a*b*), my name can be written in 3 different ways:

lab(90.67% -50.67 -14.96)
lab(90.67% -50.67 -14.96 / 1)
lab(90.67% -50.67 -14.96 / 100%)

It is also the number of ways that it can be written on LCH (Lightness-Chroma-Hue): 3.

lch(90.7% 52.8 196.5)
lch(90.7% 52.8 196.5 / 1)
lch(90.7% 52.8 196.5 / 100%)

And last but not least, I started practicing CMYK (Cyan-Magenta-Yellow-Key). I left it for last because I was sure that it had to be a good one... after all, it has my name.

And it is good... although a bit complicated for my liking, and not many browsers understand it (none to be precise). Which is sad because it has everything I like: multiple notations, transparency, fallbacks!

My name can be written in 12 different ways in CMYK:

device-cmyk(1 0 0 0)
device-cmyk(1 0 0 0 / 1)
device-cmyk(1 0 0 0 / 100%)
device-cmyk(1 0 0 0, #00FFFF)
device-cmyk(1 0 0 0 / 1, #00FFFF)
device-cmyk(1 0 0 0 / 100%, #00FFFF)
device-cmyk(100% 0% 0% 0%)
device-cmyk(100% 0% 0% 0% / 1)
device-cmyk(100% 0% 0% 0% / 100%)
device-cmyk(100% 0% 0% 0%, #00FFFF)
device-cmyk(100% 0% 0% 0% / 1, #00FFFF)
device-cmyk(100% 0% 0% 0% / 100%, #00FFFF)

And that's it.

...or kind of. Because then we have the color() function that is like a super-power color translator. With it, I can define my name and write it in many different ways with many different fallbacks (in case people don't understand it the first time I say it).

So... that makes it 2 named colors, 24 RGB colors, 4 HEX colors, 24 HSL colors, 6 HWB colors, 3 Lab colors, 3 LCH colors, and 12 CMYK colors... which adds up to 78. Seventy-eight!

Do you understand my identity crisis now? I am but a humble color, and I have over 78 different names! And that's not counting the color() function and all the possible fallbacks. Then I have infinite names!

But rest assured, it doesn't matter how many different names I have. I will always be Cyan.