When I started doing front-end development in school, I usually use the color codes that CSS already provides. That way, it’s easy to read compared to using HEX or RGB.
Now that I’ve advanced to a higher level, I don’t use them most often. There are approximately 16 million color combinations out there, yet somehow I’m constrained to 50+ colors on htmlcolorcodes.com. It’s boring as hell, and you might agree too.
Most of the time, I would use hex codes in my projects. It’s a much shorter alternative to RGB, and reading the hex code is a piece of cake (with a bit of experience, of course).
But a few weeks ago, I stumbled upon HSL, a color model that is much easier to read than RGB or HEX. A color model that makes me say to myself, “why haven’t I known about this sooner?”
So I decided to do some research about it, and just compile them all into this blog post. If you want to learn more about it, I’ve also referenced a few supplemental videos at the bottom of this article.
There are many downsides to using RGB and hex codes, depending on who you ask. Let’s narrow it down into three downsides: color interpretation, applying tint/shade/tone, and alpha values.
I was lying when I said that reading HEX codes is a piece of cake. Sure, I use hex codes often enough, but I’m having problems interpreting what the color is without peeking at the color picker.
Here, let me give you an example.
Say I hold out a flashcard with a hex code of #4D1C7C and I ask you to picture that color in your mind. If you try to imagine a dark shade of violet, you’re a wizard and I appreciate that. If not, that’s okay.
If you can relate to my situation, then you’re not alone. Chances are, the majority of new designers and developers would have trouble imagining a color from a hex code. That also applies to the general public whose design-related stuff isn’t one of their niches.
If you’re working on design-related stuff for months, you’ve probably heard of the terms tint, shade, and tone. Yeah, most of us are probably confused about using those terms, but that’s not the point.
The point is that when using hex codes, it can be hard to apply a tint/shade/tone to a pure color without peeking at the color picker. Trust me, you might end up in that situation like that.
The last more concerning downside of using RGB or Hex is alpha values. An example of alpha values is when you want to make a color transparent or dial down the shadow without affecting the values.
While RGB is fine (where you can set the value from 0 to 1), the Hex code is the nightmare fuel. Here’s another example to see how impossible that is:
Say I pull out another flashcard with a hex code of #196bffcc and I ask you again to picture that color in your mind, including the transparency. Okay, I know you’re brain is maybe overloaded by this but the answer should be a shade of blue with 80% opacity.
Those are the three downsides of using RGB or Hex codes in your design. As you can tell, it’s pretty bad and frustrating in general. Now that’s out of the way, let me tell you about this underrated color model, HSL.