HEX vs RGB vs HSL: Color Codes Explained

What is a HEX color code?

HEX is short for hexadecimal, the base-16 number system that uses the digits 0–9 and the letters A–F. A HEX color is written as a hash sign followed by six digits: #RRGGBB. The first pair is red, the second is green, the third is blue, and each pair runs from 00 (0) to FF (255). So #FF5733 means red = FF = 255, green = 57 = 87, blue = 33 = 51 — the same orange-red as above.

With 256 possible values per channel, HEX covers 256 × 256 × 256 = 16,777,216 colors, which is more than the human eye can tell apart. Two shorthand forms exist: #RGB, where each digit is doubled (#F53 becomes #FF5533), and #RRGGBBAA, where a fourth pair sets the opacity — #FF573380 is the same color at roughly 50% transparency, since 0x80 is 128 out of 255.

HEX is the default in design tools, brand guidelines and CSS snippets, because it is short and easy to copy. Its weakness is readability: you cannot tell that #7A5C3E is brown just by looking at the digits. When a HEX value means nothing to you, paste it into a color converter and see the swatch and the equivalent RGB and HSL values side by side.

What is RGB?

RGB writes the same three channels as decimal numbers: rgb(255, 87, 51). Each channel runs from 0 to 255, matching the 8 bits of data a screen uses for each color. The model is additive, because screens emit light: rgb(0, 0, 0) is black, no light at all, and rgb(255, 255, 255) is white, all three channels at full power. Equal values give a shade of gray — rgb(128, 128, 128) is mid-gray.

RGB also accepts percentages: rgb(100%, 34%, 20%) is the same color, since 87 ÷ 255 = 34.1% and 51 ÷ 255 = 20%. For transparency, add a fourth value: rgba(255, 87, 51, 0.5), or the modern form rgb(255 87 51 / 50%). RGB is the format closest to the hardware, which is why image editors and canvas code use it, and why it is the natural choice when you need exact channel values or an alpha channel in code.

What is HSL?

HSL describes a color the way people think about it: hue, saturation and lightness. Hue is an angle on the color wheel, from 0° to 360° — 0° is red, 120° is green, 240° is blue. Saturation is a percentage: 0% is completely gray, 100% is the full color. Lightness is also a percentage: 0% is black, 50% is the pure color, 100% is white. Our orange-red is hsl(11, 100%, 60%) — a hue just past red, fully saturated, slightly lighter than the pure color.

HSL shines when you adjust colors. To make a darker hover state, keep the hue and saturation and drop the lightness by 10: hsl(11, 100%, 50%). To mute a color, drop the saturation instead of hunting for new channel values. Try the same change in RGB and you have to recalculate all three numbers by hand. HSL also supports alpha, as hsla(11, 100%, 60%, 0.5). Its drawback is familiarity: most design files hand you HEX or RGB, so you will usually convert into HSL rather than start there.

HEX vs RGB vs HSL: how do they compare?

All three describe the same 16.7 million colors, so the choice is about workflow, not about what colors you can make. The table sums up the practical differences.

No browser renders one format better than another — they all convert to the same RGB values internally. The practical rule is simple: use HEX for values that never change, RGB when you need transparency or exact channels, and HSL when you plan to lighten, darken or desaturate a color. A color converter makes switching between them free, so there is no cost to picking the format that fits the job at hand.

Worked example: convert #FF5733 to RGB and HSL

Take the orange-red #FF5733 and convert it by hand, step by step.

Step 1 — HEX to RGB. Split the six digits into three pairs: FF, 57, 33. Convert each pair from base 16: FF = 15 × 16 + 15 = 255; 57 = 5 × 16 + 7 = 87; 33 = 3 × 16 + 3 = 51. The result is rgb(255, 87, 51).

Step 2 — find the extremes. The largest channel is red, 255; the smallest is blue, 51. The difference, called delta, is 255 − 51 = 204. Lightness is the average of the extremes, scaled to a percentage: (255 + 51) ÷ 2 ÷ 255 = 153 ÷ 255 = 0.6, so lightness is 60%.

Step 3 — saturation. Because lightness is above 50%, saturation is delta ÷ (510 − 255 − 51) = 204 ÷ 204 = 1.0, or 100%. The color is as vivid as it can be, which makes sense: the gap between the strongest and weakest channels is as large as possible at this lightness.

Step 4 — hue. The largest channel is red, so hue = 60 × (green − blue) ÷ delta = 60 × (87 − 51) ÷ 204 = 60 × 36 ÷ 204 = 10.59°, which rounds to 11°. Put it together and you get hsl(11, 100%, 60%) — the same color, written a third way.

How do you convert HSL back to HEX?

Start from hsl(120, 100%, 50%) — a pure green — and work backwards. First compute the chroma, the range between the brightest and darkest channel: C = (1 − |2 × 0.5 − 1|) × 1.0 = 1.0. Next, X = C × (1 − |(120 ÷ 60 mod 2) − 1|) = 1 × (1 − 0) = 0. Then m = lightness − C ÷ 2 = 0.5 − 0.5 = 0. A hue of 120° falls in the green sector, so the channels before adding m are (0, 1, 0); adding m changes nothing. Multiply by 255 and you get rgb(0, 255, 0), which in HEX is #00FF00.

The arithmetic is tedious by hand, which is the honest reason most people convert with a tool rather than a calculator. Paste hsl(120, 100%, 50%) into the color converter and it returns #00FF00 and rgb(0, 255, 0) at once. Knowing the steps still matters: it tells you why a hue of 120° is always some kind of green, and why saturation 0% always gives gray no matter what hue you pick.

Which format should you use in CSS?

For a fixed brand color that never changes, HEX is the shortest and most familiar choice: color: #FF5733; is easy to scan in a stylesheet. When you need transparency, RGB is the natural pick — rgba(255, 87, 51, 0.5) for a half-transparent overlay — though the 8-digit HEX form does the same job in fewer characters.

HSL earns its place when a design needs a family of related colors: a button, its hover state and its disabled state can share one hue and saturation, with lightness at 60%, 50% and 75%. Change the hue once and the whole family shifts together. Whatever you pick, stay consistent within a project, and let a converter handle the translation when a design file hands you a different format.

Practical tips

• Never trust a color by its code alone. Paste an unfamiliar HEX value into a converter and look at the swatch before shipping it — #7A5C3E and #8A6C4E are easy to confuse in text.
• Build hover states with HSL. Keep the hue and saturation, drop the lightness by 10, and the hover color always matches the base color.
• Remember that saturation 0% is always gray. At 0% saturation the hue is meaningless: hsl(200, 0%, 50%) is the same mid-gray as hsl(0, 0%, 50%).
• Lightness 50% is the purest color. Above 50% the color washes toward white; below 50% it sinks toward black. For the most vivid version of any hue, use 50%.
• Watch the alpha digits in 8-digit HEX. #FF573380 is about 50% opaque because 0x80 is 128 of 255 — but it is easy to misread as a different color if you forget the last pair exists.
• Sample, don't eyeball. When matching a color from a screenshot or a logo, use a color picker to read the exact pixel value instead of guessing from what you see on screen.

Frequently asked questions

What is the difference between HEX and RGB?

HEX and RGB describe the same color in different notation. HEX writes the three channels as six hexadecimal digits, such as #FF5733, while RGB writes them as three decimal numbers, rgb(255, 87, 51). The values are identical — FF is 255, 57 is 87, and 33 is 51 — so converting between them is pure arithmetic, not a change of color. HEX is shorter to copy; RGB is easier to read and to adjust in code.

Is HSL better than RGB?

Neither is better in general; they suit different jobs. HSL is better when you need to adjust a color — darkening a button on hover means lowering lightness by 10, while in RGB you would have to change all three channels. RGB is better when you need exact channel values or to match a value from a design file, which usually stores colors as HEX or RGB. For a fixed brand color, use HEX; for a color scale, use HSL.

How do I convert HEX to RGB?

Split the six hex digits into three pairs and convert each pair from base 16 to decimal. For #FF5733: FF is 15 × 16 + 15 = 255, 57 is 5 × 16 + 7 = 87, and 33 is 3 × 16 + 3 = 51, giving rgb(255, 87, 51). For a three-digit shorthand such as #F53, double each digit first — #FF5533 — then convert the same way. A color converter does this instantly if you have many values to convert.

What does the alpha channel do in HEX and RGB?

Alpha controls opacity: 1 (or 100%) is fully solid and 0 is fully transparent. In RGB you write rgba(255, 87, 51, 0.5) for a half-transparent orange-red. In HEX you append a fourth pair of digits, so #FF573380 is the same color at about 50% opacity, because 0x80 is 128 out of 255. Alpha is what makes overlays, shadows, and see-through backgrounds possible without a separate image.

Why does the same HEX look different on two screens?

A HEX code names an exact set of RGB values, but each screen turns those values into light differently. Differences in panel type, brightness, color calibration, and night-mode filters all shift what you see, so #FF5733 can look slightly more orange on one laptop and slightly redder on a phone. The code itself is exact and portable; the rendering is not. For color-critical work, calibrate the display and check the result on more than one device.

Can I use HSL in CSS?

Yes. Every modern browser supports hsl() and hsla(), and the newer space-separated syntax hsl(11 100% 60%) works in all current browsers too. HSL is a first-class CSS color format, just like HEX and RGB — the browser converts it to RGB internally, so there is no rendering penalty. Older browsers from before 2011 may not support it, but that is no longer a practical concern for any live website.

Related tools