Skip to content
epitometool

HEX / RGB / HSL converter

Color tools

Convert between HEX, RGB, HSL and OKLCH formats.

Updated

Input

Preview

on white text
as text colour

All formats

Hex
#4ade80
RGB
rgb(74 222 128)
RGB %
rgb(29.02% 87.06% 50.20%)
HSL
hsl(142 69.2% 58.0%)
HSV
hsv(142 66.7% 87.1%)
HWB
hwb(142 29.0% 12.9%)
OKLCH
oklch(80.03% 0.1821 152)
CMYK
cmyk(66.7% 0.0% 42.3% 12.9%)

Quick start

How to convert between colour formats

Paste any CSS colour. See every other format — Hex, RGB, HSL, HSV, HWB, OKLCH, CMYK — and copy with one click.

  1. Step 1
    Paste your colour

    Hex, rgb(), hsl(), oklch() or a CSS named colour like 'tomato' — the parser handles them all. Or use the native picker.

  2. Step 2
    Browse every format

    All formats appear in a single list with the parsed swatch preview. Alpha channel is preserved in formats that support it.

  3. Step 3
    Copy a format

    Hit Copy on any row to grab that format's value. Perfect for pasting into Figma, Tailwind config, or CSS files.

In-depth guide

Colour converter — Hex, RGB, HSL, OKLCH, CMYK in one panel

Paste any CSS colour and see every other format on one screen — Hex, RGB (numeric and percentage), HSL, HSV, HWB, OKLCH and CMYK. One-click copy on every row, live swatch preview.

Supported input formats

  • Hex — #fff, #4ade80, #4ade80aa (with alpha).
  • rgb() / rgba() — modern slash-separated or legacy comma form, accepts 0-255 or percentages.
  • hsl() / hsla() — degrees + percentages.
  • hwb() — hue + whiteness + blackness.
  • oklch() / oklab() — perceptually-uniform spaces from CSS Color Module Level 4.
  • Named colours — 148 CSS keyword colours (tomato, rebeccapurple, …).

Which format to use when

  • Hex — most compact, widely supported, easy to copy/paste. Default for design files.
  • RGB — useful when you need to interpolate channels (e.g. fade animations).
  • HSL — intuitive for picking lighter/darker variants of the same hue, but not perceptually uniform.
  • HSV — common in colour-pickers; cousin of HSL with value instead of lightness.
  • HWB — newer CSS format; intuitive "this hue plus N% white and M% black".
  • OKLCH — modern design-systems' favourite. Lightness is perceptually uniform, so generating an 11-step scale (50, 100, 200…) gives evenly-spaced shades.
  • CMYK — print-oriented. Use only as a starting point; trust your printer's ICC profile for production.

Why OKLCH is taking over

HSL's lightness axis isn't perceptually uniform — a 10% lightness step looks much bigger in yellow than in deep blue. That's why HSL-generated brand scales feel uneven, with some shades appearing nearly identical and others jumping.

OKLCH (and the underlying OKLab) maps lightness so equal numeric distances feel equal to the eye. Tailwind v4, Adobe and most modern design-token systems are migrating to it for that reason. The format: oklch(L% C h) — lightness 0-100%, chroma (saturation) 0-0.4, hue 0-360.

Alpha and transparency

Any input with alpha < 1 will appear in the output formats that support it:

  • Hex: 8 characters — last two are alpha (00 = transparent, ff = opaque).
  • rgb() / hsl() / oklch(): slash-separated alpha at the end.
  • CMYK / HSV / HWB: no alpha channel exists in the format; the output uses the colour as-if-opaque.

Frequently asked questions

What colour formats can I paste in?

Hex (#fff, #4ade80, #4ade80aa), rgb()/rgba(), hsl()/hsla(), hwb(), oklch(), oklab() and CSS named colours (tomato, rebeccapurple). Pick one — every other format gets generated.

What's OKLCH and why is it included?

OKLCH is a perceptually-uniform colour space adopted by CSS Color Module Level 4. Equal numeric steps in L, C or h look equally large to the eye — unlike HSL where a 10% lightness jump looks tiny in yellow and huge in blue. It's quickly becoming the recommended way to define brand palettes.

How accurate is the CMYK output?

It's a naive 'remove the black' conversion that works for previewing screen colours. For print production use your printer's ICC profile and a colour-management workflow — the screen-to-print transformation isn't a one-line formula.

Why does my hex have 8 characters?

The last two characters are alpha (transparency) in hexadecimal. #4ade8080 = 50% opacity. Modern browsers all accept hex with alpha.

Does this work offline?

Yes. Parsing, conversion and preview run entirely in your browser. No requests fire during use.

Can I convert in bulk?

Not yet — this tool is single-colour for now. A batch CSV mode is on the roadmap.

Keep exploring

More tools you'll like

Hand-picked utilities that pair well with the one you're on — all free, client-side, and zero-signup.

More color tools

See all →

Popular across EpitomeTool

Browse all →
Browse all 59+ free tools