Convert colors
Free online color converter that recognises HEX (3, 4, 6, 8 digits), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), the new CSS Color 4 syntax (space-separated), all 147 CSS named colors and any of these with alpha. Output every format at once, copyable individually. A built-in palette generates shades (darker steps), tints (lighter steps), complementary, analogous, triadic and tetradic harmonies. A WCAG contrast checker shows whether the color meets AA / AAA against white and black for normal and large text. Bring up the OS eyedropper (Chrome / Edge) to pick any color on screen.
How to use
Any format: HEX, RGB, HSL, OKLCH, even CSS names like tomato.
All eleven appear at once, copy with one click.
Shades, tints and harmonies derived from your color.
WCAG contrast against white and black with AA/AAA verdict.
Convert between 11 color formats, build palettes, check WCAG contrast — all in one place
All formats
Contrast (WCAG)
Palette
Recent
Features
Typical uses
- Look up the OKLCH of a brand HEX color for a CSS Color 4 design system.
- Convert RGB pixel values from a screenshot into HSL for a chart axis.
- Find a complementary color for a button hover state.
- Check whether body text meets WCAG AA against a chosen background.
- Pick a color from another tab or window via the system eyedropper.
Why this one
Many converters only do HEX↔RGB↔HSL. We include OKLab and OKLCH — the new CSS Color 4 spaces that match human perception far better than HSL (no surprise jumps in lightness when changing hue). The palette generation runs in OKLab so steps look perceptually even, not maths-even. Contrast is computed in WCAG 2 luminance space with the 4.5:1 and 3:1 thresholds spelled out.
Common questions
What is OKLCH?
A perceptually-uniform color space introduced as part of CSS Color 4. Unlike HSL — where lightness 50% can look very different at different hues — OKLCH lightness is consistent across the spectrum, which makes design tokens predictable. If you are building a modern design system, OKLCH is worth learning.
Does my color include alpha?
Yes — any of the eight-digit HEX, rgba(), hsla(), or alpha-suffix space syntax (rgb(255 0 0 / 50%)) is parsed and reflected in every output format that supports alpha.
Why does my palette of shades look "stepped" rather than smooth?
Shades and tints are interpolated in OKLab and then projected to your target space, so each step is perceptually equal — that often produces visually smoother results than a naive HSL lightness change, but very dark or very light starting colors clip near the endpoints.
CMYK — print-accurate?
No — the CMYK output is a quick screen-space conversion, not an ICC-profile-aware one. For print, take the CMYK you see here as a starting point and verify in Adobe / Affinity tooling against the actual press profile.
Eyedropper does not work — why?
The EyeDropper API is only available in Chromium-based browsers (Chrome, Edge, Brave) at the moment. Firefox and Safari will hide the button with a tooltip if not supported.
Are HEX names case-sensitive?
No, HEX is hex (0-9, a-f or A-F). We emit lowercase by default to match the CSS Color 4 recommendation; the output is still valid however you re-paste it.
Mobile?
Yes. The eyedropper is not available on mobile browsers — use the native color picker instead.
We can — and it's free! Just send us a quick message with your idea. If you'd like to discuss it in detail, leave your email and we'll get back to you. You can stay anonymous.
