Color Format Converter
When to Use Each Format
| Format | Best For | Why |
|---|---|---|
| HEX | Web CSS / design specs | Most compact CSS notation, universal browser support |
| RGB | Screens, Canvas / WebGL | Directly maps to display sub-pixels |
| HSL | UI design, dynamic theming | Hue/saturation/lightness separation is intuitive for humans |
| HSV | Image editors (Photoshop picker) | Value channel matches the paint "brightness" concept |
| CMYK | Print, packaging design | Subtractive model used directly in 4-color printing |
| HWB | CSS Color Level 4 notation | Describes color by whiteness/blackness, more intuitive than HSL |
Core Conversion Formulas
RGB → HSL
Normalize R, G, B to [0,1]. Let max = max(R,G,B), min = min(R,G,B), d = max - min. L = (max+min)/2; S = d / (1 - |2L-1|); H is computed per-channel.
RGB → CMYK
K = 1 - max(R',G',B'), C = (1-R'-K)/(1-K), M = (1-G'-K)/(1-K), Y = (1-B'-K)/(1-K), where R' = R/255.
Browser Support for CSS Color Functions
| Function | Chrome | Firefox | Safari |
|---|---|---|---|
rgb() / rgba() | 1+ | 1+ | 1+ |
hsl() / hsla() | 1+ | 1+ | 3.1+ |
hwb() | 101+ | 96+ | 15+ |
color(display-p3) | 111+ | 113+ | 15+ |
FAQ
Can I omit the # in HEX colors?
The # is required in CSS. This tool auto-prepends it if omitted. 3-digit shorthand (#f0f) equals 6-digit (#ff00ff) and is fully supported here.
Why does CMYK conversion differ from print software?
This tool uses the standard mathematical formula without ICC profiles. Professional print work requires soft-proofing with a target paper ICC profile in software like Adobe Illustrator.
What is the difference between HSL and HSV?
Both use Hue. In HSL, L=50% is the pure color and 100% is white. In HSV, V=100% is the pure color, while S=0 yields gray/white. HSL is better for CSS theming; HSV matches the Photoshop color picker mental model.