HEX, RGB & HSL Explained: A Practical Guide to Web Color Codes

If you have ever poked at a website's styling, you have met color codes: cryptic strings like #4F46E5, rgb(79, 70, 229), or hsl(243, 75%, 59%). The confusing part is that all three of those describe the exact same shade of indigo — they are just three different ways of writing one color. Understanding what each format actually encodes makes picking, tweaking, and converting colors far less mysterious.

Screens build every color from three colored lights: red, green, and blue (RGB). Mix them at different intensities and you get the roughly 16.7 million colors a standard display can show. Every color format is ultimately just a way of specifying "how much red, how much green, how much blue" — they differ only in notation and in how intuitive they are for humans to adjust.

A HEX code is six hexadecimal digits, usually written with a leading hash, like #4F46E5. The digits come in three pairs: the first pair is the red value, the second green, the third blue — each ranging from 00 (none) to FF (maximum), which is 0 to 255 in everyday decimal. So #FF0000 is pure red, #000000 is black, and #FFFFFF is white.

HEX is compact and universally supported, which is why it is the format you see most in design tools and CSS. There is also a three-digit shorthand (#ABC expands to #AABBCC) and an eight-digit form that adds transparency. The downside: HEX is hard to adjust by eye. Looking at #4F46E5, it is not obvious how to make it "a bit lighter" without a tool.

RGB writes the same three numbers in plain decimal: rgb(79, 70, 229). It is functionally identical to HEX — just easier to read as actual values. RGBA adds a fourth number, the alpha channel, controlling opacity from 0 (fully transparent) to 1 (fully opaque): rgba(79, 70, 229, 0.5) is that indigo at 50% transparency.

RGB is handy when you are working programmatically — for example, generating colors in code or interpolating between two of them — because you can do arithmetic on the channels directly.

HSL describes a color as Hue, Saturation, and Lightness: hsl(243, 75%, 59%). Hue is an angle from 0 to 360 degrees around a color wheel (0 is red, 120 is green, 240 is blue). Saturation is how vivid the color is, from 0% (grey) to 100% (full intensity). Lightness runs from 0% (black) through the pure color at 50% to 100% (white).

The reason designers love HSL is that it maps to how we actually reason about color. Want a darker version of a button for its hover state? Drop the lightness a few percent and leave hue and saturation alone. Want a muted, pastel variant? Lower the saturation. Building a palette of related colors? Keep the hue fixed and vary saturation and lightness. None of that is intuitive in HEX or RGB.

Use HEX for storing and sharing fixed brand colors — it is compact and what most tools expect. Use RGB or RGBA when you need transparency or when manipulating colors in code. Use HSL when you are designing and want to create tints, shades, and harmonious palettes by hand. The good news is that converting between them loses nothing — they all describe the same underlying color.

If you need to move a value from one format to another, QTNest's Color Converter keeps HEX, RGB, and HSL in sync as you edit any of them, with a live preview swatch and one-click copy — so you can design in HSL and export the HEX your stylesheet needs.