Color Converter
Paste a color in any format — HEX, RGB, HSL, HSB, CMYK, or a CSS name — and convert to all of them at once.
Understanding Color Models and Conversions
This all-in-one converter takes a color in any common format — HEX, RGB/RGBA, HSL/HSLA, HSB/HSV, CMYK, or one of the 148 CSS named colors — and instantly expresses it in every model you need for web and print: normalized HEX, RGB, HSL, HSB/HSV, and CMYK. Translating between these spaces is essential for matching brand guidelines, writing CSS, and preparing artwork for print.
HEX & RGB
HEX is a base-16 form of RGB. Both describe an additive mix of red, green, and blue light (0–255 per channel) — the native model for screens and CSS.
HSL & HSB
Both use Hue (0–360°) but differ on the rest: HSL pairs Saturation with Lightness, while HSB (a.k.a. HSV) pairs Saturation with Brightness — the model most color pickers use.
CMYK
Cyan, Magenta, Yellow, and Key (black) is the subtractive model used by printers. The values here are a device-independent approximation — exact output depends on your paper and ICC profile.
100% client-side
Every formula runs in your browser — no color data is ever uploaded. Need a single direction instead? Try the dedicated HEX → RGB, RGB → HSL, or HEX → CMYK tools.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Seeing one colour in every common notation at once.
- Converting a colour without picking the right single-purpose tool first.
- Comparing how a colour is expressed across models.
- Getting a print and a screen notation side by side.
- Checking that two notations describe the same colour.
How it works in practice
A worked example
A brand colour defined for screen has to go to a printer, who has asked for it in CMYK, and you want to see what the trip costs.
#00f2fe
HEX #00f2fe RGB rgb(0, 242, 254) HSL hsl(183, 100%, 50%) HSB hsb(183, 100%, 100%) CMYK cmyk(100%, 5%, 0%, 0%) and pasting that CMYK back in gives #00f2ff
Four of those five are the same colour written differently and the last one is not. Hex, RGB, HSL and HSB are exact restatements — the same three channel values, rearranged — so a round trip through any of them returns the value you started with. CMYK is a different model with a different gamut, and the conversion here rounds each component to a whole percent, which is enough on its own to move the answer: paste the CMYK back and the blue channel returns as 255 instead of 254.
The edge case that catches people
A one-value drift sounds harmless and is the smaller half of the problem. A plain arithmetic CMYK conversion has no colour profile in it, and a real printer's output depends entirely on which profile, which ink set and which paper — so the numbers above are a starting point for a conversation with a print shop rather than a specification. The gamuts do not even overlap: a saturated screen cyan like this one cannot be reproduced in process ink at all, so something has to give whichever numbers you send.
When not to use this tool
For anything a person has to be able to read, the conversion is the easy part and the wrong question. Two colours that look strikingly different can be identical in brightness, so a palette assembled by converting between formats still has to be checked for contrast separately. And for a colour that must match across media, the answer is a managed profile and a proof print, not a formula — this page tells you what a colour is, and only measurement tells you what it will look like.
Frequently Asked Questions
- Which formats can I paste in?
- Hex in 3, 4, 6 or 8 digits, `rgb()`/`rgba()`, `hsl()`/`hsla()`, `hsb()`/`hsv()`, `cmyk()`, and any of the 148 CSS named colours. The input is detected automatically, so you do not have to say which one it is.
- Why does CMYK not round-trip exactly?
- Because the conversion is the simple arithmetic one, with no colour profile or ink model behind it. Real CMYK output depends on paper and press, so treat these numbers as an approximation for screen use rather than a print specification.
- What is the difference between HSL and HSB?
- Both start from the same hue, but HSL's lightness runs from black through the pure colour to white, while HSB's brightness tops out at the pure colour. At 100% they mean different things — HSL 100% is white, HSB 100% is fully lit.
- What do the extra hex digits mean?
- Alpha. `#RGBA` and `#RRGGBBAA` append transparency, so `#FF0000FF` is opaque red and `#FF000080` is about half transparent. The four-digit form expands like the three-digit one, each digit doubled.
- Do named colours have exact values?
- Yes, all 148 are defined to exact RGB values in the CSS specification — `tomato` is precisely `#FF6347`. The names are historical and inconsistent, which is why several near-identical greys and whites exist.
- Should I use oklch instead?
- For new work with modern browser support, often yes — it is perceptually uniform, so equal changes in lightness look equal, which hex and HSL do not manage. This converter covers the formats you will encounter in existing code.
Common errors and gotchas
- Treating the CMYK output as print-ready, when it is a device-independent approximation.
- Confusing HSB and HSL in the output, since both appear and are defined differently.
- Losing alpha, which several of the notations cannot carry.
- Round-tripping through 8-bit values repeatedly, accumulating error.
- Assuming a notation is supported by CSS, when HSB and CMYK are not.