HEX, RGB, and HSL Color Codes Explained

Why three notations for the same colors?

Screens build color by mixing three channels of light: red, green, and blue. Every color you see on a web page is ultimately some combination of these three primaries in the sRGB color space. Because all three notations describe that same underlying model, none of them can show a color the others cannot. They differ only in how the numbers are written and in which adjustments feel natural.

HEX and RGB are two ways of writing the exact same red/green/blue values. RGB spells the channels out as decimal numbers; HEX packs them into a compact hexadecimal string. HSL takes a different angle: instead of asking 'how much red, green, and blue,' it asks 'what color, how vivid, and how light.' That makes HSL far easier for a human to reason about when tweaking a palette, even though the computer converts it back to RGB before drawing anything.

CSS supports all three, so the choice is about readability and workflow rather than capability. The CSS Color specification from the W3C defines each syntax precisely, and browsers treat the formats as equivalent.

HEX: compact hexadecimal

A HEX color is a hash sign followed by six hexadecimal digits, grouped as #RRGGBB. Each pair encodes one channel from 00 (none) to FF (full, which is 255 in decimal). So #FF0000 is full red with no green or blue, and #FFFFFF is all three channels at maximum, producing white.

Hexadecimal uses sixteen digits: 0-9 then A-F, where A equals 10 and F equals 15. A pair like FF therefore means 15 x 16 + 15 = 255. HEX is case-insensitive, so #ff0000 and #FF0000 are identical. A three-digit shorthand also exists: #RGB expands by doubling each digit, so #F00 means #FF0000 and #0AF means #00AAFF.

HEX is popular because it is short, copy-pasteable, and matches what design tools export. Its weakness is that the values are hard to read at a glance and awkward to adjust by hand. When you need to move between HEX and decimal channels, a converter removes the manual arithmetic.

RGB and HSL: human-readable channels

RGB writes the same three channels as decimal numbers from 0 to 255, for example rgb(255, 0, 0) for red. Modern CSS also accepts space-separated syntax such as rgb(255 0 0). Because the numbers are plain decimals, RGB is easy to read and to generate programmatically, and it maps one-to-one onto HEX.

HSL re-describes the color with three intuitive controls. Hue is an angle on the color wheel from 0 to 360 degrees: 0 is red, 120 is green, and 240 is blue. Saturation is a percentage from 0% (gray) to 100% (fully vivid). Lightness is a percentage from 0% (black) through 50% (the pure hue) to 100% (white). To make a button's hover state slightly darker, you can simply lower the lightness a few points and leave hue and saturation untouched, which is much harder to do cleanly in HEX or RGB.

All three notations cover the same sRGB gamut, so converting between them is lossless apart from rounding. The table below shows several familiar colors written in each format; every value has been checked for consistency.

The same colors in HEX, RGB, and HSL

Use this as a quick reference for how identical colors appear in each notation. Note that for grayscale colors (white, black, gray) the hue value is arbitrary because saturation is 0% — it is conventionally written as 0.

Small rounding differences can appear in the HSL percentages when tools convert back and forth, which is normal and visually imperceptible.

Alpha and opacity

Each notation has a variant that adds an alpha channel for transparency, where 0 is fully transparent and the maximum value is fully opaque. In RGB and HSL you append a fourth value: rgba(255, 0, 0, 0.5) or rgb(255 0 0 / 50%) gives a half-transparent red, and hsl(0 100% 50% / 50%) does the same. Modern CSS lets you add the alpha to plain rgb() and hsl() too, so the older rgba()/hsla() names are no longer required.

HEX supports alpha with an optional fourth pair of digits in #RRGGBBAA form. Here 00 is fully transparent and FF is fully opaque, so #FF000080 is roughly 50% transparent red because 80 in hex is 128, about halfway through 255. A four-digit #RGBA shorthand also expands the same way as #RGB.

Alpha is different from the CSS opacity property: alpha applies to a single color value, while opacity fades an entire element and everything inside it. Choose alpha when you only want the color itself to be see-through.

When to use each, and how to convert

Reach for HEX when you want short, portable values that match design-tool exports and brand style guides. Use RGB when you are generating colors in code or already think in 0-255 channels, since the math is straightforward. Choose HSL when you are building or adjusting a palette by hand, because changing hue, saturation, or lightness independently keeps related shades consistent.

In day-to-day work you will move between these formats constantly: a designer hands you HEX, your CSS uses HSL, and a script outputs RGB. Rather than convert by hand, paste a value into our hex-to-rgb tool or rgb-to-hex tool to get the exact equivalent instantly. Once you have your colors, run the foreground and background through the color-contrast-checker to confirm text stays legible and meets accessibility contrast guidance.

Frequently asked questions

Try the tools

• HEX to RGB Converter →
• RGB to HEX Converter →
• Color Contrast Checker →

Sources & references

• MDN Web Docs — CSS color values (<color> data type)
• MDN Web Docs — Applying color to HTML elements using CSS
• W3C — CSS Color Module Level 4