CSS Colours: RGB vs HEX vs HSL

Color Codes: What’s the Difference Between Hex, RGB, and HSL?

When it comes to splashing colour on the screen, there are a few ways to do it with coding. Hex, RGBA, and HSLA are three of the most commonly used css colours code systems. 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.

You’ve probably come across hex codes and RGB in the past, but HSL, despite being more human-readable, may not have been on your radar yet. Every way of writing colours down makes sense in different situations, and all you need is a basic understanding of each type to make an informed decision. Here we will explain the differences between RGB, HEX and HSL.

Color Converter Tools

Following tools will be helpful to you for the interconversion of colors.

• RGBA to HEX Converter
• HEX to RGBA Converter

What is RGB (Red, Green, Blue)

It makes sense to start with RGB values since Red, Green, and Blue are the three colours that screens can use to produce pretty much every other colour. It does this using “additive colour mixing,” but you don’t have to delve into the science of that to understand RGB.

RGB(255, 0, 0) is red since the R is maxed out. If you set either the G or the B to 255, you’ll get full green or full blue. Set them all to 255 at once and you’ll get white (the sum of all colours), while zeroing them renders black. If you add a fourth value (the alpha channel, between 0 to 1) you can also get transparency: RGBA (0, 0, 0, .5) translates to a half-transparent black.

It’s simple, yes, but not actually that intuitive. The RGB balance can change quite a bit even if you’re just changing the shade of a colour, making it very difficult for humans to make manual adjustments without some kind of an RGB generator (of which there are, fortunately, many).

What are Hexadecimal css colours codes

Hexes are just a different way of writing RGB values. Something like #6a79f7 (cornflower blue) maps directly to RGB(106, 121, 247). 6a is red, 79 is green, and f7 is blue.

First, you should know that in the hex css colours system the letters “a-f” represent the numbers ten to fifteen. Secondly, it’s hexadecimal, meaning everything is in base 16. 21 is 2 * 10 + 1 in base 10, but in hexadecimal it would be 2 * 16 + 1. Just multiply the first number by 16 and add the second number – it’s as easy as that! 6a = 6 * 16 + 10 or 106. 79 = 7 * 16 + 9 or 121.

While the math is fun, it obviously makes hexadecimal codes even more of a pain for humans than RGB, though they are easy to copy-paste and can have memorable letter/number combinations.

You can also add transparency to hex codes by putting a value equivalent to some percentage of 255 at the beginning, like so: #806a79f7. 80 in hexadecimal = 126, which is close to 50% of the maximum value of 255.

What is HSL (Hue, Saturation, Lightness)

HSL was pretty much designed for human readability, and it’s gaining popularity, particularly as an RGB alternative. It works like this:

Hue means colour, and it uses the degrees of the colour wheel to tell you what colour you’re on. If you know the colour wheel and the positions of these main colours, you should be able to tell that 45 will look orange and 270 will look purple just by thinking about it for a second.

Saturation is essentially how colourful the colour is. 0% saturation means the colour will just be a shade of grey, while 100% means it will show up full strength. If you want to mute your colour or make it pop a little more, you can just change this value.

Lightness tells you how dark or bright the colour is. 0% lightness means your colour will be black, regardless of the Hue or Saturation settings, and 100% lightness will get you white. As you might have guessed, 50% gives you the most accurate colour.

With that information, you should be able to tell instantly what HSL(0, 100%, 50%) means. It’s just red! Want a darker, richer red? Try 0, 70%, 40%. Maybe you want that, but in blue? Just change 0 to 240 and you’ve got it! It has transparency, too – it works just like RGB: just add a fourth value (between 0 and 1), like so: HSLA (240, 70%, 40%, .5).

HSV/HSB and HSI

What? More colour models? When does it end? For most people who work with colours on computers, it’s already over. Hex, RGB, and HSL are by far the most common ways to notate colours. If you’re in a field involving lots of images and colours, though, like graphic design or machine learning on images, you may run across people using one of these more esoteric colour models, or even one of the others not listed here.

HSB stands for “Hue Saturation Brightness” and HSVs stands for Hue Saturation Value. They’re actually just different names for the same model, and their biggest difference from HSL is in how they define saturation. HSI (Hue Saturation Intensity) has a few minor differences from HSB/HSV, but it’s not widely used, so odds are you won’t see it in the wild very much.

Which css colours model should I use?

Generally, choosing a colour model is a fairly minor design decision, but good things are made with many small decisions. In general, hex codes make copy-pasting easy and are great in situations where humans probably won’t be involved very much. RGB/RGBA is decent for readability and is best used when it would be nice if a human could sometimes tweak transparency. If a human will need to manually change the colour, go with HSL/HSLA. Other than that, it’s pretty much a matter of preference, although people on team HSL do tend to be smarter and better-looking.