HEX, RGB, HSL & CMYK Explained

Designers and developers bounce between half a dozen different ways of writing the same colour. This guide covers the four most common — HEX, RGB, HSL, and CMYK — in plain language, with guidance on when each one is the right choice.

RGB

RGB describes a colour as a mix of red, green, and blue light. Screens produce colour by lighting red, green, and blue sub-pixels at different intensities, so RGB maps directly to how the display works. Each channel is typically a number between 0 and 255. Pure black is rgb(0, 0, 0); pure white is rgb(255, 255, 255); pure red is rgb(255, 0, 0).

When to use it: anything written directly for the screen — CSS (which supports rgb() and rgba() functions), design tools, and image editors. RGB is the authoritative model for on-screen colour.

HEX

HEX is a more compact notation for exactly the same information as RGB. Instead of three decimal numbers from 0 to 255, HEX uses six hexadecimal digits from 00 to FF. Each pair represents one channel: RRGGBB. So rgb(255, 0, 0) becomes #FF0000, and rgb(70, 130, 180) becomes #4682B4.

When to use it: almost anywhere a colour appears in code. HEX is the default in CSS, design handoff tools, and brand guidelines because it's short, unambiguous, and easy to copy. Modern CSS also supports eight-digit HEX (#RRGGBBAA) for colours with alpha/opacity.

HSL

HSL describes colour by hue, saturation, and lightness, which matches how people talk about colour in the real world. Hue is a degree from 0 to 360 around the colour wheel; saturation is a percentage from 0 (grey) to 100 (full colour); lightness is a percentage from 0 (black) to 100 (white).

Why it matters: HSL is the best model for editing colours in a systematic way. Want a slightly darker version of your brand red? Drop the lightness by 10%. Want a desaturated version? Drop the saturation. Compare to RGB/HEX, where the same change requires recomputing all three channels.

When to use it: design-systems code, colour-ramp generation, and anywhere you'll programmatically derive related colours from a base.

CMYK

CMYK is used for printed colour, not screen colour. Print reproduces colour by laying down ink in four channels — cyan, magenta, yellow, and key (black) — in percentages from 0 to 100. The same RGB value on a screen and a printer usually produces different colours because the two systems start from different physics (additive light versus subtractive pigment).

When to use it: packaging, print collateral, editorial print, signage, and anything that involves a printer. If a project has both screen and print deliverables, designers typically define the brand in a Pantone swatch and provide both CMYK and RGB/HEX versions.

Converting between models

Conversion between these models is well-defined mathematically, and every modern design tool does it automatically. But a few things are worth keeping in mind:

• HEX → RGB is lossless — it's the same data in two notations.
• RGB → HSL is lossless on a computer, but the colour-space mapping isn't perceptually uniform, so two colours with the same saturation and lightness can still feel quite different.
• RGB → CMYK is not lossless. The available colours (the "gamut") overlap but don't match. Expect some colour shift — especially for bright primary blues and greens.

Other models you may see

• HSV / HSB — similar to HSL, but "value" or "brightness" instead of lightness. Common inside graphics applications; less common in CSS.
• OKLCH and LCH — newer, perceptually uniform models now supported in modern browsers. Preferred for accurate colour interpolation and palette generation in production-ready CSS.
• Pantone — a proprietary set of mixed-ink swatches used in professional print. Not a colour model per se, but a set of reference colours that standardise results between print vendors.

Practical tips

• Store colours in one canonical format. Pick HEX or HSL for your design system and generate the others from it.
• Keep alpha separate when you can. An 8-digit HEX is fine, but rgb(..., ..., ..., alpha) or hsl(..., ..., ..., alpha) is easier to reason about.
• Don't eyeball CMYK from RGB. If a colour matters for print, ask the printer for a proof rather than trusting a software conversion.
• Copy, don't retype. Every colour page on iPalette includes a one-click copy for HEX, RGB, and HSL to avoid transcription errors.

Next steps

• See all formats for a single colour by browsing the named colour library.
• Read the colour theory basics guide to see how HSL maps onto the colour wheel.
• Generate palettes you can export directly as CSS with the palette generator.