Colour Theory for the Web: What Works, What Does Not and Why

An earlier article on this blog covered how colour shapes whether visitors trust a website, examining colour temperature, contrast, and consistency from a practical business perspective. This article goes a layer deeper, into the underlying principles that explain why certain colour combinations work well, and others do not, and how those principles translate into practical decisions for a website palette.

You do not need to be a trained designer to find this useful. Understanding a handful of core colour relationships gives you a much clearer basis for evaluating design choices, briefing a designer, or making informed decisions when customising a theme or template. It also helps explain why some palettes feel harmonious, and others feel uncomfortable, even when you cannot immediately put your finger on the reason.

The Colour Wheel and Why It Still Matters

The colour wheel is the foundational tool of colour theory. It arranges colours in a circular sequence based on their relationships, with primary colours (red, yellow, and blue in traditional theory, or red, green, and blue in light-based digital colour) as the anchor points, and secondary and tertiary colours filling the spaces between them.

The reason the colour wheel matters in a digital context is that the relationships it describes- which colours sit opposite each other, which sit adjacent, which are evenly spaced around the circle- directly correspond to how colour combinations feel when placed alongside each other. Those feelings are not arbitrary. They result from how our visual system processes colour contrast and similarity, and they are sufficiently consistent across cultures and contexts to be genuinely useful as design guides.

The Main Colour Relationships

Complementary colours

Complementary colours sit directly opposite each other on the colour wheel. Red and green are complementary. Blue and orange are complementary. Purple and yellow are complementary. When placed next to each other, complementary colours create maximum contrast, each one making the other appear more vivid and intense.

This makes complementary pairings powerful for creating emphasis; a call-to-action button in an accent colour that complements the page’s dominant colour will stand out strongly. However, using complementary colours at full saturation across large areas of a design creates visual tension that can quickly become uncomfortable. The most effective use of a complementary pairing is typically to use a dominant colour for most of the design, with its complement used sparingly for accent and emphasis.

Analogous colours

Analogous colours sit adjacent to each other on the colour wheel: blue, blue-green and green. Orange, orange-red and red. They share a common undertone and create colour combinations that feel naturally harmonious and cohesive, because they are closely related in the colour spectrum.

Analogous palettes are a reliable choice for backgrounds, section colours and supporting tones within a design. They create a sense of unity without the tension of complementary pairings. The limitation is that they can feel flat or lack contrast when used without an accent colour for differentiation. A design built entirely from analogous colours often needs a single complementary or contrasting accent to give it life and direction.

Triadic colours

Triadic colours are three colours evenly spaced around the colour wheel, forming a triangle. Red, yellow and blue are a triadic set. Green, orange and purple are another. Triadic combinations are inherently balanced because of their equal spacing, but they are also inherently complex because three distinct hues compete for attention.

For most business website palettes, a full triadic scheme is more colour than is needed and more visual complexity than is helpful. Triadic thinking is useful for identifying a third accent or supporting colour that balances well with an existing two-colour pairing without feeling arbitrary.

Split-complementary colours

A split-complementary palette takes a base colour and, rather than pairing it with its direct complement, pairs it with the two colours on either side of that complement. The result is a scheme with most of the visual energy of a complementary pairing but with slightly more harmony and less tension. For website palettes where a complementary accent is needed but the direct complement feels too stark, a split-complementary approach often produces a more nuanced and workable result.

Monochromatic colours

A monochromatic palette uses variations of a single hue: different shades (the hue mixed with black), tints (the hue mixed with white) and tones (the hue mixed with grey). Monochromatic palettes are inherently cohesive because every colour in the palette shares the same underlying hue. They work well for creating a strong, unified brand impression and are often associated with premium or minimalist aesthetics.

The challenge with monochromatic palettes is creating sufficient contrast between elements. Since all the colours are related, distinguishing between a heading, body text, background, button and border requires careful management of lightness and saturation values rather than relying on hue difference to do the separating work.

Hue, Saturation and Lightness

Understanding colour relationships requires understanding three properties that describe any colour precisely.

Hue

Hue is the colour itself in its purest sense: the position on the colour wheel. Red, teal, orange, purple. When people say a colour is blue or green, they are describing its hue.

Saturation

Saturation describes the intensity or purity of a colour. A fully saturated red is the most vivid, intense version of red. A desaturated red moves towards grey while retaining its reddish quality. Fully saturated colours are energetic and attention-grabbing. Desaturated colours are calm, sophisticated, and easier to live with over longer periods of exposure.

Most professional website palettes use moderately to heavily desaturated colours for large areas and backgrounds, reserving higher saturation for accents and calls to action. A website built from fully saturated colours feels overwhelming very quickly.

Lightness

Lightness describes how light or dark a colour is, from near-black to near-white while retaining the hue. Managing lightness is how designers create contrast within a palette: a light background with dark text, a dark button on a light surface, a light section following a dark one.

Lightness contrast is also the primary determinant of accessibility compliance. The WCAG contrast ratio requirements discussed below are fundamentally about the difference in lightness between foreground and background colours.

Colour Temperature

Colour temperature refers to the perceived warmth or coolness of a colour. Reds, oranges and yellows are warm colours, associated psychologically with energy, warmth, urgency and approachability. Blues, greens and purples are cool colours, associated with calm, reliability, distance and professionalism.

Most business website palettes lean towards cool colours because the associations of reliability and professionalism are broadly applicable across sectors. Warm accent colours are widely used for calls to action precisely because they create a sense of energy and urgency against a cooler backdrop, drawing the eye and prompting action.

Warm and cool within a single colour

It is worth knowing that individual colours can themselves lean warm or cool within their category. Blues range from warm (cobalt, with its slight red undertone) to cool (cyan, with its green undertone). Greens range from warm (yellow-green) to cool (blue-green). When building a palette, mixing warm and cool versions of related hues can create unintentional disharmony. A warm blue and a cool green in the same palette may clash in a way that is difficult to identify without understanding their temperature relationship.

Contrast and Accessibility

Contrast in the context of colour theory refers to the difference in lightness between two colours placed together. It is directly relevant to both design effectiveness and legal accessibility compliance.

WCAG contrast ratios

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text against its background. The standard level (AA compliance) requires a contrast ratio of at least 4.5 to 1 for normal body text and 3 to 1 for large text (18 point or larger). The enhanced level (AAA compliance) requires 7 to 1 for normal text and 4.5 to 1 for large text.

These ratios sound abstract but are straightforward to check using free tools. The WebAIM Contrast Checker at webaim.org/resources/contrastchecker and the browser-based tool at contrast-ratio.com both allow you to enter two colours and see the resulting contrast ratio and whether it passes at AA or AAA level.

Why this matters beyond compliance

Meeting WCAG contrast ratios is a legal requirement in many contexts, particularly for public sector organisations and businesses with a duty not to discriminate on grounds of disability. But the practical case for adequate contrast extends to all websites. Text that is difficult to read due to low contrast is less likely to be read, less likely to convert, and less likely to create a positive impression of the organisation behind it. Adequate contrast is good design, not only good compliance.

Colour blindness

Approximately 8% of men and 1% of women have some form of colour vision deficiency. The most common form is red-green colour blindness, where red and green hues that appear clearly different to most people appear similar or identical. A design that relies solely on colour to communicate information, such as using red for errors and green for success without any other distinguishing element, will fail for a meaningful proportion of visitors. Using colour alongside shape, text or pattern ensures the information remains accessible regardless of colour vision.

Building a Web Colour Palette

Most effective website palettes are built from a small number of carefully chosen colours with clearly defined roles.

A practical palette structure

• A primary colour: the dominant brand colour, used for headings, key UI elements and the overall visual identity. This should be the colour that, more than any other, people associate with the brand.
• A secondary or supporting colour: used for backgrounds, section colour variation and supporting elements. Often a desaturated or lighter variant of the primary, or an analogous colour that complements it without competing.
• An accent colour: used sparingly for calls to action, highlights and emphasis. Ideally a complementary or split-complementary colour to the primary, providing contrast and drawing the eye.
• Neutral colours: light and dark neutrals for backgrounds and text. These are typically near-white, near-black and one or two mid-tones, often with a very slight warmth or coolness that reflects the overall palette temperature.

Testing the palette in context

A palette that looks coherent as a set of colour swatches does not always translate well to actual interface elements. Testing colours in context, as background and text combinations, as button and hover states, as section colours in sequence, reveals relationships and contrasts that are invisible when looking at isolated swatches. Most professional designers iterate the palette through multiple rounds of application and adjustment before settling on a final version.

Colour in the Context of Your Brand

Colour choices for a website do not exist in isolation. They sit within a broader brand context that includes the sector the business operates in, the audience it serves, the competitors it sits alongside, and the existing brand assets such as a logo that may already use specific colours.

A useful exercise when developing or evaluating a palette is to look at the colour choices of the five or ten most visible competitors in the same space. Patterns usually emerge: sectors tend to converge on certain colour temperatures and hue families. Understanding those patterns allows a deliberate decision about whether to align with them, standing within the visual conventions of the sector, or to differentiate, standing out visually while accepting that the differentiation may feel unexpected to some audiences.

For businesses in Oxfordshire and the wider region, that sector awareness is just as relevant as it is for national brands. A professional services firm in the area sits within a visual landscape shaped by the firms and organisations around it, and colour choices that feel at home in that landscape tend to build trust more quickly with a local audience than choices that feel imported from a different context.

A Colour Review Checklist

☐  The palette uses no more than four or five colours in active use, with clearly defined roles for each

☐  The primary and accent colours have a clear, intentional relationship (complementary, split-complementary or similar)

☐  Body text against its background meets WCAG AA contrast ratio (minimum 4.5 to 1)

☐  All text elements have been checked for contrast, including text on coloured backgrounds and reverse-out text

☐  The palette has been checked using a colour blindness simulator to confirm it works for users with colour vision deficiencies

☐  The palette temperature is consistent; warm colours are not mixed arbitrarily with cool colours

☐  The palette has been tested in context, applied to actual page elements rather than evaluated only as swatches

☐  The palette has been viewed on both a calibrated Mac monitor and a typical Windows screen, since colour rendering differs between the two

Frequently Asked Questions

Do I need to understand colour theory to choose colours for my website?

Not in a formal sense. Many effective website palettes are built by designers working largely from instinct and experience rather than explicit colour theory. However, understanding the basic principles gives you a clearer basis for evaluating design proposals, identifying why something feels off, and making informed adjustments. It is the difference between knowing that something does not look right and knowing why it does not, which is a meaningful practical advantage when working with a designer or customising a template.

Should I use my brand colours exactly on my website?

Your brand colours provide the starting point, but they may need adjustment for screen use. Print colours are defined in CMYK or Pantone values and can look very different on screen when converted to RGB or hex values. If your brand colours were originally defined for print, checking how they render on screen and adjusting the digital versions to match the intended appearance is worth doing before they are embedded in a website build.

Is it safe to use black text on a white background, or is that too plain?

Near-black text on a near-white background is one of the most readable, accessible and versatile colour combinations available, and it forms the foundation of a large proportion of professional website designs. The perception that it is too plain typically comes from comparing it to more colourful alternatives in isolation rather than in the context of a complete design. A palette with a strong primary brand colour, a carefully chosen accent, and near-black text on a near-white body background is usually more effective than one that tries to do more with colour throughout.

Can I use a dark background with light text on my website?

Yes, and when done well it can look distinctive and high-end. The requirements are the same as for light backgrounds: adequate contrast between text and background (WCAG AA minimum of 4.5 to 1), consistent application throughout, and careful management of images and other elements that may have been designed for a light context. The practical challenge is that a dark background requires every other design element- images, icons, illustrations, form fields- to be specifically designed or adjusted for the dark context, which adds complexity to the build and to any future content updates.

How do I choose an accent colour if I am starting from scratch?

Start with the primary colour and find its complement on a colour wheel tool (Adobe Colour at color.adobe.com is a good free option). Test the direct complement first, then consider the two split-complementary options on either side. Desaturate the chosen accent slightly from its pure form, which reduces visual tension and makes it more workable across a range of contexts. Then check the contrast ratio of the accent against the backgrounds it will be used on, adjusting lightness until it meets WCAG AA as a minimum.

Want Your Colour Palette Reviewed?

If you are unsure whether your current colour choices are working as well as they could, or if you are starting a new design and want guidance on palette development, get in touch for a straightforward conversation with no obligation and no sales pitch.