Color Converter

// It reads whatever you paste

Most converters for this job open with a dropdown asking which format you are about to type. That question is nearly always answerable from the value itself: a string starting with a hash is hex, one starting with rgb is rgb, and rebeccapurple is a CSS keyword and nothing else. Asking anyway turns a one-step task into three, and picking the wrong entry silently converts from a format you did not use.

So there is no dropdown here. Paste #fa0, fa0, #ffaa00, rgb(255 170 0), rgb(255,170,0), a bare 255, 170, 0, hsl(40 100% 50%), oklch(0.8 0.17 75), or any of the 148 CSS color keywords, and the field works out which one it got. A small tag under the input says what it decided, so the detection is visible rather than something you have to trust.

When a value cannot be read, the tool says so and keeps the last color that worked on screen. That matters more than it sounds: a converter that blanks its output on every incomplete keystroke flickers the whole table while you type a six-digit hex code one character at a time.

// Eleven rows, and what each one is for

HEX and RGB are the two everything speaks. RGB percentages turn up in SVG and in some design tools. HSL is the one people reach for to make a color lighter or more muted by hand, because its three numbers map onto things you can picture. HSV looks almost identical to HSL and is not: pure red is 50 percent lightness in HSL and 100 percent value in HSV, which is the single most common mix-up between the two.

LAB and LCH are the CIE spaces from 1976, still the reference for measuring how different two colors are, and still what a lot of print and imaging software reports. The figures here are computed under D65, the white point sRGB itself is defined against, which is why those two rows are printed as labelled components rather than as CSS lab() and lch(): those functions are defined under D50, so the same three numbers inside them would render as a different color. OKLAB and OKLCH are the modern replacements, and they are the ones worth learning: they fix the blue-purple hue shift that CIE LAB has, they are in CSS Color 4, and Tailwind v4 generates its palettes in OKLCH.

The last row is the nearest CSS color name. It is measured perceptually rather than by counting bytes, because the question it answers is what a person would call the color. When the color is exactly a named one, the row says so plainly; when it is close, it says nearest, so the two are never confused.

// Why OKLCH is worth the switch from HSL

HSL's lightness is not lightness. hsl(60 100% 50%) is yellow and hsl(240 100% 50%) is blue, and both claim to be 50 percent light. Put them side by side and the yellow is blinding while the blue is nearly black. Any scheme built on the assumption that equal L means equal lightness comes out uneven, which is why hand-tuned palettes drift and why a set of HSL shades rarely steps evenly.

OKLCH is built from a model fitted to how people actually judge color, so its lightness number means something. Two colors at the same L look about equally light whatever their hue, which is what makes it possible to generate a palette or a set of shades by arithmetic instead of by eye. Its three numbers are lightness from 0 to 1, chroma from 0 to about 0.32 in sRGB, and hue in degrees.

The catch is gamut. OKLCH can describe colors no sRGB screen can show, because the chroma axis does not stop where the display does. A value like oklch(0.7 0.4 30) is perfectly well defined and simply unshowable. What you get back for one of those is the color with the excess chroma clipped away, which can move the hue as well as the intensity, so read the OKLCH row to see where it actually landed rather than assuming it is the closest match to what you asked for.

// The CMYK row is an approximation, and here is why

The CMYK values on this page come from the standard arithmetic conversion, which is the same one every other online converter performs. It is a reasonable starting point and it is not a color-managed conversion.

Real CMYK depends on things a browser has no access to: the specific inks, the paper stock, the press, and an ICC profile describing all three. The same file printed on coated and uncoated stock produces visibly different color from identical numbers. That is why a print shop asks for a profile rather than four percentages.

Use this row to get near a value or to sanity-check one. For anything going to press, convert in software that has the destination profile loaded, and proof it. A converter that presented these numbers as press-ready would be lying by omission.

// fair questions

What color formats can I paste?

Hex in three, four, six or eight digits, with or without the hash; rgb() and rgba() in both the modern space-separated and the older comma syntax; a bare triple like 255, 170, 0; hsl() and hsla(); oklch(); and any of the 148 CSS color keywords such as tomato or rebeccapurple. The tag under the field tells you which one it detected.

What is OKLCH and why use it over HSL?

OKLCH is a perceptual color space in CSS Color 4, built so that its lightness number matches what your eye judges. HSL's does not: yellow and blue both claim 50 percent lightness while looking nothing alike. That makes OKLCH the one to build palettes and shade ramps in, which is why Tailwind v4 generates its colors there.

Why does my CMYK value look different in print?

Because the conversion here is arithmetic, not color-managed. Real CMYK output depends on the inks, the paper and an ICC profile for the press, none of which a browser can know. Treat this row as an approximation for getting close, and do the final conversion in software that has the destination profile.

Do three-digit hex codes work?

Yes. Each digit is doubled, so #fa0 expands to #ffaa00 and #f00 to #ff0000. That is a repeat rather than a zero-pad, which is why #fa0 is not #0f0a00. Four and eight digit hex work too; those carry an alpha channel, which this tool reports and then sets aside, since every other format on the page describes the opaque color.

How do I convert hex to RGB by hand?

Split the six digits into three pairs and read each as a base-16 number, where the letters continue the count: a is 10, b is 11, and so on up to f, which is 15. In #3b82f6 the pairs are 3b, 82 and f6. For 3b that is 3 times 16 plus 11, which is 59, and the other two come out as 130 and 246, so the answer is rgb(59 130 246). Going back is the same steps in reverse: divide each channel by 16, and turn a remainder above 9 back into its letter.

Is HSV the same as HSB?

Yes, exactly the same thing under two names. V is for value and B is for brightness; Photoshop's color picker calls it HSB and most code libraries call it HSV, and the numbers are identical. Neither is the same as HSL, which uses a different third axis.