Color Code Converter
Convert any color between HEX, RGB, HSL, CMYK, and OKLCH — instantly, with one-click copy for every format.
Colors you convert will appear here — saved in this browser only.
One color, every format
The rose pink of a macaron shell — here's the exact same color in all five formats this converter outputs.
Macaron rose
#D17180rgb(209, 113, 128)hsl(351, 51%, 63%)cmyk(0%, 46%, 39%, 18%)oklch(66.1% 0.121 11.0)Why five color formats?
Every environment speaks a different color language. HEX rules the web and design handoffs, RGB is what screens actually emit, HSL is the easiest to reason about when you want "the same hue, a bit lighter", CMYK approximates ink for print work, and OKLCH is the modern CSS color space where equal steps finally look equal to the human eye. This converter keeps all five in sync from a single input, so you can grab whichever notation the job needs.
Which format should you actually use?
All five describe the same color — they differ in what they make easy.
- HEX — the default for CSS and design handoff. Compact, universally understood, but opaque to read: you can't tell what
#4D9FFFlooks like without seeing it. - RGB — what screens and JavaScript actually work with. Use it when you're doing math on colors in code (canvas, WebGL, image processing) or need
rgba()transparency. - HSL — the easiest to tweak by hand: want it darker, drop the L. Its trap: equal lightness values do not look equally light — HSL yellow at 50% is far brighter than HSL blue at 50%.
- CMYK — a print approximation. Useful for sanity-checking whether a screen color will survive on paper, but real print conversion depends on the printer's ICC profile, not a formula.
- OKLCH — the modern pick for design systems. Perceptually uniform, so shifting hue or lightness behaves predictably, and it's now native in CSS. If you're building tokens today, store OKLCH.
Small print of color conversion
Three things that surprise people the first time they convert colors seriously.
- Round-trips drift. Colors live in 8-bit steps (0–255), but HSL and OKLCH use decimals. Converting HEX → HSL → HEX can land one step away from where you started. Always treat one format as the source of truth.
- CMYK is device-dependent. The values here use the standard formula-based conversion — fine for judgment calls, not a contract with a print shop.
- OKLCH can exceed the screen. Some lightness/chroma combinations describe colors your monitor can't show; they get clipped to the nearest displayable color. If two different OKLCH values render identically, you've left the sRGB gamut.
Related tools & guides
- Shades & Tints Generator — Expand the converted color into a full Tailwind-style 50–900 scale.
- Color Harmony Generator — Build matching schemes from the color you just converted.
- HEX vs RGB vs HSL vs OKLCH — Why HSL lies about lightness and why OKLCH is replacing it.
Frequently asked questions
What input formats are accepted?
HEX with or without the hash (#5B5BD6, 5B5BD6, or short #5BD), rgb(91, 91, 214), and hsl(240, 60%, 60%). You can also just click the swatch and pick visually.
What is OKLCH and why should I care?
OKLCH is a perceptually uniform color space now supported in CSS. Unlike HSL, changing only its lightness value produces steps that actually look evenly spaced, which makes it ideal for building color scales — try the Shades generator to see the idea in action.
Is the CMYK value print-accurate?
It's the standard formula conversion, which is a good starting point — but real print color depends on the printer's ICC profile, paper, and inks. For critical brand work, always confirm with your print shop's profile.