Colors on the Web RGB vs. HEX vs. HSLa

For people just starting out in web design, finding out about all the different languages and their various nuances is difficult enough. Add in the fact that web languages change on a daily basis–even plain old HTML and CSS have hundreds of considerations to take into account, and all this stuff can be pretty overwhelming. One of the sources of confusion that I’m often asked about is the difference between RGB and HEX and why someone would want to use one or the other.

The Definitions

Before we get into when you use one or the other, we have to do some defining and for this, we’ll go back to a topic near and dear to my heart: Color Theory.

RGB or Red/Green/Blue is a color model. Similar to the more familiar RYB (Red/Yellow/Blue) model that most people are more familiar with if they’ve studied the color wheel. RGB is the color model used for websites. We use RGB instead of RYB because it is additive. An additive color model is one that works for illuminated media–which is a fancy way of saying, content that lights itself. Additive can also be thought of as colors that add up to emit light. When you’re using the RYB color model (or even the CMYK model) you should be working with subtractive color. This means that instead of lighting itself up, the content is displayed on a surface where light is bouncing off of it. This is because subtractive colors work by reflecting and absorbing light.

The Difference Between HEX and RGB

Back to the question at hand. This is an example of a HEX color code:

#33743b

This is the same HEX color code in RGB, where red is the first number, green is the second, blue is the third:

51, 116, 59

Having looked at those two, you’re probably wondering why on earth you would ever use RGB, considering the first example is a lot easier to remember and type out. The thing is, both versions have different uses, even if the end result is usually the same.

The one time you may wish to convert from HEX to RGB is when you need to access the opacity or alpha of an element. At which point, you would use RGBA. A typical RGBA value would look like this:

51, 116, 59, 0.65

In the above code, the first three values represent the Red, Green, Blue values and the last value (0.65) represents the alpha. At 0.65 alpha, we are seeing the above colors at 65% opacity.

Then There’s HSLa

HSLa stands for Hue Saturation Lightness alpha. HSLa somewhat resembles RGBA, except the first value stands for our Hue–or color. We declare our colors by looking at the color wheel. The wheel is–obviously–a circle where reds are around the 0 degrees to 360 degrees area, 120 degrees are our greens, and 240 degrees are our blues.

Saturation is expressed as a percentage. When we talk about the saturation of a color, we’re talking about how much grey it has. AT 100% the saturation is all the way up and we are viewing the color fully.

Lightness is also expressed as a percentage and describes how much black or white we have in a color. At 0% we have full black. At 100% we have full white.

Opacity works as a decimal like it does in RGBA, where 1 represents fully opaque, 0 represents fully transparent, and everything in between is partially opaque. For example, 0.45 means that an element is 45% opaque.

A typical HSLa value looks like this:

310, 30%, 20%, 0.65

Writing CSS for HEX, RGBA & HSLa

Here are some examples for how you would write a CSS rule for a paragraph tag using these three values.

First, let’s look at HEX:

p {
color: #25547f;
}

Here’s that same declaration, only in RGBA this time:

p {
color: rgba(37, 84, 127, 1);
}

And here’s the same declaration in HSLa:

p {
color: hsla(209, 55%, 32%, 1);
}

Which one to use?

HEX is very attractive because it’s short and simple to remember and type out. But HEX might not work for you in all situations, which is when you may wish to consider one of the other two methods. Both of which have their pluses and minuses.

RGBA is well-known and supported in older versions of Internet Explorer (9 and older). It has an additional field for alpha values which come in handy when you want to work with opacity.

HSLa is a newer, more intuitive way to work with colors. Unlike RGBA where we have to mesh some numbers around to get the color we want, we can grab the Hue then work with percentages to get the saturation and lightness levels that we need. HSLa also includes an alpha value for opacity.

The one thing to note regarding HSLa is that, like I said above, it isn’t supported by older versions of Internet Explorer. So if you were going to use HSLa, you’ll need to rely on some fallback codes and this could mean bringing in RGBA or HEX. A typical fallback code for an HSLa statement would look like this:

p { 
    color: #25547f;
    color: hsla(209, 55%, 32%, 1);
}

In the above code, the first declaration is a HEX value that’s meant to work as our fallback. The second declaration is for HSLa and will be used for browsers that can support it.

Some stuff to make things easy

Some designers/developers use programs that favor HEX over RGBA, and some even use programs that have built-in tools for HSLa, but what if you find yourself needing to convert one to the other? Here are some online tools to help you convert these values back and forth:

HEX to RGB: Converts HEX values into RGB.

RGB to HEX: Converts RGB to HEX.

HSL Color Picker: Can convert HEX or RGB into HSL.


11 comments on “Colors on the Web RGB vs. HEX vs. HSLa

  1. Alyssa Melignano on

    Hi,

    I am using a color from photoshop, but when I am inputting the HSLA into squarespace, the color is not the same. Any ideas? I am inputting the exact H S L A numbers from photoshop, but not translating to the same color in Squarespace. Thanks

    Reply
    • Khanh on

      Hi Alyssa, I think you may have to contact Squarespace about this one. It sounds like something related to how their system translates the number codes you’re putting in and without seeing it for myself, I can’t give you any specific help beyond this. Sorry I couldn’t be of more help to you.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.