Labs

Color Converter

Paste any colour — hex, rgb(), hsl(), hwb(), oklch(), a name — and get every format back, ready to copy.

Enter a colour
Colour —
Opacity100%
Formats —
Every format of your colour will appear here
Settings Lowercase hex
How It Works

How to Use Color Converter in 3 Steps

1

Enter a colour

Type anything a browser understands — #1e88e5, 1e88e5, rgb(30,136,229), hsl(207 77% 51%), oklch(60% 0.15 250), dodgerblue — or use the picker.

2

Read every format

HEX, RGB, HSL, HWB, CMYK and OKLCH are listed together with a live swatch. Drag Opacity to add alpha to all of them.

3

Copy what you need

Each row has its own copy button; the toolbar Copy grabs all formats as text and Download saves them as JSON.

FAQ

Color Converter — Frequently Asked Questions

Which input formats are accepted?

Anything valid in CSS Color Level 4: hex (3/4/6/8 digits, with or without #), rgb()/rgba(), hsl()/hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(), the 148 named colours and transparent. Parsing is done by the browser itself, so it is always up to date.

How accurate is CMYK?

CMYK here is the simple formula print designers use for a quick look (no ICC profile). Real print conversion depends on the paper and press profile — use your print software for final values.

What is OKLCH and why include it?

OKLCH is the perceptually uniform colour space now supported in all modern browsers. Equal steps in L look equally bright, which makes it the best space for building palettes and dark-mode variants. Values are rounded to what CSS tools normally display.

Why did my 8-digit hex lose its alpha?

Opacity is controlled by the slider so every output stays in sync. Pasting #1e88e580 sets the slider to 50% automatically; move it to change the alpha in all formats at once.

Is my input sent anywhere?

No. Everything is computed by JavaScript in your browser tab. Nothing is uploaded, logged or stored by Toolity.