HEX vs RGB vs HSL: Color Formats Explained With Real Values

By ToolSura DevTools Team, Senior Engineers · View profile

Same color, three names

Hex, RGB, and HSL are not competing formats so much as three coordinate systems over the same space, and the [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/) specification treats them as interchangeable ways to write a color value. During research for this guide we converted one familiar color through all three, with results computed directly rather than rounded from memory:

The same blue written three ways

Notation	Value	What it emphasizes
Hex	#3B82F6	Packed bytes; copy-paste from design tools
RGB	rgb(59, 130, 246)	Raw channel amounts machines emit
HSL	hsl(217, 91%, 60%)	Human-readable hue, saturation, lightness

Every renderer produces the identical pixel from any row. The choice among them is about workflow: which representation matches the change you want to make.

HEX: compact and universal

A hex value packs three channel bytes into six hexadecimal digits, two per channel, prefixed by a hash. The [MDN color value reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) documents the shorthand form, where repeated digits collapse, and the [specification's hex section](https://www.w3.org/TR/css-color-4/#hex-notation) formalizes both lengths: #3388ff shortens to #38f because each digit doubles. Hex dominates design handoff for good reason: it is short, unambiguous, case-insensitive, and every tool on earth parses it.

Its weakness is meaning. Reading #3B82F6, nobody intuits that it leans blue-violet at high saturation until converting mentally to HSL. Hex answers where the bytes are, not what the color feels like, which matters when the task is adjusting feel.

RGB: channels and alpha

rgb() names exactly what hex encodes: decimal amounts of red, green, and blue light, each 0 to 255, with an optional alpha component written rgb(59 130 246 / 0.5) in the [modern slash syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Screens mix light additively, so RGB mirrors the hardware directly; screenshots, canvas APIs, and image editors speak this dialect natively. When a designer hands you channel numbers from eyedropper output, rgb() preserves them without mental hex conversion, and alpha handling reads more naturally than appending byte pairs to hex.

HSL: colors humans can edit

HSL reorganizes the same data around perception: a hue angle in degrees, saturation as a percentage, lightness as a percentage. The [MDN hsl reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) walks the cylinder model behind those coordinates. Its practical superpower is decomposition. Take our sample's HSL reading, hold hue at 217 degrees, and vary only lightness:

A lightness ramp built from one HSL base

Value	Resulting hex
hsl(217, 91%, 20%)	#052861
hsl(217, 91%, 35%)	#0846aa
hsl(217, 91%, 50%)	#0b64f4
hsl(217, 91%, 65%)	#5593f7
hsl(217, 91%, 80%)	#9ec1fa

Five coordinated shades from one number changed, which is precisely how design-system palettes get built. Rotating hue instead yields instant complements and triads, the relationships [the hsl reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) illustrates: spinning our blue's 217-degree angle around the wheel lands you on warm reds, greens, and magentas while saturation and lightness hold steady. Attempting either operation in hex means editing three unrelated byte pairs blind.

Choosing by task

Which notation fits which job

Task	Best pick
Copying values between design tools and code	Hex
Building tints, shades, or theme ramps	HSL
Working from eyedropper or sensor output	RGB
Translucent overlays and states	RGB or HSL with alpha syntax
Teaching color relationships to newcomers	HSL

CSS Color 4 adds perceptually uniform spaces such as oklch that improve on HSL's quirks, notably how its lightness misjudges yellows versus blues; the [CSS Color 4 specification](https://www.w3.org/TR/css-color-4/) details these spaces, and browsers now support them broadly. For most everyday work, though, the classic trio covers everything teams actually ship.

Converting and checking daily

• Translate between formats instantly with the hex to RGB converter
• Explore ramps and palettes visually with the color picker and palette generator
• Verify text pairs still pass accessibility after recoloring using the contrast checker, since our [WCAG contrast guide](/blog/wcag-contrast-ratio-guide/) shows one shade decides pass or fail
• Cross-check tricky pairs against [WebAIM's contrast tool](https://webaim.org/resources/contrastchecker/), then feed chosen stops into the gradient generator when moving from single colors to transitions

Pick the notation that matches the edit

Hex vs RGB vs HSL ends as a question about intent rather than correctness. Hex carries bytes faithfully between tools; RGB speaks the screen's native channel language; HSL exposes the knobs humans actually turn when designing. Learn to read one color in all three, lean on conversion tooling instead of memorizing formulas, and let the task name the format.