How to build a brand color palette (from one color to a system)

Updated 2026-09-14 · 3 min read · by the ColorSwoop team

Great brand palettes are systems, not swatches. Here is the structure the best design teams use, filled in step by step from a single color.

1. Choose the primary color

The primary is the color people will associate with you. It should reflect the brand's personality, work on both white and black, and be distinguishable from direct competitors. Check the category: if every competitor is blue, a warm primary is an instant differentiator.

AaThe quick brown fox

#FFFFFF on #0B3D91 10.04:1 · AAA White on the primary: it can carry a button label.

AaThe quick brown fox

#0B3D91 on #FFFFFF 10.04:1 · AAA The primary as text on white: it can carry a link.

A primary that passes both directions is one you can use everywhere. If yours fails one, keep the hue and adjust lightness before going further.

2. Add one or two secondary colors

Secondaries support the primary in illustrations, charts and section backgrounds. Choose them with a harmony rule: analogous for a calm, cohesive brand; split-complementary for energy.

Calm: analogous

#0B8193 #0B3D91 #1D0B93

Two neighbors. Nothing competes with the primary.

Energetic: split-complementary

#0B3D91 #931D0B #81930B

Warm companions opposite the blue. Use them small.

3. Build a neutral scale

Interfaces are mostly neutral. Build a scale from near-white to near-black and tint it very slightly toward the primary hue so the grays feel on-brand rather than borrowed:

Nine steps from the primary's hue — 50 through 900 in design-system terms

#F5F7FB #E7ECF4 #CED8E9 #AABBD9 #7994C3 #486EAD #0B3D91 #07285E #04183A

The lightest steps become backgrounds and borders, the middle ones secondary text and icons, the darkest the body text. Every color page on ColorSwoop lists shades and tints you can lift directly.

4. Define semantic colors

Success, warning, error and info. Keep them at the same saturation level as the palette so they do not look pasted in from another product.

Success · Warning · Error · Info — saturation matched to the primary

#1F8A5B #D98E04 #C8362B #0B3D91

Each is a conventional hue (green, amber, red, blue) but none is louder than the brand color.

5. Write usage rules

Primary for the single most important action per screen.
Never place primary text on secondary backgrounds without a contrast check.
Accent colors are for emphasis, never for large areas.
Provide light and dark mode values for each role.

6. Test for accessibility and reproduction

Verify every text pairing at 4.5:1 with the contrast checker. Then check that the primary survives print (CMYK) and grayscale — every ColorSwoop color page lists CMYK values, and the contrast guide shows what happens to a palette under color blindness.

The finished system: primary, two secondaries, a light and a dark neutral

#0B3D91 #4C8BF5 #F5A623 #EEF1F7 #04183A

7. Hand off

Deliver hex codes with role names as CSS variables and a Tailwind config. Both are one click away on any palette page. Two catalogue palettes that already read as complete brand systems:

Details

Details

Navy and amber for a confident tech brand; ink blues on paper for an editorial one.

FAQ

How many colors should a brand palette have?

A primary color, one or two secondary colors, a neutral scale of five to ten grays and a small set of semantic colors (success, warning, error). Most strong brands are remembered for one color.

Can I change my brand colors later?

Yes, but consistency builds recognition. If you evolve the palette, keep the primary hue and adjust saturation or supporting colors.

What file should I give developers?

A list of hex values with role names, ideally as CSS variables or a Tailwind config. ColorSwoop exports both.