Color Converter & Picker

HEX, RGB, and HSL — the formats used across CSS and design tools.

Yes — free, and all conversion runs locally in your browser.

Yes, and the rule behind it is stricter than it looks. Three-digit shorthand is expanded by doubling each digit, so #fff is #ffffff and #369 is exactly #336699 rather than an approximation of it. The consequence is that only 4,096 of the 16.7 million sRGB colours can be written short at all, since every channel has to be a repeated digit. #336698 has no three-digit form, and truncating it to #336 gives you a different colour. Shorthand is a convenience for values that land on those steps, not a rounding of anything.

Convert to HSL, move L, leave H and S alone, convert back. That is the appeal of the format, and it works well in the middle of the range and badly at the ends. As lightness approaches 0 or 100 the other two numbers stop mattering — hsl(200, 90%, 0%) and hsl(20, 10%, 0%) are both black, anything at 100% is white — so the hue is gone rather than hidden, and no converter can recover it. Equal steps in L across different hues do not read as equal changes either, which is why a tint scale built by stepping L looks even on some hues and lopsided on others.

They share the hue angle and diverge after it, which is the shape of problem that produces a wrong colour with no error anywhere. In HSB, brightness at 100% with saturation at 100% is the pure hue. In HSL, 100% lightness is white whatever the other numbers say, and the pure hue sits at 50%. Photoshop and many native pickers report HSB, so pasting those numbers into an HSL field leaves the hue right and the colour wrong, most visibly on anything pale. If your source labels the third number B or V rather than L, go through HEX or RGB instead.

Eight-digit hex is real CSS — the last pair is alpha, so #6366f180 is that colour at just over half — but it is refused here, with a message asking for #rrggbb. The modern space-separated syntax deserves the same caution: numbers are read in order, so rgb(99 102 241 / 50%) is taken as the first three and the alpha is dropped without a word, and rgb(50%, 50%, 50%) is read as 50, 50, 50 rather than as mid grey, because the per cent signs are ignored rather than interpreted. Alpha is an instruction for blending with what sits behind, not a property of the colour, so there is no opaque equivalent until you name a background.

Not with a formula, which is the answer nobody wants. The naive conversion — invert each channel, pull the common minimum out as black — is arithmetic rather than colour management, and it ignores the ink, the paper, the press and the profile that decide what those four numbers put on a sheet. Two printers handed the same CMYK will not give you the same colour. Ask whoever is printing which ICC profile they want and convert in an application that can apply it. There is no CMYK field here for that reason, and a screen colour outside a press's gamut has no exact equivalent anyway.

For anything where the arithmetic has to match how a colour looks, probably. oklch keeps the same three ideas as HSL — a lightness, a chroma, a hue angle — but its lightness is built to track perception, so holding it steady across hues gives colours that read as the same weight, which is the thing HSL quietly fails at. It can also address colours outside sRGB, which hex cannot express at all. The costs are unfamiliar numbers and fallbacks you have to work out separately. This converter takes HEX, RGB and HSL only, so an oklch value has to come from elsewhere.