/logo-design

Colour

Colour is the second memory hook after shape, the most basic form of non-verbal communication, and one of the few things a brand can truly own. But it is secondary to form: design in black first, add colour after the concept is chosen.

Contents

1. Order of operations
2. Associations (and their limits)
3. Owning a colour
4. Harmony systems
5. How many colours?
6. Practical reproduction (RGB, CMYK, Pantone, HEX)
7. Accessibility and contrast
8. Library data
9. Palette specification template

1. Order of operations

1. Design in black and white. A mark that only works because of its colours is not yet a mark. Monochrome exposes form problems and forces the concept to stand on shape.
2. Present concepts in greyscale first so reactions are about the idea, not about a colour someone dislikes.
3. Choose colour after the direction is selected — research competitor colours and deliberately avoid their palette unless there is a strategic reason.
4. Specify every version: full colour, one colour, black, white/reversed, and on the primary brand colour.

2. Associations (and their limits)

Common Western associations — useful as a starting vocabulary, never as a rule:

• Culture changes meaning. White is purity in much of Europe and mourning in parts of East Asia; red is luck and celebration in China, danger in signage, and taboo for losses in financial reporting; green has religious significance in some regions. Check the audience's cultures.
• Learned conventions: red = stop, green = go, blue links on screens, yellow/black = hazard. Use knowingly.
• Personal memory attaches emotions to colours unpredictably — another reason to anchor decisions in strategy, not taste.
• Demographic tendencies (e.g. children's brands trending colourful and saturated) are only tendencies; a brand strategy can deliberately contradict them.

3. Owning a colour

• Owning a colour is one of the highest priorities of an identity — a signature colour, used consistently across every touchpoint, becomes recognisable even without the mark.
• Subverting category norms makes a colour proprietary. When every competitor is blue, a red, orange or green brand is instantly distinguishable. A colour swap experiment makes the point: put a competitor's colours on a famous logo and it immediately feels like a different company.
• Keep existing colour equity during redesigns unless there is a strong reason to drop it — colour is often what the public remembers most.
• Pair a signature colour with a neutral (black, white, a dark tone) to give it room.

4. Harmony systems

Use the colour wheel as a generator, then refine by eye:

• Complementary — opposites (red/green, blue/orange, yellow/purple). High contrast, energetic; familiar, can feel obvious. Shift hues slightly off the exact complement for sophistication.
• Split-complementary — a base plus the two neighbours of its complement. Contrast with less tension.
• Analogous — neighbours on the wheel. Calm, cohesive; needs value contrast to stay legible.
• Triadic / tetradic — rotate a triangle or rectangle on the wheel; vivid, playful, good for multi-colour systems. Balance by letting one colour dominate.
• Monochromatic — one hue in several tints/shades. Elegant; relies on value contrast.
• Think in hue, saturation, value: most palette problems are value problems (two colours of similar lightness blur together, especially in greyscale or for colour-blind viewers).

5. How many colours?

• The fewer the colours, the stronger the recall and the easier the reproduction. One or two colours is the sweet spot for most marks; three is common; beyond four, colours must be justified by concept (e.g. a multi-product or "diversity" story) and the mark must still work in one colour.
• Multi-colour marks: give each colour a role (segments of an idea, a sequence, a hierarchy), keep saturation and value families consistent, and provide a single-colour fallback.
• Secondary palette: 3–5 complementary colours for the wider identity, used sparingly (accents often ≈ 5–10 % of a layout) so the primary stays dominant.

6. Practical reproduction

• Specify all four systems for every brand colour: HEX (web), RGB (screen), CMYK (process print), and a Pantone / spot equivalent for premium print. Whole-number CMYK percentages are cleaner to hand to printers.
• RGB ≠ print. Neon, saturated greens, electric blues and bright oranges can fall outside the CMYK gamut and print dull. Check the CMYK conversion early; choose a spot colour if the signature colour must be vivid on paper.
• Gradients: see visual-techniques.md — keep a flat master.
• Materials: embroidery thread, vinyl, enamel, neon, laser-etched metal each shift colour; one-colour and two-colour versions keep production affordable (screen printing charges per colour).
• Dark mode / dark backgrounds: the brand colour may need a lighter tint to keep contrast on dark UI; specify it.

7. Accessibility and contrast

• Test colour pairs for contrast. For logos, WCAG does not strictly apply, but any text within the lockup (and taglines) should aim for at least 3 : 1 against its background; body-size text needs 4.5 : 1.
• Don't encode meaning in colour alone (red vs green segments may be indistinguishable to ~8 % of men). Check a greyscale version: segments should still separate by value.
• Yellow, light cyan and pale pastels on white fail contrast; give them a dark companion or a dark version.

8. Library data (1,400+ real-world logos)

The bundled library skews heavily to technology brands, so treat these as category conventions to be aware of, not recommendations:

• Colour count (counting black/white when used): 1 colour ≈ 33 %, 2 colours ≈ 25 %, 3 colours ≈ 17 % — ≈ 75 % of logos use three colours or fewer. Among standalone icons, ≈ 47 % are a single colour and ≈ 82 % use three or fewer.
• Gradients appear in ≈ 19 % of files — a minority, and mostly in digital-native brands.
• Dominant single hue among single-hue marks: blue is by far the most common (≈ 22 % of all logos), then red (≈ 13 %) and black/grey monochrome (≈ 13 %); green, orange, cyan and purple follow at 4–7 % each; yellow and pink are rare (≈ 2 % and ≈ 1 %). ≈ 28 % of logos are multi-hued.
• Implication: in tech, blue is the camouflage colour. A non-blue signature colour is an easy win for distinction; if blue is strategically necessary, differentiate by hue shift (ultramarine, teal, periwinkle), pairing, or form.

Explore by colour: python3 scripts/search_library.py --color orange --type pictorial --format table.

9. Palette specification template

### Primary
| Name | HEX | RGB | CMYK | Pantone (approx.) | Use |
|---|---|---|---|---|---|
| Harbor Teal | #0F7C80 | 15 124 128 | 88 23 44 5 | 7714 C | Logo, key UI, headings |
| Ink | #14212B | 20 33 43 | 83 67 49 64 | Black 7 C | Type, one-colour logo |

### Secondary (≈ 10–20 % of any layout)
| Sand | #F2E6D0 | … | Backgrounds |
| Signal Coral | #FF6B4A | … | Accents, calls to action (sparingly) |

### Logo colour versions
Full colour on white · Reversed (white) on Harbor Teal / Ink · One-colour Ink · One-colour white

(Pantone matches are approximations — verify against a physical guide before print production.)