Developer Tools
HEX, RGB, HSL, CMYK: Color Formats Explained for Designers
Published: July 12, 2025 · 5 min read
The same color specified incorrectly in different formats can cost a designer hours of debugging. Understanding HEX, RGB, HSL, and CMYK is essential for any web developer or designer.
HEX — the web standard
- Six-digit hexadecimal code (#RRGGBB).
- Each pair represents red, green, blue intensity (00-FF).
- Short form: #RGB expands to #RRGGBB.
- Most common format in CSS and HTML.
RGB — how screens see color
- Three channels, each 0-255 (rgb(79, 70, 229)).
- Directly maps to how screens emit light.
- Intuitive for developers working with programmatic color manipulation.
HSL — how humans think about color
- Hue (0-360 color wheel), Saturation (0-100% intensity), Lightness (0-100% brightness).
- Best for creating color palettes, generating shades/tints, and design systems.
CMYK — for print, not screens
- Cyan, Magenta, Yellow, Key (black).
- Subtractive model for printed materials.
- Cannot be used directly in CSS — must convert to RGB/HEX for web use.
Quick conversion reference
Here's the brand indigo color in all four formats:
| Format | Value |
|---|---|
| HEX | #4f46e5 |
| RGB | rgb(79, 70, 229) |
| HSL | hsl(239, 67%, 59%) |
| CMYK | cmyk(65%, 69%, 0%, 10%) |