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.

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

Use in the design system generator

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.

Color converter runs entirely in your browser — nothing you enter is sent to a server.

How to use this tool

Frequently asked questions

Related tools

Related guides