How to Suck Less at Colors as a Developer
By: Thomas Lombart
Tags: Software Development, Colors, Design, UX, Programming

Color Formats

There are a lot of formats for colors. The most popular ones are Hex, RGB, HSB, and HSL. Let me explain the differences between them and which one you should use.

Hex and RGB

RGB and Hex are the most common formats for representing colors.

RGB gives us the intensity of red, green, and blue of one color. Intensity is a number that can go from 0 to 255. As an example, you could define a light purple color with 164 of red, 43 of green, and 217 of blue:

.color {

color: rgb(164, 43, 217);

}

Hex stands for hexadecimal. It’s similar to RGB; only the format changes: #RRGGBB .

As with RGB, R is for the intensity of red, G for green, and B for blue. These values can go from 00 to FF (which means 0 to 255 if you convert it to decimal). For example, #FF0000 represents a pure red. Indeed, #FF means red is at its highest intensity (255) and the others are at their lowest.

I’ll say it upfront, those two formats aren’t the best when you have to pick colors. Indeed, let’s say you want your app to have a blue primary color. You won’t have only one blue, right? You’ll have to make a lighter blue or a darker blue. Well, good luck doing that with RGB and Hex.

Note: RGB and Hex are not suitable for picking colors, but you can still use them for representing colors.

That being said, let me introduce you to HSB, HSL, and their differences. Let’s begin with HSB.

HSB

HSB means hue, saturation, and brightness.

H stands for hue. It’s a number measured in degrees that is between 0 and 360. The following drawing speaks for itself:

If you have a visual memory and you want to pick a color, this drawing will be your best friend.

What about saturation and brightness? For that, let’s take a look at the following drawing:

These four circles all have the same hue (210°), but still, they look different. Well, that’s because of saturation and brightness.

S stands for saturation. It’s a percentage representing how vibrant color is. Zero percent means you have no saturation, while 100% means you have the maximum. If you choose to add a blue to your UI with a hue of 210° and saturation of 0%, you’ll get a gray color. High saturation, vibrant color. Low saturation, dull color.

To better visualize the saturation for color, here is the blue we saw above, with different variations:

However, you can get two different results for brightness at 100% depending on the saturation:

If the saturation is at 0%, you’ll get pure white. If you have a saturation different than 0%, you’ll just get a highly bright color that is more or less vibrant.

The most perceptive of you will think, OK, HSB is great, but you can’t work with HSB in CSS. Instead, CSS supports HSL. Let’s see it right away.

HSL

HSL means hue, saturation, and lightness. Thus, the only difference compared to HSB here is the lightness.

Lightness represents how close a color is to black or white. Zero percent lightness is equal to black (like the brightness). But 100% lightness is equivalent to white no matter the hue or the saturation. This is the big difference between brightness and lightness.

Let’s take a value example with HSB and HSL. We’ll take a hue of 250° (darker blue) and a saturation of 75% (very vibrant).

For HSB, you’ll get:

H=250, S=75%, B=0% → black

H=250, S=75%, B=100% → very bright blue

For HSL, you’ll get:

H=250, S=75%, L=0% → black

H=250, S=75%, L=50% → very bright blue (the same as with HSB)

H=250, S=75%, L=100% → white

There’s something I find weird with HSL while designing. When I move the lightness up or down and convert it to HSB, the saturation isn’t the same. For that reason, I prefer to work with HSB, which seems easier to me.

In the end, it doesn’t matter if HSB is not available in CSS. What you can do is pick your colors upfront with HSB and convert them to hexadecimal values.

You know about color formats. Great. Let’s deep dive into the exciting stuff.