HEX, RGB, HSL & CMYK: A Guide to Color Formats

The same color can be written four different ways. Knowing what each format means — and which to use when — makes working with color far less fiddly.

HEX

A HEX code is RGB written in hexadecimal: #RRGGBB, two hex digits each for red, green, and blue (#2563EB). A fourth pair adds alpha (#2563EBFF). It's compact and the most common way to write colors in CSS and design tools.

RGB

RGB states the same three channels as decimal numbers from 0-255: rgb(37, 99, 235). rgba() adds an alpha value from 0-1. It's the native model for screens, which mix red, green, and blue light to make every color.

HSL

HSL — hue, saturation, lightness — is the format built for humans: hsl(222, 83%, 53%). Hue is an angle on the color wheel (0-360°), saturation is how vivid it is, and lightness is how bright. It shines when you want to tweak a color intuitively — nudge lightness for a hover state, drop saturation for a muted variant.

CMYK

CMYK — cyan, magenta, yellow, key (black) — is a subtractive model for print, not screens. Printers combine these inks, so CMYK matters when preparing artwork for physical output rather than the web.

Which to use

• HEX or RGB for most web work — HEX for brevity, RGB(A) when you need alpha in numeric form.
• HSL when you're adjusting a color by hand or generating variations.
• CMYK only when the destination is print.

Because these all describe the same color space (except CMYK's print gamut), converting between HEX, RGB, and HSL is exact — a converter just does the math for you.

Try it

Pick a color or paste any HEX, RGB or HSL value and see it in every format at once — all in your browser, nothing uploaded.