Color formats at a glance
| Format | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | CSS and design handoff |
| RGB | rgb(59, 130, 246) | Programmatic color manipulation and browser rendering |
| HSL | hsl(217, 91%, 60%) | Human-friendly hue, saturation, and lightness adjustments |
| CMYK | cmyk(76, 47, 0, 4) | Print-oriented workflows |
Same blue in different formats
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CMYK
cmyk(76, 47, 0, 4)
When to use what
- Use HEX when you need short CSS-friendly values for a design system or stylesheet.
- Use RGB when code or a browser API expects channel values directly.
- Use HSL when you want to change lightness or saturation more intuitively.
- Use CMYK for print-facing conversations, not as the main format in CSS.
Use this reference with the right tool
Related tools