HEX vs RGB vs HSL: Color Formats Explained for Designers

The same color can be written four different ways. Knowing what each format means — and when to use it — makes you faster in CSS and design tools alike. Here's the plain-English version.

HEX

A HEX code like #2563EB is just RGB written in base-16. The six digits are three pairs: RR GG BB (red, green, blue), each from 00 to FF (0–255). It's compact and the default in most design tools, but you can't easily "read" or tweak it by eye.

RGB

rgb(37, 99, 235) spells out the same three channels as decimals 0–255. It maps directly to how screens emit light (red + green + blue). Add an alpha channel for transparency: rgba(37, 99, 235, 0.5).

HSL

hsl(222, 83%, 53%) describes color the way humans think about it:

• Hue (0–360°): which color on the wheel — 0 red, 120 green, 240 blue.
• Saturation (0–100%): how vivid vs. gray.
• Lightness (0–100%): how light vs. dark.

HSL is brilliant for adjusting colors — want a darker shade? Lower the lightness. Want a muted version? Drop the saturation. That's much harder to do in HEX.

CMYK

cmyk(84%, 58%, 0%, 8%) is the ink model for printing (Cyan, Magenta, Yellow, Key/black). Screens use RGB (additive light); print uses CMYK (subtractive ink), which is why colors can look different on paper. Use CMYK only when preparing files for physical print.

Which should I use?

Convert in one click

Our color tools let you pick or paste any color and instantly copy it as HEX, RGB, HSL or CMYK — plus build palettes and check contrast. No need to memorize the math.

FAQ