Color is the fastest signal a brand sends. Before someone reads a word, the palette has already communicated something: whether the brand feels bold or considered, clinical or warm, playful or serious. Most brand color mistakes are not about picking the wrong hue. They are about picking colors without a system and expecting them to hold together across a website, a pitch deck, a printed brochure, and a social post shot on a phone.
What a brand color palette actually needs to do
A palette is not a mood board. It is a functional system with defined roles. Every color in a well-built palette earns its place by doing a specific job. Those jobs do not overlap.
The four core roles in most brand palettes are:
- Primary. The dominant brand color. Used in the logo, key UI elements, and any surface where you need someone to recognize the brand immediately. One color, possibly one or two tints.
- Secondary. A supporting cast, often two to three colors that sit alongside the primary in layouts, illustrations, or data visualizations. They complement rather than compete.
- Surface and neutral. Backgrounds, containers, body text, borders. These are the quiet colors that hold the system together. Most brands underinvest here and end up applying brand color where structural color belongs.
- Semantic states. Success, warning, error, informational. These are functional colors, not expressive ones. Treating them as decorative causes real usability harm.
Without explicit roles, every designer who picks up the palette makes their own call about what goes where. The result is a brand that looks slightly different everywhere: not broken, just soft around the edges in a way that is hard to defend.
Starting with one anchor color, not six
The most common mistake in early-stage brand color work is choosing too many colors at once. Start with one anchor, the primary brand color. Everything else is derived from or measured against it.
Choose the anchor by intent, not preference. What sensation should this brand produce? A payments company aiming to feel safe and institutional reaches for a different part of the spectrum than a wellness brand aiming for quiet confidence. The color wheel is a heuristic, not a prescription. Associations are cultural and contextual, so do the positioning work first. There is no point landing on a beautiful cobalt if your positioning calls for something that signals warmth. The branding work always starts with strategy, and color strategy is no exception.
Once you have the anchor, build the palette through color relationships:
- Analogous schemes (adjacent hues) feel cohesive and calm.
- Complementary pairs (opposite hues) create tension and emphasis, which makes them well-suited for call-to-action moments.
- Triadic sets (three equidistant hues) carry energy and range well; they can also feel chaotic if mismanaged.
- Split-complementary gives the tension of complementary without the bluntness, useful for secondary colors that need contrast without fighting the primary.
None of these are rules. They are starting points for conversations about what the palette needs to do.
Assigning roles before testing harmony
Most designers test harmony before assigning roles. That is backwards. A combination that looks beautiful in a mockup can fail the moment you try to apply it: the “accent” color turns out to be too dominant for button states, the “neutral” is too warm to sit beside the brand blue, the two secondary colors look identical in grayscale.
Assign roles first. Then test each role in context:
- Primary should be legible on white and on black, and should survive being reduced to a small favicon or stamp.
- Secondary colors should be distinguishable from each other in use, not just in isolation. If two of your secondaries appear on the same chart, they need separation even in grayscale.
- Surface neutrals should have a full range from near-white to near-black, with enough intermediate values that you can build depth without reaching for brand color.
- Semantic colors should carry universal associations and clear intent. Green for success, red for error, amber for warning. Deviating from convention requires strong justification.
A good palette test: print the full palette in grayscale. If you cannot tell which tone is which, the palette will fail in environments where you do not control color rendering.
Contrast, accessibility, and the WCAG floor
Accessible contrast is not a compliance checkbox. It is a quality signal. Text that fails WCAG AA (4.5:1 for body text, 3:1 for large text) is hard to read for everyone, not just users with low vision. It fails even faster on screens with shifted color profiles, in bright sunlight, and on cheap displays.
If a color combination only looks good on a calibrated studio monitor, it is not a good color combination. It is a coincidence.
The practical workflow:
- Lock your primary text color and background pairing first. This is the combination that will appear most often. It must pass AA at minimum; AAA is worth pursuing if body text sits on it.
- Test every role against every surface it will appear on. A secondary color that passes on white may fail on your neutral-100 background.
- Check interactive states. Focus rings, hover states, and disabled elements all need sufficient contrast to be usable.
- Keep a contrast audit in your brand guidelines with documented ratios. When someone asks “can we use teal on the dark background?”, the answer should be retrievable, not guessable.
Tools like Colour Contrast Analyser, Stark (Figma plugin), and browser devtools accessibility panels make this workflow fast. There is no excuse for shipping a palette without checking it.
Tints, shades, and the systematic approach to palette expansion
A primary color often needs a range of values: a light background wash, a dark hover state, a subtle border. Building these by hand produces inconsistent results. A better approach is a systematic scale.
The most common convention is a numeric scale from 50 to 950 (or 100 to 900), where 500 is the base. From the base, derive lighter tints by mixing toward white and darker shades by mixing toward black or the color’s shadow hue (often a rotated, more saturated version rather than a gray mix; a cold blue’s dark should lean slightly purple or navy, not just gray).
The scale gives you referential values. Instead of specifying #1A3C6D in every design token, you use brand-primary-700. When the color needs to shift, every value updates from one source. This feeds directly into design tokens, the mechanism that keeps a palette consistent across code, Figma, and documentation.
Consistency across media
A hex code is a promise that breaks at the border of digital. Print, environmental signage, embroidery, and merchandise all require different color models, and “our brand blue” means something slightly different in each.
The baseline cross-media workflow:
- Digital: HEX and HSL for CSS, P3 for wide-gamut displays. Define both sRGB and Display P3 tokens if your product targets modern iOS or Mac contexts.
- Print: CMYK values matched and tested in physical press proofs, not assumed from a screen conversion. If you have a primary color that is a saturated, vibrant blue, know that CMYK cannot reproduce it exactly and decide now whether you accept a shift or spec a Pantone.
- Pantone (PMS): Specify a Pantone code for any color that will appear on merchandise, signage, or branded objects. This is the only way to ensure true consistency across vendors.
- On-screen video and broadcast: Avoid colors that clip or bleed in broadcast color spaces. Saturated reds and near-whites are common culprits.
Document every variant in the brand system, and make it easy for vendors to find the value they need without asking. Ambiguity at this level is where brand color erosion starts, not from negligence, but from someone at a print house using a default CMYK conversion because the spec did not include one.
When to limit the palette
Restraint is a design decision. The brands that feel most coherent are usually operating with fewer active colors than you would expect: one primary, one or two secondaries, a strong neutral scale, and clean semantics. The eye finds signal in limitation.
The temptation to add colors usually arrives when the palette is not doing its job. If you need a new color to differentiate a product line, that might be a legitimate reason. Or it might be a signal that the existing palette lacks enough tonal range. If you need a new color for a campaign, ask whether tint, opacity, or texture could solve the same problem. Adding permanent palette members to solve temporary problems is how color systems bloat.
A useful question when evaluating an addition: if someone encountered this color in a context stripped of all other brand signals, would they know it belongs to this brand? If the answer is no, the color probably belongs to a project, not the brand system.
How Strynal approaches palette work
At Strynal, color decisions are made inside the full brand system, not before it and not after it. We start from strategy and positioning: who the brand is for, what it needs to signal, where it will live. Color is one output of that thinking, not the starting point.
Every palette we develop ships with documented roles, a contrast audit, cross-media values, and a tested tonal scale, ready to plug into a design system or a Figma-to-production handoff without rework. Our work connects strategy, brand, and build in a single thread, so the color decisions made in the brand phase are carried into the product and the site without translation loss.
If you are building a brand color palette that needs to work everywhere and hold up under pressure (not just look good in a presentation), start a conversation with us. We scope from scratch and build what the brand actually needs.