Color Converter Guide: HEX, RGB, HSL, HSV, and CMYK Explained

I have lost more time than I want to admit nudging a hex value by eye, trying to make a hover state "a little lighter." The fix was boring: stop guessing, start converting. A good color converter turns a single value into five readings of the same color, and once you can read all five, picking the right one for the job stops being a coin flip.

This guide walks through what each color space actually represents, when to reach for which, and one full worked example so the math is not a black box. You can follow along in the Color Converter, which shows HEX, RGB, HSL, HSV, and CMYK side by side with a live swatch.

HEX and RGB: the same numbers, two costumes

RGB describes a color as three channels — red, green, blue — each from 0 to 255. That maps directly to how a screen lights up its subpixels, which is why RGB is the native language of displays. rgb(255, 128, 0) is "max red, half green, no blue," an orange.

HEX is the same three numbers written in base 16. Each channel becomes a two-digit pair: 255 is ff, 128 is 80, 0 is 00, so the color is #ff8000. HEX is not a different color model — it is RGB in a more compact costume, which is exactly why it dominates CSS, email templates, and any tooling older than the modern color functions. When a teammate asks "what's the brand color," the safe answer is always the six-digit HEX.

Use RGB when you are reasoning about screen channels or feeding a library that wants integers. Use HEX when you want one copy-pasteable token that everything understands.

HSL: built for humans who tweak colors

HSL re-parameterizes the same RGB point into three axes that match how we talk about color:

• Hue (0–360°): the position on the color wheel — red at 0, green at 120, blue at 240.
• Saturation (0–100%): how vivid versus gray.
• Lightness (0–100%): how close to black (0) or white (100).

The reason HSL earns its keep is that you can change one property without disturbing the others. Want a darker shade of the same color? Drop the L, leave H and S alone. Want a muted version? Pull down the S. Doing that by hand in HEX means re-deriving all three channels; in HSL it is one number. That predictability is why HSL is the natural form for CSS custom properties and theme switching — a single --primary-hue variable can drive a whole palette.

HSV: the same wheel, a painter's brightness

HSV (sometimes called HSB) shares Hue and Saturation with HSL but swaps Lightness for Value — and the difference trips people up constantly. In HSL, L = 100% is always pure white. In HSV, V = 100% is the most saturated, brightest version of that hue, not white at all.

That makes HSV map neatly onto a color-picker square: the vertical axis is Value, the horizontal is Saturation, and the hue ring sits beside it. If you have ever dragged inside that gradient box, you were moving through HSV space.

The trap: HSL's S and HSV's S are not the same number, because each measures saturation against a different reference. Copying an S value from one tool into the other gives you a visibly wrong color. Read the row label, not just the digits.

CMYK: where the screen meets paper

CMYK — cyan, magenta, yellow, key (black) — is subtractive: it describes how much ink absorbs light off white paper, the opposite of a screen adding light. It only matters when something gets printed.

Here is the honest technical caveat, and it is the one most converters quietly skip. There is no single mathematically correct RGB↔CMYK mapping. Real printing depends on ICC color profiles tied to specific inks and paper stock; the same CMYK values print differently on glossy versus matte. Most web converters, including this one, use the naive subtraction CMYK = 1 − RGB, which is a reasonable preview but not a color-managed result. If you are doing real production print work, do the final conversion in Adobe or Affinity with the correct ICC profile loaded — treat the web number as a sanity check, not a deliverable.

A worked example: converting #ff8000

Let me convert the orange #ff8000 by hand so nothing is hidden.

HEX → RGB. Split into pairs and read base 16: ff = 255, 80 = 128, 00 = 0. So rgb(255, 128, 0).

RGB → HSL. Normalize each channel to 0–1: R = 1.0, G = 0.502, B = 0.

• max = 1.0, min = 0, so chroma = 1.0.
• Lightness = (max + min) / 2 = 0.50 → 50%.
• Saturation, since L ≤ 0.5, = chroma / (max + min) = 1.0 / 1.0 = 100%.
• Hue: red is the max, so H = 60 × ((G − B) / chroma) = 60 × 0.502 = 30°.

Result: hsl(30, 100%, 50%) — a fully saturated orange sitting exactly halfway up the lightness scale. That 30° hue is the textbook midpoint between red (0°) and yellow (60°), which is what orange should be.

For completeness, the same color in HSV reads hsv(30, 100%, 100%) — Value is 100% because the brightest channel is already maxed, even though HSL called it 50% lightness. Same color, two honest answers. The Color Converter does all of this instantly and shows the modern space-separated CSS syntax (hsl(30 100% 50%)) ready to paste.

When to use which — a quick rule of thumb

• HEX: handoff and storage. The universal token; output six digits, not three.
• RGB: screen-channel math, libraries that want integers, alpha compositing.
• HSL: editing and theming — the form to use when you want to derive shades, tints, and hover states predictably.
• HSV: anything mapped to a color-picker UI, or when you specifically want "brightness" rather than "lightness."
• CMYK: print preview only, and only as an estimate until ICC profiles enter the picture.

One last habit worth building: when you pick a color, check its contrast before you ship it. A gorgeous orange CTA is worthless if the label on top fails accessibility. Run the final color through a color contrast checker against your background, and if your audience includes color-vision differences, preview it in a color blindness simulator too. Converting is step one; readable is the actual goal.

---

Made by Toolora · Updated 2026-06-13