Tools · Color · Color converter
Color converter
Convert a color between HEX, RGB, HSL, and OKLCH, live.
Add a file and run the tool.
Your file is ready.
Try a different file, or try again.
Settings
Adjust the settings below. The result updates as you go.
Runs fully in your browser. Nothing is uploaded.
Runs fully in your browser. Nothing is uploaded.
How it works
Enter or pick a color in any format.
Read its HEX, RGB, HSL, and OKLCH values.
Copy the value in the format you need.
Frequently asked questions
HEX, RGB (and RGBA), HSL (and HSLA), and OKLCH, converting between all four as you type.
A newer CSS color format built for perceptual uniformity, so equal changes in its values look like equal changes in lightness, chroma, and hue - useful for building consistent color scales.
Yes - type or paste a value with alpha (like an rgba() or hsla() color) and it carries through to every other format automatically.
No. The conversion happens entirely in your browser.
Guides
A closer look at specific problems this tool solves.
Why a Color Rarely Survives the Trip From One Format to Another
A hex code copied from a design file doesn't stay a hex code for long. It becomes an rgba() for an overlay, an hsl() for a lightness tweak, maybe an oklch() for a newer color scale - and every hand conversion in between is a place for a digit to slip.
Read the guideHow to Convert a Color Between HEX, RGB, HSL, and OKLCH
Paste a color into any of four fields and the other three update immediately. Here is what each field expects, what happens to alpha, and why OKLCH shows more decimal places than the rest.
Read the guideOKLCH vs HSL: What Actually Changes When You Convert a Color Scale
HSL feels intuitive because it separates hue, saturation and lightness into three numbers you can reason about. OKLCH does the same thing, more accurately. Here is the actual difference, and when it is worth converting.
Read the guide
Comments