HEX, RGB and HSL Colours: How They Relate

A colour on a screen can be written in several ways, and a web designer meets three of them every day: HEX, RGB and HSL. They describe the same thing in different words. This guide explains how each one works, how to convert between them by hand, and how to check whether a text colour has enough contrast to be read comfortably.

RGB: three amounts of light

Screens make colours by mixing red, green and blue light. RGB writes the amount of each as a number from 0 to 255. rgb(255, 0, 0) is full red with no green or blue. rgb(0, 0, 0) is black, because there is no light, and rgb(255, 255, 255) is white. The modern CSS form leaves out the commas, as in rgb(26 115 232), and also accepts percentages, with 100% meaning 255.

HEX: the same numbers in base 16

A hex code is RGB with each number written in base 16, two digits per channel. The channel value 26 is 1a, 115 is 73 and 232 is e8, so rgb(26, 115, 232) is #1a73e8. The digits run from 0 to 9 and then a to f, so the largest channel value, 255, is ff. A three-digit code is shorthand that doubles each digit, so #f09 means #ff0099. Four- and eight-digit codes add a final pair for transparency, where 00 is fully transparent and ff is fully opaque.

Because HEX and RGB hold exactly the same information, converting between them never loses anything. Letter case does not matter in a hex code, so #1A73E8 and #1a73e8 are the same colour.

HSL: hue, saturation and lightness

HSL describes the same colours in a way that fits how people talk about them. Hue is an angle around the colour wheel from 0 to 360 degrees: red is at 0, green at 120 and blue at 240, and the angle wraps around, so 360 is red again. Saturation is how vivid the colour is, from grey at 0 percent to the purest colour at 100. Lightness runs from black at 0 percent through the pure colour at 50 to white at 100.

The same blue is hsl(214, 82%, 51%). To make a darker button for a hover state, you only lower the lightness, to perhaps 42 percent, and keep the hue the same. Doing the same in RGB means changing all three numbers. This is the main reason designers like HSL. It is a transformation of RGB, not a different colour system, and its values depend on the screen's primaries, so the same numbers can look slightly different on different devices. It is also not perceptually even: two colours with the same lightness number do not always look equally light.

Converting by hand

To convert RGB to HSL, divide each channel by 255, then find the largest and smallest of the three. Lightness is the average of those two. If they are equal the colour is grey and the hue is 0. Otherwise saturation depends on the gap between them, and the hue depends on which channel is the largest. For rgb(26, 115, 232) the blue channel is largest, the gap is 206 out of 255, and the result is a hue of about 214 degrees, saturation of 82 percent and lightness of 51 percent. The converter on this site does this for you and rounds to whole numbers.

Checking contrast for text

Colours also have to be readable. The Web Content Accessibility Guidelines (WCAG) measure this with a contrast ratio between 1:1, for identical colours, and 21:1, for black on white. For level AA, normal text needs a ratio of at least 4.5:1, and large text, which is 18 point or larger or 14 point bold, needs 3:1. The stricter AAA level asks for 7:1 for normal text and 4.5:1 for large text.

The ratio is worked out from relative luminance, which is 0.2126 times the red, 0.7152 times the green and 0.0722 times the blue, after each channel is converted from its screen value to a linear one. The ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. Green has the largest weight because the eye is most sensitive to it. The grey #767676 on white scores about 4.54:1, the lightest plain grey that passes AA for normal text.

Practical tips

• Use HEX when copying a colour between design tools, because it is short and exact.
• Use HSL when you want to make lighter, darker or more muted versions of a colour.
• Check contrast for every text and background pair, not only the main ones.
• Do not rely on colour alone to carry meaning, such as red for an error with no text or icon.
• Remember that partly transparent colours depend on what is behind them, so their contrast changes with the background.

Sources

• Web Content Accessibility Guidelines (WCAG) 2.2 (W3C)
• CSS color values (MDN Web Docs)
• HSL and HSV (Wikipedia)