Color Converter
Convert HEX, RGB, HSL, HSV, CMYK and OKLCH in real time, with alpha kept intact.
How to use
- Paste or type any color value in the input box. HEX, rgb(), hsl(), hsv(), cmyk() and oklch() all work.
- While the value is valid, every format below refreshes at once, and the large swatch shows the current color.
- Click Copy next to a row to take that single value, or click Copy all formats to take every row at once.
- The color field on the right writes back to the input box and keeps the current alpha value.
- When the input is invalid, a red hint names the character that failed, and the caret jumps there on blur.
FAQ
Why are there so many ways to write one color?
What is the difference between HSL and HSV?
How do I write a color with transparency?
Can I print with these CMYK values?
How to use
- Type a color value
Paste or type any supported color value. HEX accepts 3, 4, 6 or 8 digits, and rgb(), hsl(), hsv(), cmyk(), oklch() and oklab() are also accepted.
- Read every format
Once the value is valid, the rows below refresh together. The large swatch shows the current color and the automatic text color.
- Copy what you need
Use the Copy button on a row for one value. The Copy all formats button takes every row together with its label.
- Pick or roll a color
The color field on the right writes back into the input box and keeps alpha. Random color gives you a quick starting point.
- Fix an invalid value
A red hint names the character that failed. The caret moves to that character when the input loses focus.
About this tool
The page runs seven common color notations through one conversion pipeline. Whatever you type, the tool resolves it into red, green and blue channels plus an alpha value, then derives every other format with published formulas. sRGB and linear light are linked by the standard transfer curve. OKLab and OKLCH use the matrix coefficients published by Björn Ottosson. HSL and HSV follow their textbook definitions. Because a single pipeline feeds all outputs, the rows stay consistent with each other, and nothing leaves your browser.
Alpha survives the whole chain. The last two digits of an eight digit HEX and the fourth argument of rgba() describe the same alpha. The number after the slash in oklch() is that same alpha again, and the tool carries it into every output row. A checkerboard sits behind the preview, so semi transparent colors read correctly. The label on the swatch switches between black and white by relative luminance, and the row shows the resulting contrast ratio. That helps you judge whether text stays legible on the color.
How it works
Red, green and blue values on screen are not proportional to light. The sRGB transfer curve is nearly linear in the shadows and close to a 2.4 power curve in the highlights. Mixing, gradients and perceptual math usually start by converting the channels to linear light. This tool does that step before OKLab and relative luminance, using the IEC 61966-2-1 threshold of 0.04045 and the 2.4 exponent. HSL and HSV work on the sRGB numbers themselves. The two models simply read those numbers differently.
OKLab turns linear sRGB into cone like responses with a matrix, then applies a cube root. That cube root is what makes its lightness far more even than HSL. OKLCH simply swaps a and b for polar chroma and hue, which reads closer to design intuition. The CMYK output uses a plain conversion. It takes the black component first and then scales cyan, magenta and yellow from what remains, with no print profile and no black generation. Screen and ink gamuts do not overlap, so treat those ratios as an on screen reference rather than a separation.
When to use it
- Front end color work
A design file hands you HEX, but your CSS variables use OKLCH or HSL. Paste the source value and every notation appears at once. Copy the format you need, drop it into the stylesheet, and check the result without switching between tools and tabs.
- Check a print handoff
A printer sends CMYK ink ratios and you need to know how they read on screen. Paste the values, compare the HEX and RGB rows against the original artwork, and see where the screen preview and the print expectation drift apart.
- Build a theme ramp
For even light and dark steps, place a few levels by OKLCH lightness first. Then convert each level to HEX for your style tokens, so the scale stays predictable as the theme grows. Later tweaks stay in one place. Copy the finished ramp into a variables file so the next theme starts from the same steps.
Tips & tricks
- Type a partial value, and the rows update the moment the syntax becomes valid.
- For dark mode work, set OKLCH lightness first, then tune chroma and hue.
- Eight digit HEX is the shortest way to keep alpha in a handoff or a CSS variable.
Things to watch
- CMYK is not press color
Screen gamut is wider than ink gamut, and no ICC profile is loaded here. Magenta and cyan usually print darker than this preview suggests, so separate the color with your print profile before you commit to a press run. Ink on paper also behaves differently from emitted light.
- HSL lightness is not luminance
HSL lightness averages only the largest and smallest channel, so yellow at 50 percent looks brighter than blue. For ramps and contrast checks, use OKLCH lightness or relative luminance instead. The two measures answer different questions, so pick the one that matches the job.
- Eight digit HEX support
Older browsers may ignore eight digit HEX values. Use rgba() or hsla() when you need wide support, and check the browsers your project targets. The tool omits the alpha digits when alpha equals 1, so the output stays short. Keep a plain six digit fallback when in doubt.