Convert between HEX, RGB, HSL and OKLCH formats.
Updated
Quick start
Paste any CSS colour. See every other format — Hex, RGB, HSL, HSV, HWB, OKLCH, CMYK — and copy with one click.
Hex, rgb(), hsl(), oklch() or a CSS named colour like 'tomato' — the parser handles them all. Or use the native picker.
All formats appear in a single list with the parsed swatch preview. Alpha channel is preserved in formats that support it.
Hit Copy on any row to grab that format's value. Perfect for pasting into Figma, Tailwind config, or CSS files.
In-depth guide
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.
#fff, #4ade80, #4ade80aa (with alpha).tomato, rebeccapurple, …).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.
Any input with alpha < 1 will appear in the output formats that support it:
When to reach for it. Use it to translate a colour between HEX, RGB, HSL and OKLCH without losing your place.
When something else is better. Gamut matters — a vivid OKLCH colour may have no exact sRGB equivalent and will be clipped.
The pitfall to watch. Rounding on each hop (HEX has only 8 bits per channel) can drift a colour slightly after several conversions.
Everything runs on your device. The values you enter are processed locally in this browser tab — EpitomeTool does not send your input to a server, store it, or log it. That means you can use the tool offline once the page has loaded, and refreshing the tab wipes the slate.
Hex (#fff, #4ade80, #4ade80aa), rgb()/rgba(), hsl()/hsla(), hwb(), oklch(), oklab() and CSS named colours (tomato, rebeccapurple). Pick one — every other format gets generated.
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.
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.
The last two characters are alpha (transparency) in hexadecimal. #4ade8080 = 50% opacity. Modern browsers all accept hex with alpha.
Yes. Parsing, conversion and preview run entirely in your browser. No requests fire during use.
Not yet — this tool is single-colour for now. A batch CSV mode is on the roadmap.
Keep exploring
Hand-picked utilities that pair well with the one you're on — all free, client-side, and zero-signup.
Shrink PDF file size without uploading to a server.
Body Mass Index with metric / imperial inputs and WHO category bands.
Combine multiple PDFs into one in your browser.
Split a PDF by pages or page ranges, download as zip.