Color Converter
Convert any color between HEX, RGB, HSL, HWB, and OKLCH instantly. Includes a live swatch and one-click copy for each format.
Use this free color converter to translate any color between HEX, RGB, HSL, HWB, and OKLCH at a glance. It is built for designers and developers who need to move colors between tools — Figma, CSS, Tailwind, design systems — without losing fidelity or hunting for the right format.
How to use it
No account, no upload — it all happens on your device.
Format cheat sheet
What each notation says about the same color.
| Format | Example (teal accent) | Best for |
|---|---|---|
| HEX | #0F766E | CSS, design tokens, anything compact and copy-friendly. |
| RGB | rgb(15 118 110) | Canvas / WebGL APIs, image editors, alpha compositing. |
| HSL | hsl(173 78% 26%) | Programmatic tweaks — hold hue, change lightness for variants. |
| HWB | hwb(173 6% 54%) | Mental model: pick a hue, then mix in white and black. |
| OKLCH | oklch(48% 0.07 175) | Modern, perceptually uniform — best for accessible palettes. |
Why OKLCH is the modern default
Equal lightness numbers look equally bright.
In HSL, two colors with the same lightness value can look wildly different in actual brightness — pure yellow at 50% feels far brighter than pure blue at 50%. That makes it hard to build palettes that pass contrast checks.
OKLCH is based on the OKLab perceptual color space, so the first number (lightness) tracks how the human eye actually perceives brightness. Generating shades of a brand color, or ensuring all text in a palette meets WCAG 4.5:1, is far easier when you can keep lightness steady and only vary chroma and hue.
Browser support is broad in 2024+ (Chrome, Edge, Firefox, Safari 15.4+). For older targets, pair OKLCH with a HEX fallback.
When to use which in a design system
- Source of truth: OKLCH in your design tokens. It survives lightness math without unexpected shifts.
- Ship to CSS: OKLCH or RGB. HEX still works fine; just skip it if you also serve transparency.
- Quick web look-ups: HEX. Pasting
#0F766Einto anything is universally understood. - Programmatic variants: HSL or OKLCH. Drop lightness 10–20% for a darker hover state without changing hue.