Color Models Explained: HEX, RGB and HSL

Every color you see on a screen is described by a code, and there are several ways to write those codes: HEX, RGB and HSL. If you've ever wondered what #2563eb actually means or why designers prefer HSL for tweaking colors, this guide clears it up. The three systems describe the same colors in different, complementary ways.

Screens mix light, not paint

Start with the key idea: screens create color by mixing light, not pigment. Each pixel has a tiny red, green and blue light. Turn all three off and you get black; turn all three to full and you get white. Every other color is some combination in between. This is why the systems below all revolve around red, green and blue.

RGB: mixing red, green and blue

RGB is the most direct description: it states how much red, green and blue to mix, each on a scale from 0 to 255. rgb(255, 0, 0) is pure red; rgb(0, 0, 0) is black; rgb(255, 255, 255) is white. It maps exactly to how the screen works, which makes it intuitive once you think in terms of light. The downside is that it's not obvious how to make a color "a bit lighter" or "a bit less saturated" just by nudging the numbers.

HEX: the same thing, written compactly

HEX codes are just RGB in a shorter form. The # is followed by six characters in pairs — two for red, two for green, two for blue — written in hexadecimal (base 16, using 0–9 and A–F). So #FF0000 is the same pure red as rgb(255, 0, 0): "FF" equals 255. HEX is popular in web design because it's compact and easy to paste around. It's identical information to RGB, just encoded differently.

HSL: how designers actually think

HSL describes color the way humans tend to reason about it, using three more intuitive dials:

• Hue — the color itself, as an angle from 0 to 360 around a color wheel (0 is red, 120 is green, 240 is blue).
• Saturation — how vivid it is, from 0% (grey) to 100% (fully colorful).
• Lightness — how bright it is, from 0% (black) to 100% (white).

HSL's superpower is easy adjustment. Want a darker version of a color? Lower the lightness. A more muted version? Lower the saturation. A related color for a palette? Shift the hue. Doing the same edits in RGB or HEX means recalculating all three channels at once, which is far less intuitive.

Which should you use?

Use HEX or RGB to record and share exact colors — they're the standard on the web. Use HSL when you're designing and want to create variations, harmonious palettes or hover states, because adjusting one dial does what you expect. The good news is that they're fully interchangeable: any color has an equivalent in all three systems.

Converting and building palettes

You'll often have a color in one format and need it in another — a HEX from a brand guide, an RGB for some code, an HSL to tweak. Our color converter translates instantly between HEX, RGB and HSL, and the color palette generator builds harmonious sets of colors from any starting point. Both run in your browser.

Key takeaways

• Screens make color by mixing red, green and blue light.
• RGB states the amounts directly; HEX is the same thing written compactly in base 16.
• HSL (hue, saturation, lightness) matches how people think and is best for adjusting colors.
• All three are interchangeable — every color exists in each system.