How Digital Color Works: RGB, HEX, and HSL Explained

Every color on a screen is ultimately just three numbers — but which three numbers, and what they mean, depends on which color model you're using.

RGB and HEX are the same data, different notation

RGB expresses color as red, green, and blue intensities, each from 0-255. Hex notation packs those same three numbers into a single string, with each channel written as a 2-digit hexadecimal number. The color rgb(59, 130, 246) — a common UI blue — converts to hex by writing 59, 130, and 246 each in base-16: 59 → 3B, 130 → 82, 246 → F6, giving #3B82F6. There's no information gained or lost in either direction; it's purely a notation difference, the same way 255 in decimal and FF in hex are the same quantity.

HSL: color described the way people actually think about it

RGB is how screens store color, but it's not how people naturally describe it — nobody says "make it more red and less blue," they say "make it lighter" or "more saturated." HSL (hue, saturation, lightness) separates those concerns: hue is the base color (0-360° around a color wheel), saturation is intensity (0% = gray, 100% = fully vivid), and lightness is how light or dark it is (0% = black, 100% = white). That same #3B82F6 blue converts to hsl(217°, 91%, 60%) — a hue near blue, highly saturated, moderately light.

Why HSL makes palette design easier

Because HSL separates hue from lightness and saturation, generating a palette of tints and shades from one base color is trivial in HSL (just adjust the lightness value) but awkward in RGB (you'd need to blend all three channels toward white or black proportionally). This is exactly how "tint and shade generator" tools work under the hood — blending each RGB channel toward 255 (white) or 0 (black) by a fixed percentage.

Contrast ratios and accessibility

WCAG accessibility guidelines require a minimum contrast ratio between text and background color — 4.5:1 for normal text, 3:1 for large text, to meet the AA standard. Contrast ratio is calculated from each color's relative luminance (a weighted, non-linear combination of the RGB channels, not just their average), which is why two colors that look similarly "bright" to the eye can still fail a contrast check if their calculated luminance values are too close together.

CMYK: color for print, not screens

CMYK (cyan, magenta, yellow, key/black) is a subtractive color model built for physical ink on paper, unlike RGB's additive light-based model — which is why converting between CMYK and RGB is always an approximation, and why a color that looks right on screen can print slightly differently.

• The HEX to RGB converter and RGB to HSL converter handle the notation conversions above
• The color contrast checker calculates WCAG contrast ratios directly
• The color shade generator and CMYK to RGB converter cover palette generation and print color conversion