Colour is the first thing the human brain registers on a website, before the text and before the images. Within 90 seconds a visitor forms an opinion about your brand, and 62 to 90% of that impression is based on colour alone. Brand recognition rises by 80% when a brand colour is used consistently, and colour influences 85% of impulse purchase decisions.
This is not magic, it is applied neuropsychology. Understanding why certain colours trigger trust, urgency or desire gives you a concrete conversion lever, right inside your site's code.
What do colours mean in web design, sector by sector?
Every colour triggers unconscious associations that decades of branding have embedded in our shared culture. Here are the 8 fundamental colours and their strategic uses:
Red: urgency, passion, energy, appetite. Used for sales CTAs, promotions and food. In excess it creates stress and aggression. Examples: Netflix, YouTube, Coca-Cola.
Blue: trust, security, competence, stability. The number one colour in B2B, finance, technology and healthcare. 33% of Fortune 500 brands use it as their primary colour. Examples: Facebook, LinkedIn, PayPal, Samsung.
Green: nature, health, growth, money, permission ("go ahead"). Ideal for sustainability, healthcare, finance and confirmation buttons. Examples: Spotify, WhatsApp, Whole Foods.
Yellow: joy, optimism, attention, warmth, energy. For accents and brands aimed at a young, family audience. In excess it tires the eyes. Examples: McDonald's, IKEA, Snapchat.
Orange: dynamism, approachability, creativity, enthusiasm. Excellent for secondary CTAs, it catches the eye without the aggression of red. Examples: Amazon, Etsy, Harley-Davidson.
Purple: luxury, creativity, wisdom, mystery, spirituality. For beauty, premium, creative tech and wellbeing. Examples: Twitch, Cadbury, Hallmark.
Black: elegance, sophistication, luxury, authority, minimalism. The high-end colour par excellence. Examples: Apple, Chanel, Nike, Rolex.
White: purity, simplicity, space, cleanliness, technology. As a background colour it creates air and lets the content shine. Used heavily by tech and medical brands.
A table to help you choose by sector:
| Sector | Primary colour | Why |
|---|---|---|
| Finance and insurance | Blue | Trust, stability, seriousness |
| Healthcare and wellbeing | Green or light blue | Calm, healing, nature |
| Luxury and premium | Black, gold, white | Elegance, exclusivity, rarity |
| E-commerce | Varies, plus red or orange for CTAs | Urgency, action, energy |
| Sustainability and organic | Green, beige, brown | Nature, durability, authenticity |
| Food | Warm tones (red, orange, yellow) | Appetite, conviviality, energy |
| Trades and local services | Orange, brown, dark green | Closeness, trust, tradition |
How do you build a professional colour palette for your website?
The method, in 4 steps:
Step 1, start from the primary colour
It is often set by your logo or your sector. If you do not yet have a brand colour, pick one that distinguishes you from your 3 direct competitors while staying true to your values.
Step 2, generate the palette with tools
Coolors.co, Adobe Color, Realtime Colors and Huemint are free tools that build harmonious palettes from a starting colour. In 5 minutes you have a tested, coherent palette.
Step 3, define the variants
For each colour: 5 light shades (for section backgrounds), the main tone, and 4 dark shades (for text and accents). Tailwind CSS, the library we use at ConvertiLab, offers a system running from 50 to 950 in steps of 100, which is an efficient reference.
Step 4, test in a real context
Never on an isolated white background. Test your palette on a mockup of your real page, with the real text and the real images. Colours change radically depending on their context.
The 60-30-10 rule:
The colour of your main button should be the rarest on the page, because it is the contrast that generates the click, not the colour itself.
The 4 colour harmonies:
Which colour mistakes should you avoid so you do not kill your conversions?
The 6 most expensive mistakes in web design:
A measurable effect: an orange button on a blue background statistically outperforms the same button in blue (the primary colour) by 35 to 50% in most A/B tests run on service businesses, because orange creates immediate contrast against a blue background.
See examples in our portfolio and assess your site's palette with our Design Score.
Colour work: building your palette in 4 steps
A website's colour scheme is the art of choosing very few colours and giving each one a job. Here is the method we apply to every mockup.
| Role | Share of the page | Example for a consultancy | Example for a wellbeing shop |
|---|---|---|---|
| Dominant | 60 % | Midnight blue and off-white | Sage green and cream |
| Secondary | 30 % | Blue-grey | Blush beige |
| Action | 10 % | Bright orange | Terracotta |
Two mistakes to avoid: pure black on pure white, which is harsh on screen (use a very dark grey instead), and multicoloured gradients that make text unreadable. Our free design score measures exactly that, the contrast and coherence of your site's colours.
Frequently asked questions about colour psychology in web design
How do I choose the right primary colour for my brand?
Start by identifying the dominant colours in your sector (blue in finance, green in healthcare, black in luxury), then choose a colour that sets you apart while staying true to your values. Analyse the colours of your 3 main competitors and deliberately position yourself in contrast. Memorable differentiation beats sector convention, being "the only orange brand in an all-blue sector" is a real competitive advantage.
How many colours belong in a professional web palette?
5 working colours is the standard: 1 primary, 1 secondary, 1 accent (for CTAs), 1 light neutral (backgrounds) and 1 dark neutral (text). Each colour then breaks down into 9 or 10 shades for flexibility. Beyond 5 base colours, consistency becomes hard to maintain across every channel: website, social media, print and email.
Should I change my brand colour if it is not on trend in 2026?
No. Consistency is worth more than trend. If your colour works and your customers recognise it, keep it. Trends change every 2 to 3 years, brand recognition builds over 10 to 15. You can modernise your shades and variants (slightly lighter, more saturated, more contemporary tones) without touching the primary colour.
Does the colour of a CTA button really affect conversions?
Yes, but not for the reason people think. It is not the colour itself that converts, it is the contrast between the button and its surroundings. A red button on an all-red site is invisible. A bright orange button on a white or blue background is spotted instantly. The rule: your CTA should be the most contrasting colour on the whole page, used nowhere else.
How do I test my website colours before committing to them?
Several methods work well together: (1) use Realtime Colors to preview your palette on a site mockup in real time, (2) test contrast with contrast.tools or the Colour Contrast Analyser, (3) simulate colour blindness with the "Vision" tool in Chrome DevTools (DevTools → Rendering → Emulate vision deficiencies), (4) ask 3 to 5 people from your target audience, showing them only the home page with no explanation, because their first impressions are worth every technical test.
