Color Harmonizer — HEX, RGB, HSL & CMYK Converter

HEX, RGB, HSL, and CMYK explained

• HEX (e.g. #38bdf8) packs red, green, and blue into a 6-digit base-16 code — the most common format in CSS and design tools.
• RGB expresses the same red/green/blue values as three numbers from 0–255 — easier to reason about and animate programmatically than hex.
• HSL (Hue, Saturation, Lightness) describes color the way people intuitively think about it — useful for building color palettes or shade variations.
• CMYK (Cyan, Magenta, Yellow, Key/black) is a subtractive model used for print — screens emit light (RGB), printers lay down ink (CMYK), so print materials should be designed in CMYK to avoid color shifts.

A worked example

Take the CSS named color tomato, RGB (255, 99, 71). As hex, each channel converts to two base-16 digits: 255 → FF, 99 → 63, 71 → 47, giving #FF6347. For HSL: lightness is the midpoint of the highest and lowest channel — (255 + 71) / 2 / 255 ≈ 64%. Saturation compares the spread between channels to that midpoint and works out to 100% here, since red is fully saturated. Hue is derived from which channel is highest and by how much, landing at 9° — just past pure red (0°) toward orange. So the same color is hsl(9, 100%, 64%). Converting to CMYK: since red is already maxed out, cyan and key (black) both come out at 0%; magenta and yellow absorb the gap between the other two channels and red, landing around 61% magenta, 72% yellow.

A second example, closer to home: this site's own accent color is #0891B2 — RGB (8, 145, 178). Run it through the same math and you get hsl(192, 91%, 36%): a deeply saturated, moderately dark blue-cyan, which is exactly why it reads as a strong accent against a near-black background rather than washing out. In CMYK it's roughly 96% cyan, 19% magenta, 0% yellow, 30% key — heavy on cyan ink, as the name on the hex code already gives away.

When to use which

Use HEX or RGB for anything on a screen (websites, apps, UI design), HSL when you need to programmatically generate related shades, and CMYK only when preparing artwork for physical printing.

Mistakes people make

• Trusting on-screen CMYK as final print color. RGB→CMYK conversion is mathematically well-defined, but it's a simplified model that doesn't know anything about the specific inks, paper stock, or printer your job will actually run on. Professional print output relies on an ICC color profile supplied by the print shop, not a generic formula — treat this tool's CMYK numbers as a reasonable starting estimate for design work, not a substitute for asking your printer what profile to use.
• Confusing lightness with perceived brightness. HSL lightness is a mathematical midpoint of the RGB channels, not how bright a color actually looks to the eye. A fully saturated yellow and a fully saturated blue can share the same 50% lightness value in HSL while looking dramatically different in perceived brightness — don't assume equal lightness means equal visual weight.
• Forgetting shorthand hex exists. A 3-digit hex code like #0f0 is shorthand for #00ff00 — each digit is doubled, not padded with a zero. This converter accepts both forms.
• Expecting alpha/transparency support. This converter works with fully opaque colors only — it doesn't handle an alpha channel (as in 8-digit hex #RRGGBBAA, or rgba()/hsla()). If your source color has a transparency component, convert the opaque part here and apply the alpha value separately in your CSS.

Why CMYK is only ever an approximation here

RGB is additive (screens start from black and add light) and CMYK is subtractive (paper starts white and ink is subtracted from it), so there's no single universal formula that converts perfectly between them — the "right" conversion depends on the specific inks and paper involved. This tool uses the standard naive conversion (deriving K from the darkest channel, then C/M/Y from what's left), which is accurate enough for previewing how a color leans in print, but a real print run color-matched against a screen design should go through your printer's actual ICC profile, not a generic RGB→CMYK formula. It's also why CMYK is the one format here that doesn't round-trip cleanly: converting HEX → RGB → HSL → HEX returns exactly where you started, since those three are equivalent descriptions of the same additive color, but HEX → CMYK → HEX can land a shade off, especially for very dark or desaturated colors, because the CMYK step isn't a lossless reformatting of the same numbers.

When not to use it

Skip this tool for anything requiring perceptually uniform color spaces (like LAB or OKLCH) used in advanced design-system tooling — HSL is intuitive but not perceptually uniform, meaning equal steps in hue or lightness don't always look like equal visual steps.