Brand Color System: The Science Behind Why Certain Colors Make You Buy

16 minutes of reading · color · branding · design psychology

Heinz changed the color of the ketchup lid from red to green as a limited edition. Sales rose 26% without a product change. Then the red came back and the sales came back. It's neither accident nor magic. This is the work of color as a signal system that the consumer reads faster than he realizes.

Most brands choose color because it’s “beautiful” or “likes the founder.” Some people read articles about the psychology of color — that blue means trust, red means energy, green means nature. It's true, but not all. Because color doesn't work in isolation. Color works in context: categories, audiences, culture, competitors.

**The color system of the brand is not a palette. This is a set of rules about how color is used to achieve specific effects. That’s why two brands can use one shade of blue – one that conveys technological accuracy and the other that conveys bank reliability.

## How color affects purchasing decisions

Research by Nielsen and other analytics companies consistently shows that color affects 60-80% of the initial impression of a product. This is the initial reaction before you read something or start thinking rationally.

The mechanism is evolutionary. The brain uses color as a quick signal about an object: edible/poisonous, dangerous/safe, mature/immature. Consumer behavior exploits the same system.

** Color/content mismatch reduces conversions.** CXL Institute study: Changing the color of a CTA button without changing text can affect conversions by up to 21%. But a specific color doesn’t “work better” – it works better and contrasts, stands out and meets the user’s expectations.

It’s not “blue works better than red.” ** The color that is noticeable against a specific background, corresponds to what the user expects from the action, and does not conflict with the overall emotional tone of the page.

## Psychology of color: what really works and what myth

### It works

Saturation and energy. Bright, saturated colors are perceived as energetic, attract attention. Muted – calm, perceived as more “mature” and “dear”.

Warm vs. cold.* Warm (red, orange, yellow) are physically approaching – people perceive them as closer, more urgent, more exciting. Cold (blue, green, purple) – move away, soothe, inspire calm and stability.

Contrast as a priority. High contrast combinations (black on white, yellow on black) are perceived as important. Low-contrast – as minor or decorative.

White in Western culture - purity and emptiness. In some Asian cultures there is mourning. Red in Russia is communism for older generations, energy and success for young people. This is not an abstraction - this is a real problem for global brands.

### What a myth

“Blue = trust, always.” ** Blue is often associated with trustworthiness (hence blue banks, blue Facebook, blue LinkedIn). But that's because that's what's historically happened in banking and the corporate world -- not because blue has an innate ability to build trust. If all banks are blue, then the blue bank is not allocated. A dark green bank can create more trust simply by being unique.

** "Red = danger/urgent". ** In the context of the Buy button, red may perform worse than green or orange because red is often associated with a bug or a ban.

** "Pink = Female."** An outdated generalization. Luxury brands use pink for both male and female audiences. Millennial Pink 2016-2019 was a gender-neutral trend.

## The structure of the color system

### Primary colors

Primary (1 color): The main color of the brand. It appears most often. It creates instant recognition. Orange Hermès. Red Coca-Cola. Blue Tiffany. Tiffany’s trademark for a particular shade is not a metaphor for the significance of a color.

Secondary (1-2 colors): Supportive. Expand the system, give flexibility. They do not compete with Primary.

Accent (1 color): to draw attention to specific elements - CTA, important data, notifications. It should contrast with Primary and Secondary.

### Neutral colors

Neutrals are the basis of the system. Most backgrounds, most text, are neutrals. Poorly designed neutrals create a dirty visual, even with perfectly chosen primary colors.

Light neutrals (backgrounds): Not necessarily pure white (#FFFFFF). Slightly warm (#FAFAF8) or cold (#F8FAFC) work better with colored elements to reduce eye fatigue.

**Dark neutrals (text): * Not necessarily pure black (#000000). #1A1A1A or #2D2D2D on a white background is more comfortable for long reading.

**Intermediate neutrals: * gray for boundaries, separators, secondary text. Usually you need 3-5 shades.

### Functional colors

A separate group for interface states:

• Success / Positive: Green (usually)
• Warning/Alert: Yellow or orange
• Error/Negative: Red
• Info / Neutral: Blue or grey

These colors should be clearly defined – and not conflict with branded colors. A brand with a red Primary must either use a different shade of red for errors or rethink signalling.

## How to choose the primary color of the brand

### Three Questions Before Choosing

**Write down three or five characteristics that color should convey. "Technological, accurate, intelligent" is not red or yellow. "Natural, alive, caring" is not black.

What are the competitors doing? If the whole category is blue, blue creates belonging, not uniqueness. Sometimes affiliation is important (finance: blue = bank). Sometimes uniqueness is more important. We need to decide what's a priority.

In what contexts will it work? Bright orange works well on the site - difficult in business correspondence and documents. Neutral dark blue works everywhere, but is less memorable. There is no right answer, there are tradeoffs.

### Color and perception of value

Color communicates the price category – often more clearly than any other element.

**Expensive signals: * Muffled shades (not bright, not pastel), gold, black, dark blue, dark green. A lot of white space around the color. Monochrome.

**Signals "available": * bright saturated colors, many colors in the system, high contrast, dense composition.

Massmarket signals: Primary + Secondary + Accent are too different, overloaded with color, using all the possibilities of the palette at the same time.

It doesn't work because expensive brands "know better." This works because the consumer has learned to match through the experience of interacting with thousands of brands.

## Color models and technical requirements

### HEX, RGB, CMYK, Pantone

HEX and RGB for the screen. They are essentially identical to a different recording format. #FF5733 = RGB(255, 87, 51).

CMYK for printing. A mixture of Cyan, Magenta, Yellow, Black. The printer mixes paint. The same HEX and CMYK will give a different color – the screen shines, the printer reflects light.

*Pantone - Standardized color codes for accurate reproduction in print. If the color is critical for identity (packaging, merch), you need a Pantone. Hermès Orange - Pantone 021C. Tiffany Blue - Pantone 1837.

For each color in the system must be written all versions: HEX (digital), RGB (digital), CMYK (print), Pantone (precise printing). Without this, when changing the supplier or printer, the color will go.

### Availability and contrast

WCAG (Web Content Accessibility Guidelines) sets the minimum contrast:

• Background text: 4.5:1 minimum (AA level), 7:1 recommended (AAA level)
• Large text (18px+): 3:1 minimum
• Interface elements: 3:1 minimum

Check contrast.ratio.fyi or WebAIM Contrast Checker.

**Frequent error: * A brand chooses a Primary color, then tries to write in white text in that color - and does not pass the WCAG. This is not a “limitation”, it is a signal that the color should be adjusted or used with other combinations.

## Application of the color system

### Rule 60-30-10

The classic rule for balance:

• **60% ** neutral/main background
• 30% - secondary color (may be Primary in darker/lighter version)
• 10% - accent

Not a hard law, but a good starting point. When everything looks overloaded, this rule is most likely violated.

### Color in different channels

The same system is different depending on the channel.

Site: more neutrals, Primary in headlines and CTA, Accent sparingly.

*You can be braver. More Primary. Brightness helps to stand out in the tape.

Email: Careful - email clients render color differently. Always test in Outlook.

**Physical materials: *Remember the screen/print difference. Always check the color test before printing.

## AI and Color System: How to Use Claude

### Prompt: Create a color system from scratch

Help create a color system for the brand.

About the brand:
- Name and description: [what company]
Character in three words: [word 1, word 2, word 3]
Audience: [who buys, age, values]
Price segment: [mass market/medium/premium/luxury]
Competitors and their colors: [list 3-5 competitors and their primary colors]
Platforms: [site/app/packaging/physical materials]
What I don't want: [colors whose associations we avoid]

Suggest:
1. Primary color with reasoning (HEX + brief explanation of why)
2. Secondary color (1-2 variants)
3. Accent color
4. Neutral scale (5-7 shades from light to dark)
5. Functional colors (Success, Warning, Error, Info)
6. Check: what contrast gives the text on the main background colors

### Prompt: Audit of the existing color system

Do an audit of our color system.

Current palette:
- Primary: [HEX]
- Secondary: [HEX, if any]
- Accent: [HEX, if any]
- Neutrals: [HEX for background and text]
Functional: [HEX for Success/Error if available]

The context:
- Brand category: [Description]
- Competitors: [competitor colors description]
- Problems we notice: [what doesn't work]

Estimate:
1. How complete the system is – what is missing
2. Contrast problems (check text/background pairs on WCAG)
3. How different colors are from our competitors
4. Consistency of application – what is most often violated
5. Top 3 fixes for maximum improvement

### Prompt: Describe color through an emotional profile

Help pick the color for [the specific element/campaign/product].

The context:
- Element/campaign/product: [Description]
- What should cause: [emotions, sensations]
Audience: [who will see]
Restrictions: [colors that cannot be used, whether from the existing system or for other reasons]
- Cultural context: [country/region of audience]

Suggest:
1. 3 color options with HEX and emotional profile rationale
2. Potential risks (associations that may arise)
3. Recommend which option is better and why
4. How to Check if Color Works – A Specific Test With Your Audience

### Prompt: Adapt the color system for a dark theme

Our brand uses a bright theme. We need to create a dark theme while preserving identity.

Bright topic:
- Primary: [HEX]
- Secondary: [HEX]
- Accent: [HEX]
- Von: [HEX]
- Text: [HEX]

Requirements:
The brand must remain recognizable.
WCAG AA contrast on all key pairs
Accent color should be read on a dark background

Create:
1. Full dark palette with HEX for each value
2. The principle by which colors change (not just inversion)
3. What elements require special attention in adaptation
4. CSS variables for both topics