1
Enter any format
HEX, RGB, HSL, HSV, or CMYK
2
See all 5 formats
All update in real time
3
Copy & use
Click copy for CSS, design, print
5 formats — HEX, RGB, HSL, HSV, CMYK — edit any, all update live
HEX, RGB, HSL, HSV, or CMYK
All update in real time
Click copy for CSS, design, print
| Format | Example | Used In |
|---|---|---|
| HEX | #3B82F6 | CSS, HTML, web design — the universal web color format |
| RGB | rgb(59, 130, 246) | Screens, displays, digital design — additive color (light) |
| HSL | hsl(217, 91%, 60%) | CSS, design systems — intuitive hue-based color manipulation |
| HSV | hsv(217, 76%, 96%) | Color pickers, image editing (GIMP, Photoshop) — artist's model |
| CMYK | cmyk(76, 47, 0, 4) | Print, publishing — subtractive color (ink on paper) |
RGB is additive color: start with black (no light) and add red, green, and blue light to create colors. At full intensity, R+G+B = white. Screens, phones, and projectors all use RGB. CMYK is subtractive color: start with white paper and subtract light by layering cyan, magenta, yellow, and black ink. C+M+Y should theoretically produce black but actually makes a muddy brown — hence the separate K (Key/Black) ink. RGB has a wider gamut: many vivid screen colors (neon greens, electric blues) physically cannot be reproduced with CMYK inks. When designing for both screen and print, always check the CMYK preview to avoid disappointing color shifts at the printer.
HSL (Hue, Saturation, Lightness) is the CSS-native color model. Pure, vivid colors sit at L=50%. L=0% is black; L=100% is white. This makes HSL perfect for generating tints (add white: increase L), shades (add black: decrease L), and tones (reduce S). HSV (Hue, Saturation, Value) is the artist's model, used by Photoshop and GIMP color pickers. Pure colors sit at V=100%. V=0% is black. HSV's saturation behaves more like paint mixing — adding white reduces saturation in HSV but only changes lightness in HSL. Neither is "correct" — they're different tools for different tasks.
Enter your HEX code (e.g., #3B82F6) in the HEX field. RGB updates instantly: rgb(59, 130, 246). Each pair of hex digits = one channel: 3B=59 (R), 82=130 (G), F6=246 (B).
Enter RGB values — HSL updates automatically. HSL is more intuitive: Hue (0-360°) = color wheel position, Saturation (0-100%) = intensity, Lightness (0-100%) = brightness. Pure colors are at L=50%.
RGB = additive light (screen). CMYK = subtractive ink (print). RGB has a wider color gamut — vivid screen colors can't be exactly reproduced in print. This converter shows the theoretical CMYK equivalent, but actual print results depend on printer/paper/ink profiles.
Both use Hue and Saturation but differ in brightness: HSL Lightness ranges black→pure color→white (pure at 50%). HSV Value ranges black→pure color (pure at 100%). HSV is used in color pickers (GIMP/Photoshop); HSL is better for generating tints and shades in CSS.
Click the color preview swatch to open your browser's native color picker. Select any color visually and all 5 formats update instantly. You can also click 'Random Color' to explore color combinations.