Skip to content

Colour psychology

Colour is the fastest thing a brand says. People decide whether something looks trustworthy, cheap, calm or exciting before they read a word, and much of that judgement is colour. This page explains what each hue tends to communicate, how to build a palette that works as an interface rather than as a mood board, and what each MIAN noodle is saying with the colours it uses.

Before you trust any of this

  • Meaning comes from context. Red on a bank’s balance is debt; on a restaurant’s sign it is appetite. Judge a colour in the place it will be used, with the real words next to it.
  • Culture changes meanings, sometimes into their opposite. White is for weddings in some countries and funerals in others. If you serve several markets, test there.
  • Sector conventions are stronger than universal meanings. Finance is blue and green because finance is blue and green. Following the convention says “we belong here”; breaking it says “we are different”, which is a claim you must then keep.
  • Lightness and saturation say as much as hue. Pale and desaturated is gentle and expensive; bright and saturated is young and cheap; dark and saturated is serious and rich.
  • About one man in twelve and one woman in two hundred do not see red and green as different. Never let colour be the only signal.

What each hue tends to say

Red

Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.

Use it for one action that must be seen, sale and limited-time states, food, sport, entertainment.

Watch for it is also the colour of errors. A red primary button next to a red error message makes both ambiguous, so pair a red brand with a distinct danger treatment (icon and words).

Luck and celebration in China, mourning in parts of southern Africa, debt in accounting.

Orange

Warmth, friendliness, appetite, affordability. Active like red, without the alarm.

Use it for consumer products, food, community, calls to action on a neutral page.

Watch for can read as cheap when saturated across large areas; text on orange rarely passes contrast, so use it for fills with dark text or for accents.

Sacred (saffron) in South Asia; a national colour in the Netherlands.

Brown and terracotta

Earth, craft, reliability, age. Feels made by hand and unhurried.

Use it for food, coffee, leather, ceramics, heritage brands, anything artisanal.

Watch for looks dull on screens unless the neutrals around it are warm too.

Broadly consistent across cultures: soil, wood, bread.

Yellow and gold

Optimism, attention, caution. Gold tones add value and ceremony.

Use it for highlights, warnings, playful consumer brands; gold for luxury and awards.

Watch for the lightest hue: white text on yellow fails, so yellow always carries dark text. Large yellow areas tire the eye.

Imperial in China, mourning in Egypt, caution on roads everywhere.

Green

Growth, health, permission, money. The easiest colour to look at for a long time.

Use it for finance, health, food, sustainability, and “go” or success states.

Watch for success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.

Sacred in Islam; luck in Ireland; in some markets associated with a specific party or bank.

Teal and cyan

Clarity, cleanliness, calm technology. Cooler than green, softer than blue.

Use it for health tech, wellness, productivity tools, water and travel.

Watch for very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered.

Few strong cultural conflicts, which is part of why it is so widely used.

Blue

Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.

Use it for finance, enterprise, health, anything that must feel safe. Links are expected to be blue.

Watch for the safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.

Mourning in Iran, protection in the eastern Mediterranean, corporate nearly everywhere.

Indigo and violet

Imagination, luxury, spirituality, the unusual.

Use it for creative tools, beauty, premium or mystical products.

Watch for a violet-to-blue gradient is the most recognised mark of a generated page. If violet is your brand, use it flat, with a warm second colour, and never as a gradient behind a centred headline.

Royalty in Europe, mourning in Thailand and Brazil.

Magenta and pink

Play, tenderness, boldness. Pale pinks are gentle; hot magenta is loud and modern.

Use it for beauty, fashion, confectionery, youth brands, a single loud accent.

Watch for heavily gendered in some markets; test with the real audience instead of assuming.

Tied to cherry blossom and spring in Japan; treating it as a colour for girls is recent and Western.

Black and ink

Authority, precision, luxury. It makes everything next to it look more deliberate.

Use it for fashion, editorial, developer tools, any brand that will let its content be the colour.

Watch for pure #000 on pure #fff is harsh on long text. Soften one of the two slightly, or warm both.

Grey

Neutrality, technology, restraint.

Use it for interfaces where data must stand out.

Watch for a grey with no hue at all looks unfinished beside a coloured accent. Tint the neutrals toward the brand hue by two or three percent.

White and paper

Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.

Use it for almost everything. The page colour sets the temperature of the whole brand.

Watch for empty is not the same as calm: white space needs a grid behind it.

Four jobs for colour in an interface

A brand palette becomes an interface palette when every colour has a job. These are the roles MIAN’s tokens are built on.

Neutrals (about 60% of the screen)
Page, surfaces, text and lines. They carry the temperature of the brand: warm, cool or truly neutral. Tint them two or three percent toward the brand hue so they belong to it.
Primary (about 10%)
The brand colour, used for the one main action and for what is selected. If it appears everywhere it stops meaning “this is the thing to do”.
Accent (a few percent)
A second hue for the rare thing that must differ from the primary: a highlight, a second data series, a tag. Choose it from across the wheel or next door, never randomly.
Status (only for status)
Success, warning, danger and information. They must stay recognisable in every palette, so they are never used for decoration.

Choosing the second colour

The accent is chosen from its relationship to the brand colour on the wheel. The noodle studio builds each of these for you and checks every text pair.

Monochrome
One hue in several lightnesses. Calm and coherent; needs strong typography to avoid looking flat.
Analogous
The neighbour hue, 30° away. Harmonious and natural; low contrast between brand and accent.
Complementary
The opposite hue, 180° away. Maximum contrast, so the accent really stands out. Use the second colour sparingly.
Split complementary
The two hues beside the opposite, 150° and 210° away. Contrast without the tension of a true complement.
Triadic
Three hues 120° apart. Lively and balanced; keep one dominant and the other two small.

Rules

  • Start from one colour you can justify in a sentence. “Blue because we are a bank” is a reason; “violet because it looked modern” is not.
  • Build the neutrals before the accents. Most of the screen is neutral, and a palette with good greys survives any accent.
  • Check every text pair: 4.5:1 for normal text, 3:1 for large text and for the edges of controls. MIAN’s own noodles are held to 7:1 for body text.
  • Design the dark palette separately. Lighten and desaturate the brand colour for dark backgrounds instead of reusing the light one; avoid pure black unless the brand is about black.
  • Limit yourself: one brand hue, one accent, four status colours, one family of neutrals. A third brand colour needs a job before it gets a place.
  • Decide what colour never does. For example: “green is never decoration, only success”.
  • Avoid the generated look: a violet-to-blue gradient, gradient-filled headline text, neon glows on dark backgrounds, and grey text placed on a coloured background.

Conventions by sector

SectorWhat people expect, and why
Finance and insuranceNavy, deep green, ink. Trust and permanence; one restrained accent.
Health and careBlue, teal, soft green on warm white. Calm and clean; avoid alarm red except for emergencies.
Food and hospitalityReds, oranges, browns, warm neutrals. Appetite and warmth; cool blues suppress appetite.
Technology and developer toolsInk, grey and one sharp colour. Precision; the product is the colour.
Luxury and fashionBlack, ivory, one metal or one deep hue. Space and restraint say “expensive”.
Children and educationSaturated primaries, rounded shapes, high contrast. Clear and cheerful, never pastel-on-pastel.
Sustainability and outdoorsGreens and earth tones with a natural neutral; show evidence beside the colour.

MIAN’s noodles by their main colour

Every noodle page has a section on what its own colours say. Here they are grouped by the hue of their primary.

Black and ink

Blue

Brown and terracotta

Teal and cyan

Red

Green

Magenta and pink

Orange

Yellow and gold

Make your own palette

Give the studio one brand colour and it returns a complete palette for any noodle, in light and dark, with the accent derived by the harmony you choose and every text pair verified.

Choose a noodle

Minimal

Flat

Pixel

Linear

Thin

Glass

Textured

Bold

Elegant

Rounded

On this page