Color Converter
Hex, RGB, HSL and OKLCH in one place, with sliders and an eyedropper.
Colors are converted in this page. Nothing you type or pick with the eyedropper is transmitted or stored.
Designers have started writing colors as oklch(0.62 0.19 260), and half the tools in circulation still cannot read them. This converter speaks all four common notations in both directions: paste hex, rgb(), hsl() or oklch() and the other three appear instantly, each with its own copy button, each precise enough to paste straight back into a stylesheet.
More about Color Converter
OKLCH is worth adopting for one plain reason: its first number is lightness as your eye judges it. Two colors with the same L genuinely look equally bright, so a palette built by varying hue at fixed L stays even — where the same exercise in HSL produces some shades that glow and others that turn muddy. That is why CSS added the notation, and why design systems are migrating to it.
The caveat is that OKLCH can name colors an ordinary screen cannot show. When you ask for one of those, this tool reduces the chroma — the vividness — just until the color fits sRGB, and labels the result with a gamut badge so the mapping is never silent.
Sliders in each space let you nudge a value and watch every notation follow, and on desktop Chromium an eyedropper samples any pixel on your screen. It all runs inside the page.
- Parses hex (3, 4, 6 or 8 digits), rgb(), hsl() and oklch(), in modern or legacy syntax
- OKLCH colors outside the sRGB gamut are chroma-mapped and clearly badged
- Sliders for every space — RGB, HSL, OKLCH — plus an alpha slider
- A copy button per format, with outputs that re-parse to the same 8-bit color
- Screen eyedropper where the browser offers one (desktop Chrome and Edge)
- Transparency previewed against a checkerboard instead of a white lie
- Gray colors show "hue —" rather than a meaningless angle
How to use it
- 1Paste or type a color in any supported notation.
- 2Read the other formats and copy the one your code needs.
- 3Drag the sliders to adjust the color in whichever space feels natural.
- 4Watch for the gamut badge when an OKLCH color cannot exist in sRGB.
Questions
What is OKLCH and why would I use it over HSL?
Its lightness axis matches how bright a color actually looks, so scales built in OKLCH stay visually even where HSL drifts. Every modern browser supports the notation natively.
What does the "out of sRGB gamut" badge mean?
The OKLCH color you asked for is more vivid than an sRGB screen can reproduce. The tool reduced its chroma until it fits and is telling you it did so.
Why does the hue show a dash for gray colors?
When saturation or chroma is zero, every hue angle produces the same gray, so no single angle is the true one. A dash is more honest than an arbitrary number.
Why is the eyedropper button missing in my browser?
The EyeDropper API exists only in desktop Chromium browsers such as Chrome and Edge. Firefox, Safari and mobile browsers do not offer it, so the button hides itself there.
How precise are the converted values?
OKLCH is written with three decimals for lightness and chroma and two for hue, the precision CSS itself serializes at. Pasting an output back reproduces the identical 8-bit color.