Color Format Converter
Paste hex, rgb, hsl or oklch. Every other format updates as you type. Copy any one. The math stays in this tab.
Paste a color. The rows update as you type.
One box. The rest update while you type.
I kept opening one page for hex to rgb, then another URL for hsl, then a third when I needed oklch. Each one wanted a Convert click. Each one put ads around the answer. On a phone the input and the result were not even on the same screen.
This page is one field. Type #ff0000 or rgb(255, 0, 0) or oklch(0.628 0.2577 29.23) or tomato. The rows below fill in. Copy the one you need. A Convert button would only slow that down, because the work is a parse, not a job you send away.
The old pages stopped at HSL
Most of those converters were finished around 2012. Hex, rgb, hsl, maybe cmyk. That was the CSS people had. Then browsers shipped oklch, lab, lch and display-p3. Design tools started handing you oklch() strings. The old pages still do not print them.
I ranked this idea thirteenth out of 1,754 in the queue, score 9.30, about six hours of work. The card said people still search hex to rgb. Bing filled in 19 completions on that phrase alone. A Hacker News thread titled What are OKLCH colors? hit 859 points and 183 comments. The search is old. The format people actually paste now is new.
Out of gamut is not a crash
oklch can describe a color sRGB cannot show. The hex row is the clipped sRGB byte. The oklch row keeps what you typed, rounded. That is the honest split. If you need the wide-gamut print, copy the display-p3 row.
Alpha stays. rgba(255, 0, 0, 0.5) prints an eight-digit hex, hsla, and a slash on oklch. RGB 0-1 is on the list because people search it: 1, 0, 0 for red. A hash is optional. #f00 and f00 both work. Navy and rebeccapurple work too.
What this page will not do
It will not upload the color. After the page loads you can unplug the cable and still convert. The string is not saved. Refresh and the field is empty. Close the tab and the paste is gone.
If you need two colors against WCAG, use the contrast checker. If you need inches to cm, use the unit converter. If you want a PDF of a spec that now has the right oklch, paste it into Markdown to PDF. If you want the longer version of why the Convert button was the whole page, I wrote it up in The Convert Button Was the Whole Page.
Common questions
Does the color leave this tab?
No. The parse runs in JavaScript here. After the page has loaded you can unplug the cable and still get oklch from a hex. Mixpanel and Google Analytics load with Softery.io. They see that someone opened the tool. They do not get the string you typed. They get a size bucket, and that a copy happened.
Why is there no Convert button?
The work is a parse, not a job you send away. Type, and the rows update. A Convert click was the whole product on the old pages, because each URL did one pair and then showed an ad. Here every format is already on the page.
What is OKLCH, and why is it here?
OKLCH is a CSS color space with lightness, chroma and hue. Browsers print it as oklch(). Design tools started handing those strings out. The converters that stopped at hex, rgb and hsl around 2012 still do not print it. This page does, plus lab, lch and color(display-p3).
Why did the hex change when I pasted oklch?
oklch can describe a color sRGB cannot show. The hex row is the clipped sRGB byte, the one a hex field can hold. The oklch row keeps the values you pasted, rounded. Copy display-p3 when you want the wide-gamut print.