How Do You Convert Between Hex, RGB, HSL, and CMYK Colour Values?

You convert between color models by translating the same visual color into different number systems. If you need the math handled fast, use this free color converter tool and move on with your day.

What color conversion actually changes

Color conversion does not invent a new color. It rewrites the same color in another format so different tools, screens, and printers can understand it.

That matters because each model describes color from a different angle. Hex and RGB are common in web work, HSL is easier for tuning palettes, and CMYK is the language of printing presses.

A red button might be written as #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%), or a CMYK mix that approximates red on paper. Same idea, different wiring.

Hex and RGB are the web-native pair

Hex is a compact shorthand for RGB. The color #ff0000 means full red, no green, no blue; in decimal RGB that becomes rgb(255, 0, 0).

RGB is an additive model. You start with black and add light through red, green, and blue channels until you reach the color you want. That is why RGB fits screens so well: monitors emit light instead of reflecting it.

Hex is mostly a packaging format. The first two digits are red, the next two are green, and the last two are blue. So #336699 becomes rgb(51, 102, 153).

When you are reading CSS, design tokens, or app themes, hex is usually the shortest thing to type and the easiest thing to paste around. RGB is more explicit when you want to manipulate channels directly in code.

/* Same color, two common formats */
.button {
  background: #336699;
  border-color: rgb(51, 102, 153);
}

HSL is easier to tweak by eye

HSL stands for hue, saturation, and lightness. Instead of thinking in raw red-green-blue amounts, you describe the color wheel position, how intense it is, and how bright or dark it feels.

That makes HSL handy when a design needs small adjustments. Want a color a little warmer? Shift the hue. Want it less loud? Lower the saturation. Want it to sit back in the UI? Reduce lightness.

Example: hsl(210, 60%, 40%) is a muted blue. If it needs more punch, bump saturation. If it needs contrast against a dark background, raise the lightness a bit and recheck accessibility.

For developers, HSL often shows up when you are building theme systems, hover states, or color scales. You can generate related shades without manually juggling three channels at once. If you want the reverse direction too, our guide on converting HSL to RGB covers the same idea from the other side.

CMYK is for ink, not pixels

CMYK means cyan, magenta, yellow, and key black. It is a subtractive model, which means it works by absorbing light on white paper instead of emitting it on a screen.

This is why your bright monitor green can turn into a duller print color. Some screen colors simply cannot be reproduced exactly with inks, so a CMYK conversion is often an approximation, not a clone.

That distinction matters in handoff work. A designer may approve a color in Figma or CSS, then a printer may warn that the same color sits outside the printable gamut. If the final output is paper, labels, packaging, or signage, CMYK is the format to check early.

Screen color is about emitted light. Print color is about reflected light. The same hex code can survive one world and fail in the other.

How to choose the right format

You do not need to use every model for every project. Pick the one that matches the thing you are actually shipping.

• Hex: best for CSS, design handoff notes, and quick copy-paste values.
• RGB: best when code needs direct channel control or opacity via rgba().
• HSL: best when you are adjusting palettes, building states, or generating variants.
• CMYK: best for print files and anything that will be physically reproduced.

In UI work, Hex and RGB are usually interchangeable. In print work, CMYK is the one that can save you from a late-night “why does this look different on paper” conversation.

One more practical point: accessibility checks often care about contrast, not just the format. A pretty color can still be unreadable. If you are tweaking text and backgrounds, pairing this workflow with a color contrast checker can spare you some eye strain.

What happens under the hood

Most conversions are just math on channel values. Hex is parsed into red, green, and blue bytes. RGB values are normalized to a 0–1 range when converted into HSL or CMYK, then transformed with formulas that preserve the visible color as closely as possible.

For example, RGB to HSL looks at the highest and lowest channel values to find lightness and chroma. Hue is then derived from which channel dominates and how far the others trail behind it. It is not magic, just a set of rules for describing the same point in color space.

CMYK conversion is messier because it depends on the output profile and printing conditions. Two printers can render the same CMYK values differently. That is why professional print workflows use color profiles and proofs, not blind faith.

// Rough shape of a conversion pipeline
hex -> rgb -> hsl
hex -> rgb -> cmyk

If you are writing your own converter, the main traps are rounding and range handling. Values like 255 need to become 1.0 before certain formulas run, and the final result often needs rounding back to whole numbers or sensible percentages.

A Worked Example

Here is a simple conversion chain using one color that developers actually see all the time: a steel blue used in buttons, tags, or dashboard chrome.

Input:
#4a90e2

RGB:
74, 144, 226

HSL:
214, 72%, 59%

CMYK:
67, 36, 0, 11

The exact CMYK values may vary slightly depending on the converter and the profile it uses. That is normal. RGB and HSL are device-oriented and more stable across tools, while CMYK can drift because print output is less uniform.

Now imagine a designer says the blue looks too cold. In HSL, you can shift the hue slightly toward a greener blue, lower saturation if it feels too aggressive, or raise lightness if it feels too heavy. In RGB, the same change is harder to reason about unless you already know the channel behavior.

Here is a realistic CSS-style before/after:

/* Before */
--brand: #4a90e2;

/* After: a slightly softer variant */
--brand: hsl(210, 65%, 62%);

If you are checking multiple swatches, a color converter is faster than mental arithmetic and less annoying than tabbing through a design app. Paste, convert, compare, repeat.

Frequently Asked Questions

What is the easiest way to convert Hex to RGB?

The easiest way is to split the hex value into three pairs and convert each pair from base 16 to base 10. For example, #ff8800 becomes rgb(255, 136, 0). If you do this often, a browser tool is faster than doing the math by hand.

Why does HSL look more intuitive than RGB?

HSL separates color into hue, saturation, and lightness, which maps better to how people describe color changes. You can make something brighter, duller, or warmer without guessing which RGB channel to nudge. That makes it useful for design systems and theme variants.

Can every RGB color be converted to CMYK exactly?

No. Screens can display colors that printers cannot reproduce perfectly with ink, so some RGB colors fall outside the CMYK gamut. In those cases, the converter gives you the nearest printable match, not a perfect clone.

Why do colors look different on screen and in print?

Screens emit light, while printed ink reflects ambient light off paper. That changes how the eye perceives the color, even when the values look close on paper. Bright neons and very saturated blues are common trouble spots.

The Bottom Line

Color conversion is just translating one color into a different coordinate system. Hex and RGB are the workhorses for web and app interfaces, HSL is better for visual tuning, and CMYK is what you reach for when the final output is ink instead of pixels.

If you are comparing palettes, fixing a brand color, or checking whether a screen color will survive print, keep the format that matches the job and convert only when needed. That keeps the process predictable and cuts down on guesswork.

When you want the numbers without the busywork, give the color converter a spin and use the result wherever you need it.