Color Code Converter
Convert colors between HEX, RGB, HSL, and CMYK formats with a live color preview.
How to Use
- Enter a color value in any supported format, or use the color picker.
- All other formats update instantly.
- Click any value to copy it to your clipboard.
When to Use This
- Handing a brand color to a printer who asked for CMYK when the only reference you have is a hex code from a stylesheet.
- Deriving a hover state by reading a color's HSL lightness, nudging that one number, and taking the hex value back out.
- Translating rgb() values out of a design file into the hex notation a theme configuration file expects.
- Checking what an unfamiliar hsl() declaration in someone else's stylesheet actually looks like, using the live swatch beside it.
Frequently Asked Questions
About This Tool
RGB, HSL and CMYK are not three spellings of one idea. RGB describes light added together and is what a screen emits. HSL is a reshaping of the same RGB cube into hue, saturation and lightness, so it converts back and forth exactly and is easier to reason about when you want a lighter version of a color. CMYK describes ink absorbing light, and converting RGB to CMYK is only fully meaningful once you know which inks and which paper.
This page keeps a color picker, a swatch and four text fields in step. HEX is expanded from three digits to six when needed, RGB to HSL uses the standard maximum and minimum channel formula, and CMYK comes from the naive formula where black is one minus the largest channel. Every output is rounded to a whole number before it is written back. Double-clicking a field copies its value.
Notes & Limits
- The HEX field takes three or six digits only. Eight-digit hex with alpha, rgba() and hsla() are rejected, so transparency must be handled separately.
- CMYK here is the arithmetic conversion, not a color-managed one. A print shop working to a specific ICC profile will produce different numbers from the same color.
- Hue, saturation and lightness are rounded to whole numbers, so converting hex to HSL and back can land one step away from where you began.
- Named CSS colors and the lab(), oklch() and color() notations are not parsed. Only HEX, rgb(), hsl() and cmyk() are recognized.