Color Converter
Convert any color between HEX, RGB, HSL and CMYK formats instantly. Pick from a color wheel or type any value — all formats update in real time. Perfect for designers and developers working across web and print. Runs in your browser, no data uploaded.
How to Use the Color Converter
Click the color picker on the left to choose any color visually — all four formats update instantly. Alternatively, type any value directly into the HEX, RGB or HSL fields:
- HEX — type
#3b82f6or just3b82f6. - RGB — type
rgb(59, 130, 246)or59, 130, 246. - HSL — type
hsl(217, 91%, 60%)or217, 91%, 60%.
Color Format Comparison
| Format | Used in | Example |
|---|---|---|
| HEX | CSS, HTML, design tools | #3b82f6 |
| RGB | CSS, canvas, image processing | rgb(59, 130, 246) |
| HSL | CSS, color manipulation | hsl(217, 91%, 60%) |
| CMYK | Print design, Illustrator, InDesign | cmyk(76%, 47%, 0%, 4%) |
CSS Color Tips
Modern CSS supports all these formats natively. Use HEX for fixed colors, HSL for dynamic color manipulations with CSS custom properties, and RGB with alpha (rgba) for transparency. The CSS Color Level 4 spec also introduces oklch() for perceptually uniform color spaces.
Frequently Asked Questions
What is the difference between HEX and RGB?
HEX is a six-digit hexadecimal representation of an RGB color. They represent the same color space — just different notations. #3b82f6 equals rgb(59, 130, 246).
When should I use HSL instead of RGB?
HSL is easier to adjust intuitively. Increase Lightness to lighten, decrease Saturation to dull. Preferred for programmatic color manipulation in CSS.
What is CMYK and when is it used?
CMYK (Cyan Magenta Yellow Key/Black) is used in print design. Printers mix ink in these four channels. Web uses RGB or HEX; print uses CMYK.
Can I paste a CSS color value directly?
Yes. Paste a HEX value (with or without #), an rgb() or hsl() function and the converter parses and converts it to all other formats.