Skip to main content
ToolsByUs

Color Converter

Color Converter reads a colour in any notation — hex with or without the hash, rgb(), hsl(), hsb(), oklch() or one of the 148 CSS colour names — and prints it back in all of them at once. It accepts both the comma and the space syntax, keeps alpha wherever the target format can hold it, and returns nothing rather than black when the input is not a colour it can read.

Local-only
HEX input

Enter a colour on the left. This accepts hex with or without the hash, rgb(), hsl(), oklch() and the CSS colour names.

How does Color Converter work?

Everything routes through sRGB. Whatever you type is parsed into three channels and an alpha, and every output is rendered from those. That is what makes the conversions consistent: there is one representation in the middle, not fifteen pairwise formulas that can disagree with each other.

What the parser accepts

Hex in three, four, six or eight digits, with or without the leading hash — bare hex matters because that is how values arrive from a spreadsheet or a design token file. Both CSS syntaxes: rgb(255, 136, 0) and rgb(255 136 0 / 50%). Percentages, which in rgb() resolve against 255 rather than 100. hsl(), hsb()/hsv(), oklch(), and all 148 CSS colour keywords.

What it does with something it cannot read

It says so. A colour tool that silently turns a typo into black is worse than one that refuses the input, because you get a swatch, believe it, and ship it. A hex of the wrong length — five digits, seven digits — is a typo and not a colour, and is rejected rather than padded into something plausible.

Which conversions are exact and which are not

Hex, RGB, HSL and HSV are the same three bytes in different coordinates. Those round trip exactly, limited only by how many decimals the output is printed to.

OKLCH is exact in the other direction too, but it can describe colours sRGB cannot show. oklch(0.7 0.3 140) is a perfectly valid coordinate with no sRGB pixel behind it, and converting it clips — so two different OKLCH values can come back as the same hex. That is a property of the gamut, not a bug in the arithmetic.

CMYK is the approximation. A real conversion needs an ICC profile for the press, the paper and the ink, and the same sRGB value becomes different ink percentages on coated stock than on newsprint. The figure here is the device-independent formula every online converter uses: right for picking a swatch, wrong for a press specification.

Any notation

#ff8800
rgb(255, 136, 0)
hsl(32 100% 50%)
darkorange
FF8800

All of them

hex    #ff8800
rgb    rgb(255 136 0)
hsl    hsl(32 100% 50%)
hsv    hsv(32 100% 100%)
oklch  oklch(0.7538 0.1751 55.94)
cmyk   cmyk(0% 47% 100% 0%)

What options and edge cases does Color Converter support?

Formats, and how exact each conversion is
ParameterTypeDefaultBehaviour & edge cases
HEXin / outexact3, 4, 6 and 8 digits, with or without the hash. Case-insensitive.
RGBin / outexactBoth syntaxes, integers or percentages, with alpha after a slash or as a fourth argument.
HSLin / outexactThe same three bytes in polar coordinates. Hue wraps, so 370 is 10.
HSV / HSBin / outexactWhat most design tools are built on. Not valid CSS, so it is read but never the recommended output.
OKLCHin / outclipsPerceptually uniform and wider than sRGB. A coordinate outside the gamut clips on the way back.
CMYKoutapproximateThe device-independent formula. A printer will do the real conversion with their own profile.
Colour namesin148Every CSS keyword, plus `transparent`.
Alpha0–1keptPreserved through every format that can express it. CMYK cannot, and drops it.

Frequently asked questions

What colour formats can I paste in?

Hex in three, four, six or eight digits with or without the hash; rgb() and rgba() in either the comma or the space syntax; hsl() and hsla(); hsb() or hsv(); oklch(); and any of the 148 CSS colour names. Percentages work wherever CSS allows them. If it parses, every other format appears immediately.

Why does my OKLCH value come back as a different colour?

Because OKLCH describes more colours than an sRGB screen can show. oklch(0.7 0.3 140) is a valid coordinate with no sRGB pixel behind it, so converting it clips chroma until it fits — and two different vivid OKLCH values can clip to the same hex. It is the gamut, not the arithmetic. If you need the in-gamut version, the picker on this site clamps rather than clips and tells you what it changed.

Can I trust the CMYK numbers for print?

As a starting point, not as a specification. CMYK is device-dependent: the same sRGB value becomes different ink percentages on coated stock than on uncoated, and different again on a different press. No online converter can know which press. Send the printer the sRGB or the Pantone reference and let them convert with the profile for the job.

What happens if I paste something that is not a colour?

Nothing is produced and the field says it could not read the input. That is deliberate. A converter that silently returns black on a typo hands you a swatch you have no reason to doubt, and hex of the wrong length — five or seven digits — is a typo, not a colour that needs padding.

Is any of this sent to a server?

No. Every conversion here is arithmetic in this tab. The page makes no network request after it loads, which you can check by opening the network panel, or more simply by turning off your connection and watching it keep working.

Which colour format should I actually use in CSS?

HEX for a fixed brand colour, HSL when you want to derive a lighter or darker variant by moving one number, and OKLCH when perceptual evenness matters — a ten-point lightness step in OKLCH looks like the same step at every hue, which is not true in HSL. All three describe the same colours; what differs is which adjustment is easy to make by hand.

ToolsByUs team · How we check our tools