Colour is one of the most powerful tools in a designer's arsenal. It can evoke emotion, guide attention, communicate brand identity, and even influence behaviour. Yet many web designers and developers approach colour haphazardly — picking shades that "look nice" without understanding the underlying principles that make colour work effectively.
In this guide, we will explore the fundamentals of colour theory, from the colour wheel to advanced concepts like colour psychology, accessibility, CSS implementation techniques, dark mode design, design system architecture, A/B testing, animation, and cultural differences. By the end, you will have a systematic approach to selecting and combining colours that not only look good but also serve your users and your brand.
The Colour Wheel: Your Foundation
The colour wheel is the starting point for understanding how colours relate to one another. Developed by Sir Isaac Newton in 1666, it organises colours into a circle based on their hue relationships. The traditional RYB (red-yellow-blue) colour wheel is what most artists learn first, but for digital work, the RGB (red-green-blue) additive model is more relevant since screens emit light.
The wheel is divided into:
- Primary colours: Red, green, and blue in the RGB model. These cannot be created by mixing other colours.
- Secondary colours: Cyan, magenta, and yellow — created by mixing two primaries.
- Tertiary colours: The six colours between primary and secondary colours, such as orange-red or blue-green.
Harmonious Colour Relationships
Understanding how colours interact is essential for creating palettes that feel cohesive rather than chaotic. Here are the most common harmonious relationships:
- Complementary: Colours opposite each other on the wheel (e.g., blue and orange). These create high contrast and visual vibrancy. Use them for call-to-action buttons or highlights.
- Analogous: Colours adjacent to each other (e.g., blue, blue-green, green). These create a serene, cohesive feel. Ideal for backgrounds and secondary elements.
- Triadic: Three colours evenly spaced around the wheel (e.g., red, yellow, blue). These are bold and balanced but require careful proportion — let one colour dominate and the others accent.
- Split-complementary: A base colour plus the two colours adjacent to its complement. Less contrast than pure complementary but more variety.
- Monochromatic: Variations in lightness and saturation of a single hue. Elegant and easy to execute, great for minimalist designs.
Colour Psychology in Web Design
Colours carry emotional associations that vary by culture, context, and individual experience. However, some broad patterns hold across Western audiences:
- Blue: Trust, stability, calm. Used by banks, social networks, and healthcare.
- Red: Urgency, passion, excitement. Effective for warnings, sales, and calls to action.
- Green: Growth, health, sustainability. Popular for eco-friendly brands and financial growth.
- Yellow: Optimism, energy, caution. Use sparingly — it can be overwhelming in large areas.
- Purple: Luxury, creativity, spirituality. Associated with premium and imaginative brands.
- Black: Sophistication, power, elegance. The default for luxury and fashion.
- White: Purity, simplicity, cleanliness. The foundation of modern minimalism.
Remember: context matters. A red "Buy Now" button works because red signals action. A red error message also works because red signals danger. The same colour can serve opposite purposes depending on surrounding cues.
Accessibility: Colour and Contrast
An estimated 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. Designing with only colour to convey information excludes a significant portion of your audience. The Web Content Accessibility Guidelines (WCAG) provide concrete standards:
- Minimum contrast ratio: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold).
- Enhanced contrast: 7:1 for normal text at the AAA level.
- Never rely on colour alone: Use icons, labels, patterns, or text in addition to colour for meaning.
Tools like the ReddTools Colour Picker include a built-in contrast checker to verify your combinations meet WCAG standards. Always test your palette before shipping.
Colour in CSS: Modern Techniques
CSS has evolved dramatically in its handling of colour. Modern techniques give designers unprecedented control:
CSS Custom Properties (Variables)
Define your palette once and reference it throughout your stylesheet. This enables theming: change a single variable value and the entire site updates. For dark mode support, override the variables inside a @media (prefers-color-scheme: dark) block.
OKLCH and Modern Colour Spaces
The oklch() colour space, supported in all modern browsers, separates lightness from chroma and hue. Unlike HSL, where a hue shift can unexpectedly change perceived brightness, OKLCH maintains perceptual uniformity. This makes it ideal for generating accessible tints and shades programmatically.
color-mix() and Relative Colours
The color-mix() function lets you blend two colours by percentage — perfect for generating hover states or focus rings that relate to your base palette. Relative colour syntax (lighter/darker variants) further simplifies the creation of semantic colour tokens.
Dark Mode Palette Design
Designing for dark mode is not simply inverting your light palette. Pure white text on pure black creates excessive contrast that causes eye strain. Instead:
- Use off-black backgrounds (#121212 or #1a1a1a) rather than #000000.
- Reduce saturation in dark mode — highly saturated colours vibrate against dark backgrounds.
- Increase contrast for text slightly (target 5:1 rather than 4.5:1) because dark mode reduces perceived sharpness.
- Test your dark palette at night with screen brightness at minimum — many dark mode failures only appear in low-light conditions.
Design System Colour Architecture
Large organisations structure colour into layers that separate design intent from implementation:
- Primitive tokens: The raw palette values (blue-500: #0066CC, red-500: #CC0000). These rarely change.
- Semantic tokens: Meaningful names tied to usage (primary-default, error-background, success-text). These reference primitive tokens.
- Component tokens: Specific to UI elements (button-primary-background, input-border-focus). These reference semantic tokens.
This three-layer approach means that a rebrand requires changing only the primitive token mappings. The semantic and component layers remain stable, reducing the risk of broken UI when colours shift.
A/B Testing Colour
Colour is one of the highest-leverage variables to test because it is cheap to change and directly affects conversion:
- Button colour: HubSpot found that red call-to-action buttons outperformed green by 21% in one test — but this varies by context. Red signals urgency; green signals safety. The winning colour depends on what action you want the user to take.
- Background colour: A/B tests on checkout pages consistently show that clean white backgrounds reduce cart abandonment compared to textured or coloured backgrounds. The mechanism is reduced cognitive load.
- Link colour: Blue underlined links remain the most recognised clickable element. Deviating from this convention (e.g., black links with no underline) consistently reduces click-through rates in usability studies.
When testing colour, always test against a clear hypothesis ("We believe red will increase urgency for limited-time offers") rather than randomly swapping colours. This ensures you learn something actionable regardless of the outcome.
Colour in Motion and Animation
Animated colour transitions require additional consideration:
- Avoid flashing: Rapid colour changes between high-contrast pairs can trigger seizures in photosensitive individuals. WCAG recommends no more than three flashes per second.
- Animate in perceptually uniform spaces: Interpolating through HSL often produces muddy greys mid-transition. Interpolating through OKLCH or LAB produces smoother, more natural transitions.
- Loading states: Subtle colour shifts (e.g., a desaturated primary colour gradually saturating) communicate progress without requiring text labels.
Cultural Colour Differences
Colour meaning is not universal. Designing for global audiences requires awareness of cultural associations:
| Colour | Western Association | Eastern Association |
|---|---|---|
| Red | Danger, love, urgency | Luck, prosperity, celebration (China); mourning (South Africa) |
| White | Purity, cleanliness | Mourning, death (India, China) |
| Green | Growth, environmentalism | Infidelity (China); sacred (Islam) |
| Yellow | Caution, optimism | Royalty, bravery (China); mourning (Egypt) |
| Black | Elegance, death | Mourning (universal); also power and authority |
When localising products for international markets, audit your palette against the target culture's associations. A financial app using green as a positive indicator works in the West but may confuse users in China, where red is the colour of prosperity.
Building Your Palette: A Practical Workflow
Here is a repeatable process for creating effective colour palettes:
- Define the mood: What emotion should your site evoke? Write down 3-5 adjectives.
- Choose a dominant colour: This is your brand colour. It should appear in your logo and appear most frequently.
- Select supporting colours: Use analogous or split-complementary relationships for harmony.
- Add neutrals: Greys, blacks, and whites for text, backgrounds, and borders. A good rule: 60% neutral, 30% secondary, 10% accent.
- Test for accessibility: Verify contrast ratios for all text/background combinations.
- Test in context: Apply the palette to real UI elements and view them together.
Tools for Colour Selection
Several free tools can accelerate your palette creation:
- ReddTools Colour Picker — Extract colours from images and check contrast ratios.
- Adobe Color — Generate palettes from the colour wheel with preset harmony rules.
- Coolors — Rapid palette generation with locking and refinement.
- WebAIM Contrast Checker — Verify WCAG compliance for text colour pairs.
Common Mistakes to Avoid
- Too many colours: Limit your active palette to 3-5 hues. More creates visual chaos.
- Ignoring context: A bright palette works for a children's site but feels unprofessional for legal services.
- Poor contrast: Light grey text on white is fashionable but unreadable.
- Colour without meaning: Every colour choice should serve a purpose — decoration alone is not enough.
Conclusion
Colour theory is not about rigid rules — it is about understanding relationships so you can break them intentionally. Start with the wheel, learn the harmonies, respect accessibility, master modern CSS techniques, consider cultural context, and always test in real contexts. The best palettes feel inevitable: every colour belongs exactly where it is.
Ready to put theory into practice? Try the ReddTools Colour Picker to extract colours from inspiration images and verify your combinations meet accessibility standards.