HEX vs RGB vs HSL vs CMYK — Which Color Format Should You Use?

July 2026  ·  6 min read

Open any design tool or browser DevTools panel and you'll see the same color expressed in several different ways: #2563eb, rgb(37, 99, 235), hsl(221, 83%, 53%). They all describe the exact same shade of blue — the difference is in who each format was designed for, and what task it makes easiest.

HEX — The Web's Default Shorthand

HEX (hexadecimal) color codes are the standard in HTML and CSS. A HEX code like #2563eb packs red, green, and blue into a compact 6-character string — two hex digits per channel, each ranging from 00 to ff (0–255 in decimal). Its biggest strength is brevity: it's short enough to paste into a stylesheet, a design tool, or a Slack message without ambiguity. Some formats also support an 8-digit HEX variant (#RRGGBBAA) that appends two extra digits for alpha transparency — handy when you need opacity encoded directly in the color string rather than as a separate CSS property.

RGB — The Native Color Model of Screens

RGB expresses the same three channels as plain decimal numbers 0–255, e.g. rgb(37, 99, 235). It maps directly onto how screens actually produce color — mixing red, green, and blue light — which is why it's the native format for rgb() and rgba() in CSS. RGB is intuitive for anyone thinking in terms of "how much of each light channel," but it's not intuitive for adjusting a color's brightness or vibrancy — bumping "blueness" up or down doesn't map cleanly to how humans perceive lightness or saturation.

HSL — Built for How Designers Actually Think

HSL (Hue, Saturation, Lightness) solves that problem. Hue is an angle on a 360° color wheel (0° = red, 120° = green, 240° = blue), saturation is how intense or muted the color is (0–100%), and lightness is how close to black or white it is (0–100%). This maps much more closely to how people describe colors in conversation — "a slightly darker, less saturated version of that blue" is a trivial HSL adjustment, but a much harder mental calculation in raw RGB. HSV (Hue, Saturation, Value) is a close cousin that swaps lightness for value, and is the model most color wheel pickers use internally.

CMYK — The Format for Print, Not Screens

CMYK (Cyan, Magenta, Yellow, Key/Black) is fundamentally different from the other three: it's a subtractive color model built for physical ink on paper, rather than light emitted from a screen. Instead of adding light channels together, CMYK describes how much of each ink to lay down — more ink subtracts more light, producing darker colors. If you're preparing a design for professional printing, converting your on-screen RGB/HEX color to its CMYK breakdown ahead of time helps you catch colors that will look duller or shift noticeably once printed.

Quick Reference

Converting Between Formats

In practice, you rarely need to do this math by hand. A color picker that shows all four formats side-by-side for the same picked or uploaded color lets you copy whichever one your current tool needs — HEX for a CSS variable, RGB for a JavaScript canvas, HSL for fine-tuning a shade, or CMYK for a print vendor's spec sheet.