HEX, RGB and HSL: Color Codes Explained Simply

The same color, three notations: #5850ec, rgb(88, 80, 236), and hsl(243, 80%, 62%). All three work in CSS. They differ in what they make easy.

HEX: the compact standard

Six hexadecimal digits — two each for red, green, blue, from 00 to ff. It’s the default in design tools and the most copy-paste-friendly, which is why it dominates style guides and brand documents. Unreadable to humans, but universal.

RGB: the machine’s view

The same three channels in decimal, 0–255. Useful when a value comes from code or when you need alpha transparency — rgba(88, 80, 236, 0.5) is the classic semi-transparent overlay.

HSL: the one humans can edit

Hue (0–360° around the color wheel), saturation, lightness. Want the same color but lighter? Raise L. More muted? Lower S. A matching accent? Shift H by 30°. This is why designers increasingly define palettes in HSL: related colors differ by one number instead of six mystery hex digits.

Practical workflow

Pick or receive a color in any format, convert once, and use the format the task wants: HEX for handoff and consistency, RGB for alpha, HSL for creating variations. A converter that keeps all three in sync removes the arithmetic entirely.