the field guide to:
colour codes
How to actually use those colour codes we gave you.
There’s a reason your colour palette comes with a few different formats. each one’s built for a specific job. Think of them like tools in a shop: they all do similar work, but you wouldn’t use a hammer to cut wood. Here’s the breakdown…
HEX for the web crowd
Example: #103555
HEX codes are the internet’s language of color. Used in websites, social media, and anything that lives on a screen. They’re simple, compact, and every web browser on earth understands them.
Use it when:
You’re working on your website, digital ads, or anything on a screen.
Avoid it when:
You’re sending something to print. printers don’t speak HEX.
RGB for screens and digital projects
Example: 16, 53, 85
RGB stands for Red, Green, Blue, the three colours of light that make up everything you see on a screen. By mixing different intensities of each, you get every colour under the sun.
Use it when:
Designing for anything that glows: presentations, digital mockups, photography, or video.
Avoid it when:
Printing. What looks bold on a screen can look flat or muddy in ink.
HSL for designers who like control
Example: 215°, 67%, 20%
HSL means Hue, Saturation, Lightness. it describes colour the way we actually see it. Hue is the colour itself, saturation is how vivid it is, and lightness is how bright or dark it runs.
Use it when:
You’re tweaking colour values in design software and want to stay consistent with tone and contrast.
Avoid it when:
You just need a quick reference. this one’s more about fine-tuning than day-to-day use.
CMYK for anything on paper
Example: 90, 60, 10, 40
CMYK stands for Cyan, Magenta, Yellow, and Black (Key). the inks printers mix to create every colour on the page. Screens use light, printers use pigment. That means your colour might shift a little, and that’s totally normal.
Use it when:
Designing business cards, packaging, posters, or anything that gets physically printed.
Avoid it when:
Working digitally. CMYK files can look dull or desaturated on screens.
Pantone the gold standard (and sometimes, the expensive one)
Example: Pantone 2965 C
Pantone colours are pre-mixed, standardised inks. They ensure your navy looks like your navy no matter who’s printing it. Pantones are key for precise brand colour matching. especially when consistency matters across multiple print runs or materials.
Use it when:
You need colour accuracy. packaging, merch, signage, or large-scale print.
Avoid it when:
You’re trying to save on print costs. Pantone inks are premium, and printers charge accordingly.
A quick recap
format: HEX Use for: Digital colour best used in: Websites, digital ads, emails
format: RGB Use for: Screen-based media best used in: Photos, video, presentations
format: HSL Use for: Design adjustments best used in: Colour editing and fine-tuning
format: CMYK Use for: Print colour best used in: Stationery, packaging, posters
format: Pantone Use for: Precision colour matching best used in: Merch, signage, premium print
Bottom line:
Each colour system exists for a reason. they all play their part in making sure your brand looks consistent everywhere it shows up.
If you’re ever unsure which one to use, just ask yourself one thing: Is it glowing or printed? That usually gets you 90% of the way there.