When it comes to splashing color on the screen, there are a few ways to do it with coding. Hex, RGBA, and HSLA are three of the most commonly used color code systems.
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 colors 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.
Tip: Here’s how you can control RGB lighting on Linux.
What Is RGB (Red, Green, Blue)
It makes sense to start with RGB values, since Red, Green, and Blue are the three colors that screens can use to produce pretty much every other color. It does this using “additive color 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 colors), 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 color, 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 color 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 the red, 79 is the green, and f7 is the blue.
First, you should know that in the hex color 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 color, and it uses the degrees of the color wheel to tell you what color you’re on. 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 essentially how colorful the color is. 0% saturation means the color will just be a shade of gray, while 100% means it will show up full strength. If you want to mute your color or make it pop a little more, you can just 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 settings, and 100% lightness will get you white. As you might have guessed, 50% gives you the most accurate color.
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 color models? When does it end? For most people who work with colors on computers, it’s already over. Hex, RGB, and HSL are by far the most common ways to notate colors. If you’re in a field involving lots of images and colors, though, like graphic design or machine learning on images, you may run across 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 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 color model should I use?
Generally, choosing a color 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 color, 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.
Image credits: HSL Color Solid Cylinder Saturation Gray, Additive Color, XTerm Color Chart, HSL and HSV, Munsell 1943
Our latest tutorials delivered straight to your inbox
