How to Convert Colors Between HEX, RGB, HSL, and Other Formats

Same color

A designer sends you #3B82F6 for a button. Your CSS uses HSL variables so you can lighten a shade by changing one number. The print shop wants CMYK. Nobody's wrong here, each format is just built for a different job: HEX is short and easy to paste into CSS, RGB describes light a screen mixes, HSL separates hue from lightness so it's easier for a human to tweak, and CMYK describes ink instead of light.

The one thing to watch

HEX to RGB is exact, they're the same numbers written differently. RGB to CMYK is a guess, a good one, but a guess, because it depends on the printer, paper, and ink profile. That's also why CMYK printing uses black ink on top of cyan, magenta, and yellow instead of just mixing the three, layering three inks to fake black wastes ink and still looks muddy on paper.

Converting a color

Open the color converter, pick the format your value is in, paste it, then pick the format you want it in. The preview swatch confirms it read the color you meant, then copy the result in HEX, RGB, HSL, CMYK, or any of the other formats it supports.

Which format to actually use

HEX for CSS and HTML, it's what browsers expect. HSL when you're building a theme and want lighter or darker variants from one base color. RGB (or rgba()) when you need to blend colors or handle transparency in code. CMYK for early print mockups only, get a real proof before anything ships.