What is the Difference Between RGB, Hex and HSL? | When it comes to splashing color on the screen, there are several ways to do it by coding. Hex, RGBA, and HSLA are three of the most commonly used color coding systems.
During this time, you may have come across hex and RGB codes, but HSL, while more legible, may not be on your radar yet. Each way of writing colors can make sense in different situations, and all you need is a basic understanding of each type to make a decision. Here I will explain the difference between RGB, HEX and HSL.
What is RGB (Red, Green, Blue)?
It makes sense to start with the RGB values, since Red, Green, and Blue are the three colors that the screen can use to produce almost any other color. This is done using “additive color mixing,” but you don’t need to study that science to understand RGB.
rgb(255, 0, 0) is red, because R is maximized. If you set G or B to 255, you will get full green or full blue. Set them all to 255 at once and you will get white (sum of all colors), while zeroing them makes it black. If you add a fourth value (alpha channel, between 0 to 1) you can also get transparency: rgba(0, 0, 0, .5) translates to half transparent black.
Simple, yes, but not really that intuitive. The RGB balance can change quite a bit even if you only change the color shading, making it very difficult for humans to make manual adjustments without some sort of RGB generator.
What is the Hexadecimal color code?
Hex is 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 color system, the letter “af” represents the numbers ten to fifteen. Second, Hexadecimal means everything in base 16.21 is 2 * 10 + 1 in base 10, but in Hexadecimal it becomes 2 * 16 + 1. Just multiply the first number by 16 and add the second number – it’s that easy! 6a = 6 * 16 + 10or 106. 79 = 7 * 16 + 9or 121.
While the math is fun, it definitely makes Hexadecimal codes even more annoying to someone than RGB, even though they’re easy to copy-paste and can have impressive letter/number combinations.
You can also add transparency to the hex code by placing a value equivalent to some percentage of 255 at the beginning, like: #806a79f7. 80 in Hexadecimal = 126, which is close to 50% of the maximum value of 255.
What is HSL (Hue, Saturation, Lightness)
HSL is pretty much designed for human readability, and it’s growing in popularity, especially as an RGB alternative. It works like this:
Hue means color, and it uses the degrees of the color wheel to tell you what color you are wearing. If you know the color wheel and the positions of these main colors, you should be able to tell that 45 will look orange and 270 will look purple just by thinking about it for a second.
- 0 = red
- 60 = yellow
- 120 = green
- 180 = cyan
- 240 = blue
- 300 = magenta
Saturation is basically how colorful a color is. 0% saturation means the color will be gray, while 100% means it will show full strength. If you want to mute your color or make it a little more pop, you can change this value.
Lightness tells you how dark or bright the color is. 0% lightness means your color will be black, regardless of the Hue or Saturation setting, and 100% lightness makes your color white. As you might have guessed, 50% gives you the most accurate colors.
With that information, you should be able to immediately know what hsl(0, 100%, 50%) means. It’s red! Want a darker, richer red? Try 0, 70%, 40%. Maybe you want one, but in blue? Just change 0 to 240. This HSL has a transparency color, too – the same as RGB: just adds a fourth value (between 0 and 1), like: hsla(240, 70%, 40%, .5).
HSV/HSB and HSI
What are HSV/HSB and HSI? More color models? For most people who work with color on a computer, this is over. Hex, RGB, and HSL are by far the most common ways of telling colors. If you’re in a field that involves a lot of image and color, such as graphic design or machine learning on images, you can meet people using one of these more esoteric color 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 how they define saturation. HSI (Hue Saturation Intensity) has some minor differences from HSB/HSV, but it’s not widely used, so chances are you won’t see it very often.
What color model should I use?
In general, hex codes make copy-pasting easy and great in situations where we probably won’t be much involved. RGB/RGBA is worth reading and is best used when we sometimes need color transparency. If we need to change the color manually, use HSL/HSLA.
