HEX, RGB, HSL: The Difference Between Color Codes

The logic behind writing the same color three different ways.

Summary

HEX is the short notation you'll see most often in design files and CSS. RGB describes a color by its red-green-blue ratios and is usually preferred when adding transparency. HSL describes a color by hue, saturation, and lightness, making it the most intuitive for adjusting a color by hand.

Step by step

Enter the color code you got from a design (HEX, RGB, or HSL) into a conversion tool.
Prefer RGB or HSL in CSS when you need transparency, and HEX when you don't.
When you want a color slightly lighter or darker, adjust the lightness value in HSL.
Keep your brand colors noted in all three formats so they stay consistent across different tools.

Why it matters

A brand color shows up in design files, on the website, in slide decks and in social media graphics. Each tool may want it in a different format. Convert by hand or by eye and small drifts creep in, until "our blue" looks slightly different everywhere. Understanding the logic of each format helps you convert accurately and pick whichever one makes the job easier.

A few lesser-known details

HEX can be written in a three-digit shorthand. #F60 is the same as #FF6600, with each digit doubled.
Modern browsers support eight-digit HEX. The last two digits set transparency, so you don't have to switch to RGB just for that.
In HSL, the same lightness value is not perceived the same across hues. A yellow at 50% lightness looks far brighter than a blue at 50%.
All three formats describe screen color. Printers usually work in CMYK, and not every screen color can be reproduced exactly on paper.

Common mistakes

Picking a color from a screenshot with an eyedropper. Image compression and display settings can shift the value a little. The design file should be the source.
Choosing text and background colors only because they look nice together. They need enough contrast to read, and accessibility guidelines recommend at least 4.5:1 for normal text.
Darkening a color by subtracting the same amount from each RGB channel. That can shift the hue too. Lowering lightness in HSL gives a more consistent result.
Assuming a color will look identical on every monitor.

An example

You have your brand color as a HEX code for the main button on your site, and you want the button to darken slightly on hover. You run the code through a converter to get its HSL value, leave hue and saturation alone, and drop lightness by a few points. For the disabled state you write a semi-transparent version of the same color as eight-digit HEX or RGBA. Finally you check that the white button label has enough contrast in all three states.

When to bring in a professional

For packaging, signage or printed corporate material where color accuracy matters, don't start from screen codes alone. Work with your printer or graphic designer from a color swatch book or a printed proof.