Color Converter
Paste any color — HEX, RGB, HSL, OKLCH or a CSS name — and get every other format at once, with a live swatch and picker. All in your browser.
That doesn't look like a valid color.
- HEX
-
- RGB
-
- HSL
-
- OKLCH
-
One color, every format
Designers think in HEX, CSS authors reach for HSL or the newer OKLCH, and canvas or image code wants raw RGB. This converter takes whichever you have and gives you the rest, so you can move a color between a design file, a stylesheet and code without hand-translating the numbers.
How to use it
- Enter a color. Type or paste a HEX, RGB, HSL, OKLCH or named color, or click Pick to choose one visually.
- Read the conversions. The swatch updates live and each format appears below, ready to copy with one click.
- Explore. Hit Random to jump to a new color and see how the formats relate.
Frequently asked questions
Which color formats does it support?
You can paste a HEX code (#f59e0b or #f59e0bcc with alpha), an rgb()/rgba() value, an hsl()/hsla() value, an oklch() value, or a CSS named color like 'tomato'. The tool reads it with the browser's own color engine, so anything valid CSS understands works, and it shows HEX, RGB, HSL and OKLCH in return.
What is OKLCH?
OKLCH is a modern, perceptually uniform color space (Lightness, Chroma, Hue) supported in all current browsers. Equal numeric steps look like equal visual steps, which makes it great for building accessible palettes and smooth gradients — something HSL doesn't guarantee.
Does it handle transparency?
Yes. If your color has an alpha channel — an 8-digit HEX, an rgba(), hsla() or oklch() with a slash alpha — the converted outputs keep that transparency. The preview swatch shows the solid color.
Is my color sent to a server?
No. Every conversion runs locally in your browser using the canvas color parser and standard color math. Nothing you enter is uploaded.