Hex, RGB and HSL Explained: A Guide to Color Codes

Updated June 28, 2026 · 5 min read

If you have ever copied a value like #3B82F6 and wondered what it really means, this guide breaks down the three color formats you will meet most often on the web — and how to move between them.

Why color codes exist

Screens build color out of light, so a digital color is really a set of instructions for how much of each primary light to emit. A color code is just a compact, unambiguous way to write those instructions down so a browser, design tool, or person can reproduce the exact same color every time.

RGB

RGB describes a color by its red, green and blue components, each on a scale from 0 to 255. It is an additive model: start from black (all zeros) and add light. So rgb(255, 0, 0) is pure red, rgb(255, 255, 255) is white, and rgb(59, 130, 246) is a friendly blue. The more of each channel you add, the brighter and lighter the result.

Hexadecimal

A hex code is the same RGB information written in base-16. A six-digit hex like #3B82F6 is just three pairs — 3B, 82, F6 — one for red, green and blue. Each pair converts to a number from 0 to 255, so 3B is 59, 82 is 130 and F6 is 246. That is the identical color as rgb(59, 130, 246), just more compact.

Hex is popular because it is short and copy-pastes cleanly. You will also see shorthand three-digit hex such as #39F, where each digit is doubled (#3399FF). Hex is case-insensitive, so #3b82f6 and #3B82F6 are the same.

HSL

HSL takes a different, more human approach, describing a color by hue, saturation and lightness:

• Hue is an angle from 0 to 360 around the color wheel (0 is red, 120 is green, 240 is blue).
• Saturation is a percentage, from grey at 0% to fully vivid at 100%.
• Lightness is a percentage, from black at 0%, through the pure color at 50%, to white at 100%.

So hsl(217, 91%, 60%) is the same blue as before. The advantage is intuition: to make a color a little darker you lower the lightness; to mute it you lower the saturation; to shift it toward green you nudge the hue. The relationships you want to change map directly onto the numbers.

Converting between them

Hex and RGB are two notations for the exact same thing, so converting between them is just base-16 arithmetic. HSL describes the same final color through different axes, so converting to or from HSL involves a bit more math — but any color tool will do it instantly, showing all three side by side.

Which should you use?

There is no single right answer; each format shines in context:

• Hex — great for handing a fixed brand color to developers and pasting into CSS.
• RGB — handy when you need transparency via rgba(), or when working with pixel data.
• HSL — best when you are actively adjusting a color or generating tints, shades and harmonies, because the numbers mean something.

The practical move is to design in HSL when you are exploring, then export the final color as hex for your stylesheet.