Hex, RGB and HSL all describe the same sRGB colours. They differ in what is easy to change by hand, which is why design systems mix them.
Hex is RGB in base 16
#1E90FF is three byte-sized numbers — 1E, 90 and FF — for red, green and blue, each from 0 to 255. Converting to RGB is pure notation: #1E90FF is rgb(30, 144, 255). A three-digit shorthand like #1BF simply doubles each digit to #11BBFF.
Hex is compact and unambiguous, which is why it dominates in CSS files and design handoffs, but the digits tell you nothing about how the colour will feel next to another one.
RGB is the same data with an alpha channel
rgb() and rgba() take the same channel values in decimal and let you add opacity. Use it when a value is computed at runtime or interpolated in JavaScript, since arithmetic on decimal channels is easier to read than on hex strings.
HSL is the one you can reason about
HSL restates a colour as hue (0–360° around the colour wheel), saturation, and lightness. Building a palette becomes mechanical: keep the hue and step the lightness for a tint ramp, or rotate the hue by 30° for an analogous accent and 180° for a complement.
This is why token-based design systems store HSL — a theme can shift every surface by editing lightness once instead of hand-picking a dozen hex codes.
Checking contrast before you ship
Lightness in HSL is not perceived brightness, so two colours with the same L value can read very differently. Verify body text against its background at a 4.5:1 contrast ratio and large text at 3:1 rather than trusting the numbers to look balanced.
Convert whichever format your tool needs and copy the exact code — retyping colour values by hand is the most common source of a palette drifting out of sync.
Last reviewed 2026-08-31.