Colour is one of the first things people notice about a brand, and consistency is what makes it feel professional. But the codes behind colours — HEX, RGB, HSL — can be confusing if you've never dealt with them. This guide keeps it simple: what the codes mean, how to pick a palette, and how to stay consistent everywhere.

HEX, RGB and HSL — what's the difference?

They're three ways of writing the same colour. You'll use different ones in different places:

• HEX (e.g. #E4552B) — the most common in websites and design apps. Compact and easy to paste.
• RGB (e.g. rgb(228, 85, 43)) — describes how much red, green and blue make up the colour. Useful when you need to tweak channels or add transparency.
• HSL (e.g. hsl(14, 78%, 53%)) — hue, saturation and lightness. The friendliest for making a colour lighter, darker, or shifting its shade.

A colour picker shows all three for any colour, so you can grab whichever format a given tool needs.

How many colours do you need?

Fewer than you'd think. A clean brand palette usually has:

• One main colour — your signature, used for key buttons and highlights.
• One or two neutrals — a near-black for text and an off-white or light grey for backgrounds.
• One accent (optional) — a contrasting colour for the occasional call-to-action.

Resist the urge to use lots of colours. Restraint looks more polished and is far easier to keep consistent.

Building tints and shades

From a single brand colour you can create a whole scale by mixing it toward white (tints, lighter) and toward black (shades, darker). These variations are perfect for hover states, backgrounds, borders and charts — everything stays in the same family, so it feels harmonious. A good colour picker generates this range for you automatically from your base colour.

Don't forget contrast

Pretty colours are useless if people can't read your text. Make sure there's strong contrast between text and its background — light text on dark, or dark text on light. This matters for accessibility (people with low vision) and simply for legibility on phones in bright sunlight.

Stay consistent everywhere

Once you've chosen your palette, write the codes down and reuse them everywhere: your website, social profiles, printed materials and slides. Keep a simple note of your HEX values so you (or anyone helping you) can match them exactly. Consistency across every touchpoint is what turns a few colours into a recognisable brand.