Colour
Colour theory, palettes and gradient colours, with codes you can copy.
200 guides · 11 topics
ColourColor theory basics for people who don't design
5 min read
You do not need art school to choose colours well. Six ideas explain almost every colour decision, and each one can be learned in a few minutes.
ColourHow to use a color wheel to choose a palette
5 min read
The colour wheel is the oldest tool in colour and still the most useful. Here is how to read one, why the painter's wheel and the screen wheel disagree, and how to turn it into a palette.
ColourComplementary colors: contrast that still feels balanced
5 min read
Opposite colours give the strongest contrast colour can offer, and the quickest route to a design that hums or one that shouts. The difference is proportion and lightness.
ColourAnalogous colors: the easiest route to a calm palette
5 min read
Pick three neighbours on the colour wheel and you almost cannot go wrong. The skill is in giving them enough contrast to stay interesting and knowing when to break the calm.
ColourTriadic colors and split-complementary palettes, explained
5 min read
Three evenly spaced colours can make a palette feel bold and balanced at once, or like a children's toy box. The difference is almost entirely about which colour leads.
ColourMonochromatic color scheme: one hue, a whole identity
4 min read
One hue sounds limiting until you see how much range lives inside it. Built properly, a single colour can cover backgrounds, text, buttons and gradients, and look more distinctive than a rainbow.
ColourHow to choose brand colors: a step-by-step method
6 min read
Brand colours are chosen, not found. A clear method gets you from a blank page to a palette that is distinctive, readable and still right in two years' time.
ColourColor psychology: what's real and what's myth
5 min read
Charts that say red means hunger and blue means trust are everywhere, and mostly too simple to be useful. Here is a more honest account of what colour does, and how to use it well.
ColourColor meanings in different cultures: a careful guide
6 min read
White can mean a wedding or a funeral. Red can mean danger or good fortune. If your designs travel, here is what the main colours carry in different places, and how to check before you launch.
ColourPurple gradients: palettes, codes and how to use them
5 min read
Purple is one of the most-used gradient colours on the web, which makes it both a safe choice and an easy one to get lost in. Here are palettes that feel considered, with the codes to use them.
ColourBlue gradients: 20 palettes from ice to midnight
5 min read
Blue is the safest colour in design, which is exactly why so many blue gradients look the same. Here are twenty that don't, grouped from lightest to darkest, with the codes and the thinking behind them.
ColourPink gradients that feel modern, not saccharine
5 min read
Pink can look like a sweet shop or a fashion magazine. The difference is rarely the pink itself; it is what you put next to it. Here are palettes, pairings and codes for pink that feels current.
ColourSunset gradients: orange, coral and dusk palettes
5 min read
Most sunset gradients go wrong in the same place: the middle, where blue meets orange and turns to grey. A real sky never does that. Here is the order nature uses, and ten palettes built on it.
ColourGreen gradients: fresh, deep and electric
5 min read
Green can be a spring morning, a private members' club or a rave flyer. Here are green gradients for each, with codes, and a way out of the leaf-green cliché.
ColourBlack gradients: designing with near-black
6 min read
Pure black is a hole in the screen. The black gradients that feel expensive are built from near-blacks with a little colour inside them, and a light that moves.
ColourRed gradients: energy without the alarm
5 min read
Red gets attention faster than any other colour, which is exactly why it goes wrong. How to build red gradients that feel alive, warm and confident instead of loud.
ColourRainbow gradients that don't look like a default preset
5 min read
The default rainbow has a glaring yellow stripe and a dark blue hole in it. Fix the lightness, choose your arc and the spectrum becomes one of the most joyful tools you have.
ColourColor contrast: readable text for everyone
5 min read
Contrast is the difference between words people read and words people skip. The WCAG numbers in plain English, how to check them, and what changes when the background is a gradient.
ColourHex color codes, RGB, HSL and OKLCH explained
5 min read
#7c3aed, rgb(124 58 237), hsl(262 83% 58%) and oklch(54.1% 0.247 293) are the same violet. Here is what each notation is actually saying, and when each one earns its place.
ColourColor palette from image: how to pull one from a photo
5 min read
An eyedropper gives you a pixel. A palette needs the colours you remember from the picture, in the right proportions. Here is how to get from one to the other.
ColourThe 60 30 10 rule: a colour ratio for designs and brands
5 min read
Most palettes fail on proportion, not choice. Three numbers tell you how much of each colour to use, and they work as well on a phone screen as in the living rooms they came from.
ColourWarm and cool colors: using temperature on purpose
5 min read
Every colour has a temperature, including your greys and whites. Learn to read it and you can make a design feel closer, calmer or brighter without changing a single hue.