Color Converter: Seamlessly Transform Color Formats Online
HEX, RGB, HSL and OKLCH conversions with live preview.
Paste a colour in any notation — HEX, RGB, HSL, or the modern OKLCH — and this converter returns every other format instantly with a live preview. OKLCH is the format worth learning: it is perceptually uniform, so changing lightness or hue produces the change your eye expects, which HSL does not.
HEX
#22c55e
RGB
rgb(34 197 94)
HSL
hsl(142.1 70.6% 45.3%)
OKLCH
oklch(0.723 0.192 149.6)
Join the Veojson dispatch
Want our design token starter kit built on OKLCH? Join the list.
One email, no spam, unsubscribe any time.
About this tool
Different color spaces suit different jobs: HEX for handoff, HSL for quick tweaks, and OKLCH for perceptually uniform palettes where lightness actually looks consistent across hues.
Why OKLCH matters
In HSL, two colors with the same lightness value can look wildly different. OKLCH is perceptually uniform, so generated palettes stay balanced.
Building tints and shades
Hold chroma and hue, vary lightness. That produces a coherent ramp far faster than nudging hex values by hand.
HEX, RGB, HSL and OKLCH — when to use each
HEX (#3B82F6) is compact and universal, and it is what design tools export. RGB is the same information in decimal and gains an alpha channel with rgba(). HSL describes a colour the way people talk about it — hue, saturation, lightness — which makes it easy to build a tint scale by hand, but its lightness value is not perceptual: hsl(60 100% 50%) yellow looks far brighter than hsl(240 100% 50%) blue despite both claiming 50% lightness. OKLCH fixes exactly that. Two OKLCH colours with the same L value genuinely look equally bright, so a palette generated by varying L produces even steps, and text contrast becomes predictable.
Building an accessible palette
Work in OKLCH and fix a lightness ladder — for example L values of 0.98, 0.95, 0.90, 0.80, 0.70, 0.60, 0.50, 0.40, 0.30, 0.20 — then apply the same ladder to every hue in your palette. Every colour at the same rung will have matching perceived brightness, which means a contrast pairing that works for one hue works for all of them. Then verify against WCAG: body text needs a contrast ratio of at least 4.5:1 against its background, large text and UI components need 3:1, and AAA asks for 7:1. Converting your chosen colour to HEX here and running it through a contrast checker takes seconds and prevents an accessibility audit failure later.
Wide-gamut colour and P3 displays
sRGB has been the web's default for decades, but modern phones and laptops display Display P3, which is roughly 25% larger. OKLCH can express colours outside sRGB, so a value like oklch(0.7 0.28 25) renders more vividly on capable screens while browsers clamp it sensibly elsewhere. If you need a guaranteed fallback, declare the HEX first and the OKLCH second in the same rule — browsers use the last value they understand.
Colour in CSS custom properties
Store colour tokens as raw channel values rather than complete functions so you can vary alpha without duplicating the token: --brand: 59 130 246 used as rgb(var(--brand) / 0.5), or the OKLCH equivalent. That single habit removes the usual explosion of near-identical colour variables and makes dark mode a matter of swapping a handful of L values rather than a whole palette.
The same colour in every notation
| Format | Value | Notes |
|---|---|---|
| HEX | #3B82F6 | Universal, exported by design tools |
| HEX with alpha | #3B82F680 | Last two digits are 50% alpha |
| RGB | rgb(59 130 246) | Decimal channels, 0–255 |
| RGBA | rgb(59 130 246 / 0.5) | Modern slash syntax for alpha |
| HSL | hsl(217 91% 60%) | Human-readable, not perceptual |
| OKLCH | oklch(0.62 0.19 259) | Perceptually uniform, wide gamut |
| CMYK (approx.) | 76, 47, 0, 4 | Print only — always proof before use |
WCAG contrast requirements
| Content | AA minimum | AAA minimum |
|---|---|---|
| Body text under 18pt | 4.5:1 | 7:1 |
| Large text 18pt+ or 14pt bold | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | — |
| Decorative or disabled elements | no requirement | no requirement |
How to use Color Converter
- 1
Open Color Converter
Everything runs on this page — there is nothing to install and no account required to use the free features.
- 2
Add your input
Paste or enter your values in the panel above. The tool updates as you type, so you can iterate quickly.
- 3
Review the output
Check the result, copy it with one click, and adjust the options until it matches what your system expects.
- 4
Take it further
Use the utility & formatting tips below to make the result production-ready, then unlock the gated extras via the form above.
Best practices
- Keep a canonical format for your team and enforce it automatically rather than by review comments.
- Watch for encoding: UTF-8 in, UTF-8 out, and no stray byte-order marks.
- Spot-check edge cases — empty values, very long strings and non-Latin characters.
- Automate the conversion in your build once the output looks right here.
Color Converter — Why it matters
Formatting and conversion chores are individually trivial and collectively enormous — they quietly consume hours of engineering time every week.
Doing them instantly and consistently removes a whole category of copy-paste mistakes.
Related free & paid tools
| Tool name | Type | Key features | Link |
|---|---|---|---|
| CoolorsOffer | Freemium | Fast palette generation and export | Visit |
| Adobe Color | Free | Harmony rules and accessibility checks | Visit |
| oklch.com | Free | Perceptual OKLCH picker for modern CSS | Visit |
| FigmaOffer | Freemium | Design tokens and shared colour styles | Visit |
Some links marked Offer are partner links. They cost you nothing extra and help keep these tools free.