Color Codes Explained — HEX vs RGB vs HSL and How to Convert

When specifying colors on the web or in design, you often see three notations: HEX like #3366cc, RGB like rgb(51,102,204), and HSL like hsl(220,60%,50%). All of these are simply the same color written in a different way. In this article we explain how each works, when to use it, and the steps to convert between them, with a verified example throughout.

1. The digital representation of color (RGB basics)

Colors on a display are made by mixing red (R), green (G) and blue (B) light. The more light you mix, the brighter it gets, and turning all three to maximum produces white. This is called additive color mixing (the opposite of the subtractive mixing of paint).

The strength of each channel is usually expressed in 8 bits = 256 steps from 0 to 255. With three channels, the number of expressible colors is 256 × 256 × 256 ≈ 16.77 million. For example, R=51, G=102, B=204 is a blue-ish color made by mixing a little red, a medium amount of green, and a strong amount of blue.

• (0, 0, 0) = black (everything off)
• (255, 255, 255) = white (everything at maximum)
• (255, 0, 0) = red / (0, 255, 0) = green / (0, 0, 255) = blue

2. HEX (hexadecimal color codes)

HEX writes each RGB value as two hexadecimal digits, prefixed with #. The form is #rrggbb, where rr is red, gg is green and bb is blue. In hexadecimal, 0–255 corresponds to 00–ff.

The 3-digit shorthand (#rgb)

When each channel's two digits are an identical repeated pair (such as 33, 66, cc), you can use the 3-digit form with each pair collapsed to a single character. #36c means the same as #3366cc (each digit doubled). However, a color like #1a2b3c, which is not a repeated pair, cannot be shortened.

With alpha (#rrggbbaa / #rgba)

Adding one more channel at the end expresses opacity (alpha). In #rrggbbaa, aa ranges from 00 (fully transparent) to ff (fully opaque). For example, #3366cc80 is #3366cc at roughly 50% opacity (80 is 128 in decimal, about 50% of 255). The 4-digit shorthand #36c8 works the same way.

3. RGB / RGBA

In CSS, the rgb() function writes the same color in decimal: rgb(51, 102, 204). To add transparency, use rgba(), or the modern syntax rgb(51 102 204 / 50%), where the final value sets the opacity.

Each channel can be written as an integer from 0 to 255, or as a relative value (percentage) from 0% to 100%. rgb(20%, 40%, 80%) works out to 20% × 255 ≈ 51, 40% × 255 ≈ 102 and 80% × 255 = 204, giving essentially the same color as rgb(51, 102, 204). Because the numbers map directly to the RGB channels, this notation is convenient when computing colors in code.

4. HSL / HSLA

HSL expresses a color through three components: hue, saturation and lightness. You write it like hsl(220, 60%, 50%).

• Hue (H): the color itself, on a circle from 0 to 360 degrees (0 = red, 120 = green, 240 = blue, and back to red at 360).
• Saturation (S): the vividness, from 0% to 100% (0% = gray, 100% = most vivid).
• Lightness (L): the brightness, from 0% to 100% (0% = black, 50% = the pure color, 100% = white).

The reason HSL is favored is that it is closer to human perception and easier to adjust. If you want to "make it a bit brighter while keeping the hue", raise L; if you want to "mute it", lower S. In other words, you get the adjustment you want by moving just one axis. Doing the same thing in RGB/HEX requires changing all three values at once, which is not intuitive. The hsla() function and the hsl(220 60% 50% / 50%) syntax are available for transparency.

5. Conversion procedures

RGB → HEX

Simply convert each channel to two hexadecimal digits and line them up, padding with a leading 0 if a value is a single digit.

• 51 → 33 (51 = 3×16 + 3)
• 102 → 66 (102 = 6×16 + 6)
• 204 → cc (204 = 12×16 + 12, and 12 = c)

Lining them up gives #3366cc.

HEX → RGB

Conversely, take two digits at a time and convert back to decimal. cc is 12×16 + 12 = 204. For a 3-digit HEX, double each digit before converting (#36c → #3366cc).

RGB → HSL

The standard algorithm follows these steps. We compute it for #3366cc = rgb(51, 102, 204).

1. Divide each value by 255 to get the range 0–1: R=0.2, G=0.4, B=0.8.
2. Find the maximum max=0.8, the minimum min=0.2, and the difference d=0.6.
3. Lightness L = (max + min) / 2 = (0.8 + 0.2) / 2 = 0.5 → 50%.
4. Saturation S = d / (1 − |2L − 1|) = 0.6 / 1 = 0.6 → 60% (when L=0.5 the denominator is 1).
5. Hue H: since the maximum is B, H = 60 × ((R − G) / d + 4) = 60 × ((0.2 − 0.4) / 0.6 + 4) = 60 × 3.667 ≈ 220 degrees.

The result is hsl(220, 60%, 50%), matching the original color. (For the hue formula: if the max is R use ((G−B)/d) mod 6, if G use (B−R)/d + 2, if B use (R−G)/d + 4, then multiply by 60.)

HSL → RGB

The reverse conversion is also defined. From lightness and saturation, compute the chroma C = (1 − |2L − 1|) × S, split the hue into 60-degree segments to assign R, G and B, then add (L − C/2) to every channel. Converting hsl(220, 60%, 50%) back gives rgb(51, 102, 204). Since the manual calculation is tedious, in practice the most reliable approach is a one-shot conversion with the tool below.

6. Contrast and accessibility

When choosing colors, what matters is not only how they look but also the contrast between text and background. Low contrast makes text hard to read for people with low vision or in bright outdoor light.

The web accessibility guidelines WCAG (Web Content Accessibility Guidelines) recommend a contrast ratio of at least 4.5:1 for normal text and at least 3:1 for large text. The contrast ratio is calculated from the relative luminance of the text and background colors. Being mindful of lightness (L) in HSL makes it easier to control the light/dark difference, and as a result, easier to tune contrast. Once you have settled on a palette, checking the contrast ratio as well will give you peace of mind.