Colour is one of the first things people take in when visiting a website. Before they engage, before they read any text or click any buttons or navigate anywhere, they’ve already registered the colours surrounding the page.
That makes colour an important consideration, but finding a colour combination that looks good is only part of it.
Colours affect the hierarchy of information on a page, the ability to read and follow the content, branding, accessibility and usability, plus visual appeal and tone.
Combinations that look good one place may feel completely wrong elsewhere.
A playful set of colours may be perfect for a children’s brand, while something more restrained would be more appropriate for a finance company.
Within a scheme itself, the relative use of colours affects how readable and navigable a design is.
A great website design balances visual appeal and usability. Let’s look at the most important considerations when choosing colours for a website.
Why Colour Matters in Web Design
Colour allows a designer to communicate outside the realm of words. A bright accent can draw attention to a call-to-action button. A dark background creates a moody feel. Subtler combinations allow a calmer appearance, while louder pairs suggest energy.
Colour can also help indicate the structure of a website. If every call to action uses the same colour, users learn to instinctively associate them with interactive elements. If links use a specific colour, users will be familiar with them on any given page.
This is why colour shouldn’t be used merely as decoration; it should serve the purpose of the website.
Creating a Consistent Website Colour Palette
The first step for any website design project often involves figuring out the colour palette that will form the basis of the website’s branding and design.
A website will typically have a primary brand colour, one or more secondary colours, an accent colour, background colours, text colours, and colours for interface elements. The challenge is to ensure that all the colours work well together.
Choosing colours out of thin air often results in a list that doesn’t look good together. Instead, a designer might pick one colour and create a colour palette generator based on relationships between that colour and other colours.
A colour palette generator can help greatly in this process by suggesting combinations based on colours that relate to one another through complementary, analogous, triadic, split-complementary, tetradic, and monochromatic schemes.
This doesn’t mean that the suggested combinations should be used as-is on the final website, but they’re an excellent way to begin experimenting with colours and see what works best given the brand, content, target audience and accessibility considerations.
Colour and Visual Hierarchy
Not every element on a website deserves equal attention. Visual hierarchy ensures that visitors know where to focus their attention. It also ensures that they have an intuitive understanding of what the most and least important information is on a given page.
Colour plays a large role in visual hierarchy.
Consider a landing page that contains a headline, a supporting paragraph, a primary CTA button, a secondary button, and several links. If every one of these receives the same amount of attention and colour, nothing stands out on the page.
The page needs hierarchy to guide the eye towards the most important information, without animations, oversized graphics or anything else that demands more focus than intended.
A more refined approach could use a neutral background colour with dark text, a second more subdued colour for the secondary elements, and an accent colour for the most important call to action.
Colour Should Support Branding
A website is one of the most prominent ways for a company to present its brand to the world.
Colours used in a website should therefore fit in with the colours used in other materials. If other materials use a mix of colours, a website should reflect that too.
Consistency doesn’t mean that every page must use the exact same colours. Rather, other elements can use variations of the palette, ensuring that everything continues to appear unified.
For example, a technology company could use a strong blue as its brand colour, use lighter shades for backgrounds and other elements, and a contrasting colour for highlights and CTAs.
The same brand colour palette can be used to create buttons, icons, illustrations, navigation, forms, and other elements.
Why Colour Contrast Matters
A colour combination can look beautiful, but it might also be unreadable.
This is particularly important to consider for text, buttons, links, and other elements. Dark text on a light background is generally more readable than a combination with little overall contrast.
Designers should also be mindful that a given contrast might not be achievable in certain applications. A colour that looks great on a large headline may struggle to provide enough contrast on small text.
Accessibility should therefore be considered as part of the design process, rather than as a final checkpoint.
Tools that provide contrast information can help identify potential issues, but a colour palette generator with a built-in contrast checker can be useful in experimenting with combinations and deciding which colours are appropriate for text and interface.
Colour should not be the sole indicator for any information on a website. However, that can be a point where aesthetics and usability collide.
An online form could use green to indicate successful fields and red to indicate errors, but a visitor who cannot distinguish those colours would be unable to identify those fields.
Additional indicators can be important. Error messages, icons, text, borders, patterns, and other features can reinforce what colours on a page indicate.
Colour can similarly be useful in other places, such as in charts and graphs. Using multiple colours for a chart may look nice, but indicators such as text can make it easier to understand the content.
Consider Different Types of Users
Not all users have the same colour perception. Some users have colour vision deficiencies and cannot easily distinguish between certain colours. Some may view the website on different types of screens that use different colour displays.
This is one reason why websites should not rely on subtle differences between colours to indicate information.
If two interface elements have different functions, those functions should be clear beyond just their colour.
Designers can also use colour-blindness simulation tools to identify combinations that look fine during the design process but are problematic in other circumstances.
Thinking about these situations during the design stage can reduce potential redesign costs.
Use Colour Consistently for Buttons and Links
Interactive elements on a website should be easily identifiable.
Clicking one button can mean ‘Continue’, while clicking another can mean ‘Cancel’. Links can use one colour, while others use multiple colours without any obvious unifying factor.
A simple colour system can help. For example:
- Primary colour for the main CTA
- Secondary colour for secondary CTAs
- Neutral colours for other controls
- Error colour for warnings
- Success colour for completed actions
- Consistent style for links
These rules don’t need to be complicated. What’s important is the consistency of the rules.
This becomes even more important on larger sites where many different elements, pages, and templates exist.
Don’t Use Too Many Colours
More colours do not equal a more interesting website. In fact, too many colours can overwhelm a visitor and cause them to become uncertain about what they should pay attention to.
On the other hand, a well-balanced colour palette gives a designer more flexibility in indicating what’s important.
esn’t mean every website should go minimalistic, but a combination of colours can work extremely well when they have clearly defined roles.
Backgrounds, typography, buttons, illustrations, cards, icons, and other elements should relate to one another.
Test Colours in the Actual Website Design
A palette can look outstanding on a design board and completely different on an actual website.
A designer could test a blue against a white background and think it looks great, only for it to look wrong once the blue is placed as part of a header, button, form, card, or footer.
This is why colours should be used in the context of the website. Before settling on a colour, create examples of the most important components on the website and test the colours in them.
Once the palette has been selected, it’s important to test it with major website elements, such as headings, body copy, buttons, navigation, forms, cards, and alerts.
It’s also a good idea to test the colour palette on different screen sizes. A colour that looks subtle and balanced on a large monitor may appear overpowering on a mobile screen. Different users may also view the website on different types of screens.
Experiment Before Settling on a Final Palette
There is no need to settle on the first combination that looks good.
Many interesting colour combinations can emerge from experimentation. A designer can experiment with a brand colour and related palettes, adjusting saturation and brightness, and testing how colours interact within the same interface.
Colorik’s colour palette generator provides an excellent base for doing this experimentally. A designer can use the tool to generate palettes using various relationships, modify colours, create gradients, test contrast and colour blindness, and test how palettes look in different contexts.
Colorik’s colour palette generator and experiment tools can be especially valuable during the early design phase. At this stage, modifying a colour system is much simpler than it will be later when a website has already been developed.
Think About Colour as Part of a Design System
For larger websites, colour should be part of a wider design system, rather than a stand-alone entity.
Instead of choosing individual colours for every page, designers can work with colour roles for elements.
These might include primary, secondary, accent, background, surface, heading, body, border, success, warning, error colours.
This approach supports consistency across the entire website and reduces development and redesign costs, since changes are made in fewer locations.D
velopers can also work with this information to turn these colours into CSS variables or design tokens, so that they can be used consistently across components.
Colour Should Work with the Rest of the Design
Colour is only one element of a design. While a strong colour scheme can do a lot, it cannot fix confusing information architecture, bad typography, overcrowded layouts, slow performance, or unusable forms.
Where should the colour scheme be used? The colour scheme is most effectively used in conjunction with spacing, typography, imagery, layout, interactivity and responsive design.
For instance, a more prominent accent colour is much more effective if the highlighted element is surrounded by sufficient whitespace.
Equally, even brilliant text contrast is wasted if the type is too small or crowded. All decisions should be in the context of the eventual user of the information.
Conclusion
The use of colour in a web design is an even more significant element than its decorating the website. It can also serve to differentiate brands, inform the visitor about the information on a page and help accessibility.
However, the selection of colours should be carefully considered. If the contrast is poor, lack of consistency or too much variation in colour, or if colour is used as the only indicator this can result in serious accessibility and usability problems.
The most effective solution is to consider colours as part of the wider design system of the website. Use a well thought out colour palette, explore different colour combinations, test contrast and accessibility and consistently use colours across the website.
Through the proper mix of creative and usability and the right colour application, colour becomes more than a visual enhancement. It becomes one additional tool in helping a website communicate and deliver a great experience.
