Design · 2026-06-28
Colour is one of the most powerful tools in a web designer's toolkit. It creates mood, directs attention, communicates brand identity and affects how users perceive and interact with a website. Studies consistently show that colour influences purchasing decisions, trust signals and how long visitors stay on a page.
Getting colour right does not require artistic talent. It requires understanding a few fundamental principles and applying them consistently.
The colour wheel arranges hues in a circle based on their relationship to the three primary colours (red, yellow, blue in traditional theory; red, green, blue in digital). Understanding the wheel unlocks several reliable colour combination strategies:
Colours directly opposite each other on the wheel create high contrast and visual energy. Blue and orange, red and green, purple and yellow are complementary pairs. Use these when you want elements to stand out — call-to-action buttons, alerts or key information.
Colours adjacent on the wheel create harmonious, cohesive designs. Blue-green-teal, red-orange-yellow, purple-blue-indigo. These palettes feel natural and are easy on the eyes. Most professional websites use analogous colour schemes.
Three colours evenly spaced around the wheel (forming a triangle) create vibrant, balanced designs. Red-yellow-blue and orange-green-purple are triadic combinations. These work well for playful, energetic brands.
While hex codes (#FF5733) and RGB values are common in code, HSL (Hue, Saturation, Lightness) is the most intuitive model for choosing colours:
- Hue (0–360°): the actual colour — red at 0°, green at 120°, blue at 240°
- Saturation (0–100%): how vivid the colour is — 0% is grey, 100% is pure colour
- Lightness (0–100%): how bright — 0% is black, 50% is pure colour, 100% is white
The power of HSL is that you can create entire palettes by keeping the hue constant and varying saturation and lightness. This gives you tints (lighter), shades (darker) and tones (less saturated) that all harmonise because they share the same base hue.
Most professional websites use just two or three colours: a primary brand colour, a secondary accent, and a neutral (grey, white, or dark). Adding more colours makes a design feel chaotic.
Apply your dominant colour to 60% of the design (backgrounds, large sections), the secondary to 30% (headers, cards, navigation), and the accent to 10% (buttons, links, highlights).
Colour contrast matters for readability. The Web Content Accessibility Guidelines (WCAG) require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Our Hex Colour Picker shows contrast ratios in real time.
About 8% of men have some form of colour vision deficiency. Never use colour alone to convey information — add icons, labels or patterns. Red-green colour blindness is the most common type, so avoid relying on red vs green distinctions.
If your site supports dark mode, your colour palette needs to work in both light and dark contexts. Bright colours that look great on white backgrounds can be harsh on dark backgrounds. Reduce saturation slightly for dark mode variants.
While colour psychology is not an exact science, certain associations are well-established in Western web design:
- Blue: trust, professionalism, calm — used by banks, tech companies, healthcare
- Green: growth, nature, success — used for environmental, financial, health brands
- Red: urgency, energy, passion — used for sales, food, entertainment
- Orange: friendly, confident, creative — used for calls to action
- Purple: luxury, creativity, wisdom — used for premium brands
- Black: sophistication, elegance, authority — used for luxury, fashion
Our free Colour Palette Generator creates harmonious palettes using these colour theory principles — pick a base colour and get complementary, analogous and triadic suggestions instantly — and the Font Pairing Suggester is a natural next step once your palette is settled.