Color Converter

What does this color converter do?

Paste a color in any format and get all the others at once: HEX, RGB, HSL, HSV and CMYK, plus the nearest CSS color name. This free converter from ÆON Toolhub also handles transparency, accepting 3, 4, 6 and 8 digit hex, and switching the output to rgba() and hsla() when alpha drops below 100%.

Every line has its own copy button, and the whole thing runs in your browser, so a client's brand colours never leave your machine.

How do you use it?

Pick or paste. Use the colour picker, or type a value into the HEX, RGB or HSL field. Those three work in both directions.

Set the alpha. Drag the slider for transparency. The preview sits on a checkerboard so you can actually see it.

Read the rest. HSV, CMYK and the CSS name update automatically as outputs.

Copy. One button per line.

Which format should you use, and when?

HSL is the one worth learning if you tweak colours by hand: because hue, saturation and lightness are separate, you can darken a colour without changing which colour it is, which is impossible to do intuitively in HEX.

What is the difference between HSL and HSV?

They share the hue angle but disagree about the rest. In HSL, lightness at 100% is always white, so the pure vivid version of a hue sits at 50%. In HSV (which Photoshop and Figma call HSB), value at 100% is the most vivid version of the hue, and you get white by dropping saturation instead.

That is why the same colour reads as hsl(12, 88%, 59%) and hsv(12, 76%, 95%). Neither is wrong; they are different coordinate systems over the same colour.

How does the alpha channel work in hex?

The last two digits of an 8-digit hex are the opacity. #F25F3A80 is the same coral at roughly 50%, because 80 in hexadecimal is 128 out of 255. The 4-digit form is shorthand for the same thing, so #abcd expands to #aabbccdd.

When alpha is below 100%, this tool outputs rgba() and hsla() instead of rgb() and hsl(), because that is what CSS expects.

An honest note about CMYK

The CMYK here is an approximation, and any tool that calls it exact is misleading you. It is calculated with the standard mathematical formula from RGB, which is perfect for communicating a colour or getting in the right neighbourhood.

What it cannot do is predict ink. Real print conversion goes through an ICC profile that accounts for the press, the paper and the ink, which is why Photoshop gives different numbers, especially in the blacks. Use these values to talk about a colour; use your printer's profile for the final artwork.

Where do the colour names come from?

The Name line compares your colour against the roughly 140 named colours defined in CSS and shows the closest one, telling you whether it is an exact match or just the nearest. The values are read from the browser's own colour table rather than a hardcoded list, so they always match what the browser will actually render.

Your work stays private

The converter is fully client-side. Colour values are never uploaded, logged, or stored, and they clear when you close the tab. It also keeps working offline once the page has loaded.