Color converter
Convert between HEX, RGB, HSL, CMYK and OKLCH in one place. Paste any color in any format and copy all five equivalents instantly, with a live preview.
Convert any color between HEX, RGB, HSL, CMYK and OKLCH in a single converter. Type or paste a hex code, rgb() or hsl() — even a CSS color name like tomato — and read all five equivalents at once.
One URL replaces three separate round-trip converters, and the live preview updates as you type. Copy any format, or seed the design system generator with the result.
Live preview
#47003A- HEX
- #47003A
- RGB
- rgb(71, 0, 58)
- HSL
- hsl(311, 100%, 14%)
- CMYK
- cmyk(0%, 100%, 18.3%, 72.2%)
- OKLCH
- oklch(0.27 0.119 337.9)
Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.
How to use this tool
- Paste any color — HEX, rgb() or hsl() — or pick one from the swatch.
- All four formats (HEX, RGB, HSL, OKLCH) update live with one-click copy for each.
- Use the button to seed the full design system generator with the same color.
Frequently asked questions
- Which color formats are supported?
- Paste HEX, rgb() or hsl() — even CSS-color keywords you type are resolved. The tool shows HEX, RGB, HSL, CMYK and OKLCH simultaneously so you never convert twice.
- Why is there one converter instead of separate pages?
- HEX, RGB, HSL, CMYK and OKLCH describe the same color. One page that shows every format at once is faster than three one-way converters, and there is one URL to bookmark and link to.
- What's the difference between CMYK and the on-screen formats?
- CMYK is subtractive ink percentages used for print — packaging, stationery and brand collateral. On screen it is a translation, not a native language: your code and design system consume the HEX, RGB, HSL or OKLCH versions shown alongside it.
- Can I turn the result into a full design system?
- Yes — a one-click link seeds the design system generator with your color, deriving scale, palette, tokens, light and dark themes, and exports from it.
Related tools
Related guides
Color theory · 21 Aug 2026
HEX vs HSL vs OKLCH: which color space should you use?
Three color spaces, three jobs. Here's what HEX, HSL and OKLCH actually are and when each earns its place.
Color theory · 8 Sept 2026
Famous brand colour palettes: exact hex values and how to use them
Spotify green, Stripe indigo, Netflix red — exact brand hex values plus a workflow for turning any brand colour into an accessible design system.
Color theory · 9 Sept 2026
HEX, RGB, HSL and CMYK: which colour format should you use?
Four formats, one colour. When to write hex, when to reach for HSL, why CMYK only matters for print, and why OKLCH beats all of them for scaling colours.
Color converter runs entirely in your browser — nothing you enter is sent to a server.