Color Converter
Convert between HEX, RGB, HSL, and CMYK
How to use
- Enter color in any format
- View converted values
- Copy the desired format
Use cases
- Design workflow
- Color matching
- Print design
- Web development
About the Color Converter
Color conversion translates a color between the formats used in different contexts: hex for CSS, RGB for software, HSL for design systems, CMYK for print. This converter parses every popular syntax (including shorthand hex and CSS named colors), clamps out-of-range input, and emits all four formats so you never have to visit three sites to move a brand color between Figma, your CSS, and your print brief.
Features
- HEX ↔ RGB ↔ HSL ↔ CMYK
- 3/4/6/8-digit hex (with alpha)
- Bounds-clamped input — rgb(300,0,0) doesn't crash
- Precise rgbToHsl math with rounding
- Handles CSS named colors via the browser
How it works
- Paste a color in any format — HEX, rgb(), hsl(), cmyk(), or a name.
- See the other three formats rendered instantly with a live swatch.
- Copy whichever format you need.
Frequently asked questions
When do I use CMYK?
+
Only for print. Screens are RGB; printers are CMYK. Converting a screen color to CMYK is approximate because CMYK has a smaller gamut — some vivid RGB colors simply can't be printed exactly.
What's the right format for CSS variables?
+
HSL is the modern choice — you can edit hue, saturation, and lightness independently, making design systems much more flexible. HEX is still fine for simple palettes.
Does it support CSS4 colors like lab() and lch()?
+
Not yet — that's roadmap. For now we handle HEX/RGB/HSL/CMYK and the standard named colors.
Why is my CMYK percentage different elsewhere?
+
CMYK conversion formulas vary by color profile (GRACoL, SWOP, Fogra, etc.). Our output is the uncalibrated mathematical conversion — good for estimation, not for press-ready files.