HEX vs RGB vs HSL: Color Codes Explained

HEX, RGB and HSL are three ways of writing the same colors. #6366F1, rgb(99, 102, 241) and hsl(239, 84%, 67%) all describe one indigo. HEX and RGB both describe a color as amounts of red, green and blue light; HSL describes it as a hue, a saturation and a lightness, which is closer to how people think about color.

None of them is better than the others. Browsers understand all three, and each one is easier for a different job. This guide explains how each format works, when to reach for which, and how to convert between them.

RGB: red, green and blue light

Screens make every color by mixing red, green and blue light. RGB writes a color as those three amounts, each from 0 (none) to 255 (full). rgb(255, 0, 0) is pure red, rgb(0, 0, 0) is black because every light is off, and rgb(255, 255, 255) is white because every light is fully on.

• rgb(255, 0, 0) is red, rgb(0, 255, 0) is green and rgb(0, 0, 255) is blue.
• Equal amounts make a gray: rgb(128, 128, 128) is a middle gray.
• rgb(255, 128, 0) is orange: full red, half green, no blue.

The 0 to 255 range comes from 8 bits per channel. Three channels with 256 steps each give about 16.7 million colors, the standard sRGB colors that every screen can show.

HEX: RGB written in base 16

A HEX code is RGB in a shorter form. It's a # followed by six characters, two each for red, green and blue. Each pair is a number from 00 to FF in hexadecimal (base 16), where the digits run 0 to 9 and then A to F. 00 is 0 and FF is 255, the same range as RGB.

Take #6366F1. The red pair, 63, is 6 × 16 + 3 = 99. The green pair, 66, is 6 × 16 + 6 = 102. The blue pair, F1, is 15 × 16 + 1 = 241. So #6366F1 is exactly rgb(99, 102, 241). Letter case doesn't matter: #6366f1 is the same color.

• #FF0000 is red, #000000 is black and #FFFFFF is white.
• Three-digit shorthand doubles each digit: #369 means #336699, and #FFF means #FFFFFF.
• Shorthand only works when each pair is a repeated digit, so #6366F1 has no short form.

HEX is compact and easy to copy, which is why design tools, brand guidelines and palettes use it more than any other format.

HSL: hue, saturation and lightness

HSL describes a color the way you might describe it out loud: which color it is, how strong it is, and how light or dark it is.

• Hue is the position on the color wheel, in degrees from 0 to 360: 0 is red, 120 is green, 240 is blue, and 360 comes back round to red.
• Saturation is how vivid the color is, from 0% (gray) to 100% (full color).
• Lightness runs from 0% (black) through 50% (the pure color) to 100% (white).

The big advantage of HSL is that you can change one property without touching the others. Keep the hue and saturation, change only the lightness, and you get lighter and darker versions of the same color, which is exactly what you need for hover states, borders and backgrounds.

When to use which

• HEX: for sharing and storing colors, such as brand guidelines, design files, palettes and quick copy and paste. It's the most widely recognized format.
• RGB: when you work with code that handles channels as numbers, such as canvas drawing, image processing or JavaScript, and when you need transparency with older syntax.
• HSL: when you adjust colors by hand or build a color system, such as making a lighter background or a darker hover state from one brand color.

Many teams store their colors in HEX and reach for HSL while designing the variations. Because all three describe the same colors, you can mix them in one stylesheet without any difference on screen.

How to convert between them

HEX and RGB convert exactly, in both directions, because they hold the same three numbers.

1. HEX to RGB: split the code into three pairs and convert each from base 16. For each pair, multiply the first digit by 16 and add the second, counting A as 10 up to F as 15.
2. RGB to HEX: divide each channel by 16. The whole number is the first digit and the remainder the second. 99 ÷ 16 is 6 remainder 3, so 99 becomes 63.
3. To or from HSL: the math involves finding the largest and smallest channel and working out the hue angle, so it's rarely done by hand. Use a converter.

The Color Converter does all of this for you. Paste a color in any format, such as a HEX code, an rgb() or hsl() value or even a whole line of CSS, and it shows the same color in HEX, RGB, HSL, HSV, CMYK and OKLCH, ready to copy.

Adding transparency: alpha

Each format can also carry an alpha value, which sets how opaque the color is. An alpha of 1 (or 100%) is fully solid, and 0 is fully transparent.

• RGB: rgb(99 102 241 / 50%), or the older rgba(99, 102, 241, 0.5).
• HSL: hsl(239 84% 67% / 50%), or the older hsla(239, 84%, 67%, 0.5).
• HEX: add a fourth pair for alpha, so #6366F180 is the indigo at about 50%. 80 in hexadecimal is 128, which is 128 out of 255.

The space-separated syntax with a slash is the modern way to write rgb() and hsl(), and every current browser supports it. rgba() and hsla() still work too, and today they are simply other names for rgb() and hsl().

A limit of HSL: lightness isn't brightness

HSL lightness is a calculation, not a measure of how light a color looks. Pure yellow, hsl(60, 100%, 50%), and pure blue, hsl(240, 100%, 50%), have the same 50% lightness, yet yellow looks far brighter. Against white, yellow has a contrast ratio of only 1.07:1, while blue has 8.59:1.

So two colors with the same HSL lightness can need different text colors, and you should always check contrast instead of trusting the lightness number. Newer CSS formats such as OKLCH are designed so that equal lightness looks equally light, which makes them popular for large color systems.

Common mistakes

• Forgetting the # in CSS. color: 6366F1 is invalid and is ignored; it must be #6366F1.
• Using a HEX code with the wrong number of digits. Only 3, 4, 6 or 8 digits are valid.
• Treating an HSL round trip as exact and slowly drifting away from a brand color.
• Fading a whole element with opacity when only its background should be see-through.
• Assuming two colors with the same HSL lightness have the same contrast with text.

Quick reference

• HEX: #RRGGBB, each pair 00 to FF. Example: #6366F1.
• RGB: rgb(red, green, blue), each 0 to 255. Example: rgb(99, 102, 241).
• HSL: hsl(hue, saturation, lightness), hue 0 to 360, the others 0% to 100%. Example: hsl(239, 84%, 67%).
• Alpha: #RRGGBBAA, or a slash and a value after the channels, such as rgb(99 102 241 / 50%).

Whichever format you choose, the color on screen is the same. Pick the one that makes the job in front of you easiest, and convert whenever you need another.