HEX, RGB, CMYK and Pantone, explained without the jargon

HEX, RGB, CMYK and Pantone, explained without the jargon

What HEX, RGB, HSL, CMYK and Pantone codes actually mean, which one to use for screens and print, and why a brand's colour never looks quite the same twice.

Every logo page on MisterLogo lists the same colour four ways: HEX, RGB, HSL and CMYK. They all describe one colour, so why so many? Because screens and printers make colour in completely different ways, and each code speaks one of those languages.

Here's what they mean and when to use each.

Screens mix light

A screen makes colour by shining red, green and blue light at different strengths. Turn all three up fully and you get white; turn them all off and you get black. Every colour on your phone is some mix of those three.

RGB writes that mix as three numbers from 0 to 255. Spotify's green is 30, 215, 96: a little red, a lot of green, a bit of blue.

HEX is exactly the same three numbers, written in a shorthand that computers like. #1ED760 is Spotify's green again: 1E is the red, D7 the green and 60 the blue. It's the code you'll paste into most design tools, websites and apps.

HSL describes the same colour in a way that's easier for people to adjust: hue (where it sits on the colour wheel), saturation (how vivid it is) and lightness. It's handy when you want a lighter version of a brand colour for a background, because you only change one number.

For anything on a screen, use HEX or RGB. They'll give you the brand's colour exactly.

Printers mix ink

Paper doesn't glow, so printers work the other way round. They start with white paper and lay down inks that absorb light: cyan, magenta, yellow and black (the K is for "key", an old printing term).

CMYK gives the percentage of each ink. Spotify's green is roughly 86, 0, 55, 16.

That "roughly" matters. Screens can show bright, saturated colours that ink simply can't reproduce, especially vivid greens, blues and oranges. Converting from RGB to CMYK is always an approximation, and different printers, papers and settings give slightly different results. That's why we label our CMYK values as approximate.

If a printed piece really matters, ask the printer for a proof before the full run.

And Pantone?

Pantone is a system of standardised, premixed ink colours, each with its own number. Instead of building a colour from four inks and hoping, the printer uses a single ink mixed to a precise recipe. It's the most reliable way to get a brand's colour exactly right in print, which is why big brands specify a Pantone reference in their guidelines.

We don't list Pantone codes on MisterLogo. The system is proprietary, and a "nearest Pantone" worked out from a screen colour is a guess, which is exactly what you don't want when the whole point is precision. If you need one, the brand's own guidelines are the place to look. We link to them on each logo page where they exist.

Why the colour never looks quite the same

Even with the right code, a brand's colour will look slightly different on your laptop, your phone and a printed poster. Screens vary in brightness and calibration; paper varies in whiteness and texture; lighting changes everything. Brands live with this, and so can you.

What you can control is consistency: use the same code everywhere within one piece of work, and use the right type of code for the medium.

A quick cheat sheet

  • Website, app or email: HEX
  • Design software, for screen work: HEX or RGB
  • Building a lighter or darker tint: HSL
  • Office printing or a quick flyer: CMYK
  • Professional print where the colour must be exact: the brand's Pantone reference, from its guidelines

Every logo page on MisterLogo has all four codes ready to copy. Click any value and it's on your clipboard. Try it on Netflix, Starbucks or IKEA.

← Why so many brands are blue

Advertisement

More articles

Legal