What Are HEX and RGB Color Codes? Read and Convert Them

If you do any design or web work, you've seen codes like #FF5733 or rgb(255, 87, 51) and maybe wondered what they actually mean. They're just different ways of writing the same thing — a color. Here's how to read and convert them.

RGB: mixing light

Screens make color by mixing red, green and blue light. RGB describes a color with three numbers, each from 0 to 255, for how much of each:

rgb(255, 87, 51)   →   lots of red, some green, a little blue   →   orange-red

• rgb(0, 0, 0) is black (no light), rgb(255, 255, 255) is white (full light).
• It's intuitive: turn a channel up or down and you can predict the shift.

HEX: the same thing, compact

HEX is the same RGB color written in hexadecimal: a # plus six digits, in three pairs for R, G and B, each from 00 (none) to FF (full):

#FF5733   →   FF=full red, 57=medium green, 33=little blue   →   the same orange-red

So #FF5733 and rgb(255, 87, 51) are identical colors. HEX is compact and easy to copy, which is why CSS and design files use it most.

Converting by hand means turning each pair of hex digits into decimal — doable but fiddly. The fast way is our color converter: paste any format and get the others instantly with a preview.

HSL: how humans think about color

HSL describes a color by Hue (which color), Saturation (how vivid) and Lightness (how bright):

hsl(11, 100%, 60%)   →   roughly that same orange-red

HSL shines when you want to adjust a color — make it lighter, more muted, or shift the hue — because those map to single sliders. Building a palette of shades within one hue? HSL is far more intuitive than nudging three RGB numbers. It converts to and from HEX and RGB just the same.

Which should you use?

• HEX — pasting into CSS or design tools (compact, standard).
• RGB — when you want an intuitive read, or need transparency via rgba().
• HSL — when adjusting brightness/saturation or building shade variations.

You're never locked in — convert between them as needed.

Don't forget contrast

A code only tells you the color, not whether it's usable. Text and background need enough contrast or they vanish on a phone or in sunlight. After picking colors, check contrast and readability before shipping them to a UI or print. For making graphics afterwards, see our social image size guide.

The bottom line

HEX, RGB and HSL are three notations for the same colors: RGB mixes light in decimals, HEX is the compact hexadecimal version, and HSL matches how people intuitively adjust color. Use whichever fits the task, mind your contrast, and let the color converter handle the math when you need to switch between them.