Understanding Color Models: HEX, RGB, and HSL
A look at how colors are represented in digital design.
On the web and in digital design, colors are described with numbers, and there are a few common ways to do it: RGB, hexadecimal color codes, and HSL. They're really just three different vocabularies for the same set of colors. Here we'll look at each one and how they line up with each other. There's a color conversion tool on this site if you'd like to translate a color between them as you read.
The RGB model
RGB describes a color by how much red, green, and blue light it mixes together, with each of the three usually running from 0 to 255. Blend those three in different amounts and you can reach an enormous range of colors. Max out all three equally and you get white; drop them all to zero and you get black. It mirrors the way a screen actually makes color — by emitting light rather than absorbing it.
Hexadecimal color codes
A hex color code is just a compact way of writing an RGB color. It starts with a hash and then six hexadecimal digits, split into three pairs for red, green, and blue. Each pair runs from 00 to FF, which is the same as 0 to 255 in everyday numbers. Pure red, for example, puts the red pair at its maximum and the other two at zero. Hex shows up all over web design mostly because it's so short to write.
The HSL model
HSL takes a different angle, describing a color by hue, saturation, and lightness. Hue is the type of color, given as a position on a color wheel in degrees. Saturation is how intense it is, running as a percentage from gray to fully vivid. Lightness is how light or dark it is, from black through the color to white, also as a percentage. A lot of people find HSL the most intuitive of the three for tweaking colors, because nudging one value does something you can predict.
How the models relate
RGB, hex, and HSL all point at the same colors, so any color in one can be expressed in the others. Hex and RGB are basically the same thing in different clothing, so moving between them is direct. RGB and HSL take a bit of calculation to convert, since they organize color along different lines. A conversion tool just handles that math for you, so you can work in whichever model fits the task at hand.
Summary
RGB, hexadecimal, and HSL are the common ways to represent color in digital design. RGB goes by red, green, and blue components, hex is a compact form of RGB, and HSL goes by hue, saturation, and lightness. All three name the same colors, and you can convert freely from one to another.