Web Tools
Colour codes explained — hex, RGB, and building a palette that works
A colour is just three numbers, but the formats — hex, RGB, HSL — send people in circles. Here is what each one means, how to lift the exact colour from any image or screen, and how to turn one colour into a palette that holds together.
Every colour on a screen is really just three numbers — how much red, green and blue it mixes. The confusion comes from the formats those numbers wear: #F0623C, rgb(240, 98, 60), hsl(13, 86%, 59%) are all the same orange. Once the formats click, colour stops being guesswork. Here’s the short version, plus how to lift and combine colours in practice. Our free colour picker does the conversions and eyedropping for you as you read.
The three formats you’ll meet
- Hex —
#F0623C. Six base-16 digits: two for red, two for green, two for blue. Compact, and the standard in CSS and design tools. Hard to eyeball, easy to copy. - RGB —
rgb(240, 98, 60). The same three channels as plain 0–255 numbers. Easier to read; add a fourth value for opacity (rgba). - HSL —
hsl(13, 86%, 59%). Hue (position on the colour wheel), Saturation (how vivid), Lightness (how bright). This is the one to reach for when you want to adjust a colour rather than replace it.
They’re interchangeable — any picker converts between them in a click. Design in whichever one matches how you’re thinking.
How to grab the exact colour from anything
You rarely invent a colour from nothing — you lift it from a photo, a logo, or a site you like.
- On your screen — an eyedropper tool lets you click any pixel and returns its code. macOS ships Digital Color Meter; Chrome’s DevTools has a picker built in; a web colour picker works anywhere without installs.
- From an image — upload it to a picker and sample the pixels you want, or pull the dominant colours automatically to seed a palette.
- Tweak it — switch to HSL and nudge the lightness or saturation. This is how you get a “slightly darker version of that blue” without hunting blindly.
Turning one colour into a palette
A single good colour isn’t a design — a palette is. Use the colour wheel (that’s the Hue in HSL):
- Analogous — neighbours on the wheel (e.g. orange + amber + red). Calm and cohesive; great for backgrounds and gentle brands.
- Complementary — opposite hues (orange + blue). High energy and contrast; use one as the star and the other only for accents.
- Triadic — three evenly spaced hues. Playful and balanced, but keep one dominant so it doesn’t shout.
The rule that saves most palettes: one dominant colour, one or two accents, and plenty of neutral space. More than three working colours and things start to fight.
Don’t forget contrast
A pretty palette that no one can read has failed. For text, check the contrast ratio against the WCAG guidelines — aim for 4.5:1 for body text, 3:1 for large headings. If a pairing fails, keep the hue and adjust the lightness until it passes. A good picker shows the ratio as you go, so accessibility becomes part of choosing the colour rather than a fix-up afterwards.
Frequently asked questions
How do I get the hex code of a colour on my screen?
Use an eyedropper tool. Most operating systems and browsers now include one (macOS has Digital Color Meter; Chrome's DevTools has a colour picker), or use a web-based colour picker — click the pixel you want and it returns the hex code you can copy.
What is the difference between hex and RGB?
They describe the same thing — how much red, green and blue make up a colour — in different notation. RGB writes it as three numbers from 0–255, like rgb(240, 98, 60). Hex writes the same values in base-16, like #F0623C. Converters and pickers switch between them instantly.
What does HSL mean and why use it?
HSL is hue, saturation and lightness. It matches how people actually think about colour — pick a hue, then dial its vividness and brightness. It is far easier than hex for making a colour lighter, darker or more muted while keeping the same base hue.
How do I build a colour palette from one colour?
Start with one base colour and use the colour wheel. Analogous palettes take neighbours (calm, harmonious); complementary palettes take the opposite hue (high contrast, energetic); triadic palettes take three evenly spaced hues. Keep one dominant colour and use the others as accents.
How do I know if two colours have enough contrast?
Check their contrast ratio against the WCAG guidelines — 4.5:1 for normal text, 3:1 for large text. Plenty of pickers and checkers compute this for you; if text fails, adjust the lightness (the L in HSL) until it passes.