Colors & design
Color Converter
Every color format you need, converted live with a preview.
| HEX | | |
|---|---|---|
| RGB | | |
| HSL | | |
| OKLCH | |
Paste a HEX code, an rgb() or hsl() value, or just type a CSS color name like "teal" — the converter instantly shows the same color in HEX, RGB, HSL and OKLCH, the modern color space now supported across browsers. A live swatch confirms you have the right shade, and every format copies with a single click, ready to drop into your stylesheet, design tool or brand guidelines. It's the quickest way to translate a designer's HEX value into HSL for easy tweaking, or to migrate a palette to OKLCH without doing any math. Free, no account, and nothing ever leaves your device.
How does it work?
- Type a color (HEX, rgb(), hsl(), CSS name) or use the visual picker.
- HEX, RGB, HSL and OKLCH values update as you type.
- Check the shade with the live preview swatch.
- Copy the format you need with one click.
Frequently asked questions
Which input formats are supported?
HEX codes with 3, 6 or 8 digits (#f00, #ff0000, #ff0000cc), rgb() and rgba(), hsl() and hsla(), plus all CSS named colors (red, rebeccapurple, teal…).
What is OKLCH and why should I care?
OKLCH is a perceptually uniform color space: colors with the same lightness value actually look equally bright. It's supported in all modern browsers and makes building consistent CSS palettes much easier than HSL.
When is HSL better than HEX?
HSL describes a color by hue, saturation and lightness, so it's human-readable: you can create lighter, darker or muted variants by changing a single number instead of guessing HEX codes.
Can I convert colors with transparency?
Yes — enter an 8-digit HEX code or an rgba()/hsla() value and the alpha channel is carried through to every format that supports it.