HEX, RGB, and HSL: The Three Color Formats, Demystified

Published August 18, 2026 · By the Wikabel team

Copy a color out of any design tool and you'll likely run into the same value written three completely different ways: #1E90FF, rgb(30, 144, 255), and hsl(210, 100%, 56%). All three point to the exact same shade of blue — they're just different notations for describing color to a screen. Knowing which one to reach for saves time and keeps your site, ads, and social graphics from drifting out of sync with each other.

HEX: the default of the web

A HEX code is six characters preceded by a hash sign — for example, #F5A524. Those six characters break into three pairs, one each for red, green, and blue. Every pair is a hexadecimal number ranging from 00 (that channel contributes nothing) to FF (full intensity, the equivalent of 255 in plain decimal). That's why #FF0000 is pure red, #00FF00 is pure green, and #FFFFFF comes out white — all three channels maxed out at once.

HEX is the format nearly everyone defaults to. It's what brand guidelines list, what Figma, Canva, and Photoshop expect, and what every CSS stylesheet accepts without complaint. If someone asks for your brand color, they're expecting a HEX code back. If you're only going to internalize one format, this is the one.

RGB: the same values, in decimal

rgb(245, 165, 36) encodes the exact same information as #F5A524 — it's just using familiar 0-to-255 decimal numbers per channel instead of hex pairs. RGB caught on in CSS partly because it's more intuitive to reason with ("a bit more red, a bit less blue"), and partly because of its extension, rgba(), which tacks on a fourth value for transparency. rgba(245, 165, 36, 0.5), for instance, is that same orange rendered at half opacity — a capability plain HEX historically lacked.

Current CSS also supports 8-digit HEX values (something like #F5A52480) where the final pair handles transparency, which means the practical gap between HEX and RGB today mostly comes down to personal habit and how each one reads to you.

HSL: color the way people actually picture it

HSL stands for Hue, Saturation, Lightness, and it maps much more closely to how humans naturally think about color:

• Hue is where the color sits on the color wheel, measured 0 to 360 degrees — 0 is red, 120 is green, 240 is blue.
• Saturation measures vividness, from 0% (flat gray) to 100% (fully saturated).
• Lightness runs from 0% (black) to 100% (white), with the purest version of the color sitting right at 50%.

HSL earns its keep whenever you need related shades of a single color. Need a lighter hover state on a button? Leave hue and saturation alone and bump lightness up 10%. Need a darker border? Nudge lightness down instead. Trying to do either of those in HEX means reaching for a converter or eyeballing it; in HSL, it's a one-number change. That's exactly why plenty of design systems store their palettes internally in HSL, even if they still hand out HEX codes to the outside world.

Picking the right format for the job

One thing worth flagging: HEX, RGB, and HSL all describe color for screens. Physical print work runs on the CMYK ink model instead, and the exact same HEX value can shift noticeably once it hits paper. If a project is headed for print, hand your printer a CMYK conversion rather than a HEX code.

Moving between formats

You'll almost never need to convert by hand. Every current design tool shows all three formats right inside its color picker, browser dev tools let you click the small swatch in the Styles panel to cycle through HEX, RGB, and HSL, and our own extractor hands back both HEX and RGB for every color it pulls from an image. Worth remembering: converting between these formats is lossless — nothing is gained or lost in the process, only the notation itself changes.