HEX vs RGB vs HSL: Color Formats Explained

By the Keynou team · July 17, 2026 · 7 min read

Every color on a screen is the same thing underneath - a mix of red, green and blue light. The formats are just different notations for describing that mix, and each one is convenient for a different job. Take one color, the teal from our own logo, and look at it five ways:

HEX   #10b0b8
RGB   rgb(16, 176, 184)
HSL   hsl(183, 84%, 39%)
HSV   hsv(183, 91%, 72%)
CMYK  cmyk(91%, 4%, 0%, 28%)

HEX: the web's shorthand

A HEX code is three pairs of hexadecimal digits - red, green, blue - each pair running from 00 (none) to ff (full). #10b0b8 means red 16, green 176, blue 184. It is compact, universally supported, and the default answer when someone asks "what color is that?" An optional fourth pair adds alpha (transparency): #10b0b8cc is the same teal at 80% opacity.

RGB: the same numbers in decimal

rgb(16, 176, 184) is exactly the HEX value with each channel written in ordinary decimal (0-255). Use it when you need to manipulate channels in code, or when you want easy alpha: rgba(16, 176, 184, 0.8) reads more naturally than an 8-digit HEX to most people.

HSL: the one designed for humans

HSL describes a color the way you would adjust it: hue (0-360° around the color wheel), saturation (0% gray to 100% vivid), lightness (0% black to 100% white). Its superpower is systematic variation. Want a darker shade of your brand color for a hover state? Drop the lightness ten points and nothing else changes:

--brand:       hsl(183, 84%, 39%);
--brand-hover: hsl(183, 84%, 29%);   /* same hue, darker */
--brand-tint:  hsl(183, 84%, 92%);   /* same hue, near-white */

Doing that in HEX means recalculating all six digits. This is why design systems increasingly define palettes in HSL.

HSV/HSB: the color-picker format

HSV (also called HSB - brightness) is HSL's sibling, used by Photoshop-style pickers. The difference: in HSV, 100% value is the pure vivid color, while in HSL, 100% lightness is always white. Neither is "more correct"; they are different geometries of the same RGB cube. If you copy values between a design tool and CSS, just make sure you know which one you are reading - the numbers differ for the same color.

CMYK: for ink, not light

Printers mix cyan, magenta, yellow and black ink on white paper, which is a subtractive process - the opposite of screens adding light. CMYK values are approximations when converted from screen colors, and the printed result also depends on paper and printer profiles. Use CMYK when a print vendor asks for it, and expect small shifts from what your monitor shows.

Quick reference: which format for which job

Converting without thinking about it

You should never convert these by hand. When you pick any pixel with Keynou Colorpicker, the popup shows the color in all five notations simultaneously - each one a single click to copy - and the format you use most is auto-copied at pick time. The color wheel also lets you edit in HSL (hue ring, saturation radius, lightness slider) while reading the live HEX and RGB equivalents.

Alpha and opacity: RGBA, HSLA and 8-digit HEX

Every format has a transparency variant. rgba(16, 176, 184, 0.5) and hsla(183, 84%, 39%, 0.5) add an alpha channel from 0 (fully transparent) to 1 (fully opaque). HEX does the same with two extra digits - #10b0b880 is the teal at 50% - though the 8-digit form is harder to read at a glance, which is why designers usually reach for RGBA when opacity matters. All three render identically; pick whichever your team finds most legible.

A worked conversion, step by step

Say you have #10b0b8 and need it as RGB. Split it into three pairs - 10, b0, b8 - and convert each from hexadecimal to decimal: 10 is 16, b0 is 176, b8 is 184. That gives rgb(16, 176, 184). Going to HSL is more involved (it needs the min/max of the normalized channels), which is exactly why you should let a tool do it: pick the color once and read every format at the same time.

Which format do browsers prefer?

Modern CSS accepts all of them equally - the browser parses each to the same internal RGB value, so there is no rendering or performance difference. The choice is purely about author ergonomics: HEX for brevity, RGB/RGBA for scripting and opacity, HSL for building systematic palettes. Newer spaces like oklch() from CSS Color 4 add perceptual uniformity, but HEX, RGB and HSL remain the everyday trio.

Sources

Color values on the web are defined by the W3C CSS Color Module Level 4 specification; the MDN <color> reference lists every syntax with examples. To capture any of these formats from your screen, see how to pick a color from any website.