HEX, RGB and HSL: Understanding Color Codes

RGB: the literal mix

RGB describes a colour as amounts of red, green and blue, each from 0 to 255. rgb(79, 70, 229) is a fair amount of blue, a little less red and green — an indigo. It maps directly to how a screen actually emits light, which makes it the most literal of the three.

HEX: the same mix, compact

A hex code is just RGB written in hexadecimal: #RRGGBB, two hex digits per channel. #4F46E5 is exactly rgb(79, 70, 229) — 4F is 79, 46 is 70, E5 is 229. Hex is popular in code and design tools because it is short and unambiguous, and a shorthand like #FFF expands to #FFFFFF.

HSL: the human-friendly one

HSL describes a colour by hue (an angle around the colour wheel, 0-360), saturation (how vivid, 0-100%) and lightness (0-100%). It matches how people think — "a slightly less saturated version of this blue" is a small tweak in HSL but an awkward one in RGB. That makes HSL great for generating tints, shades and colour schemes.

When to use each

Reach for hex when copying a fixed brand colour into code, RGB when you need transparency via rgba() or are working close to the pixels, and HSL when you want to adjust or generate related colours by feel. They are interchangeable — the Color Converter here turns any one into the others instantly.

Frequently asked questions

Is hex better than RGB? No — they describe the same colour; hex is just more compact, RGB is more readable and supports alpha via rgba().

What does the fourth value in rgba() do? Alpha — opacity from 0 (transparent) to 1 (solid).

Why does HSL make theming easier? Because changing lightness or saturation alone keeps the same hue, which is exactly how tints and shades are built.