Color formats are confusing — designers think in HSL, CSS uses HEX, print uses CMYK. This guide shows how to convert between all color formats online and explains what each format means.
⚡ Try It Free — No Signup
Works instantly in your browser. No account, no install, no upload.
Open Color Converter →Color Format Overview
| Format | Example | Use Case |
|---|---|---|
| HEX | #6366f1 | CSS, HTML, design tools |
| RGB | rgb(99, 102, 241) | CSS, programming |
| HSL | hsl(239, 84%, 67%) | CSS, intuitive design |
| HSV/HSB | hsv(239, 59%, 95%) | Photoshop, design apps |
| CMYK | cmyk(59, 58, 0, 5) | Print design |
HEX Colors Explained
A HEX color like #6366f1 is three pairs of hexadecimal digits representing Red (63), Green (66), Blue (f1). Each pair ranges from 00 (0) to ff (255).
HSL: The Designer's Format
HSL (Hue, Saturation, Lightness) is more intuitive than RGB for humans:
- Hue: Color wheel position, 0–360° (0=red, 120=green, 240=blue)
- Saturation: Color intensity, 0% (grey) to 100% (vivid)
- Lightness: Brightness, 0% (black) to 100% (white), 50% = pure color
To create a lighter/darker variant of a color, just adjust the L value — much easier than adjusting RGB values.
When to Use CMYK
CMYK (Cyan, Magenta, Yellow, Black) is used in print. Computer screens use light (additive color / RGB), while printers use ink (subtractive color / CMYK). Always convert to CMYK before sending files to a print shop.