How to Build a Color Scheme Around Your Brand (The Practical Guide)

A brand color is one color. A color scheme is a small set of colors that work together — usually 5 to 10, in a defined structure. Most design systems start with a single brand color and expand it into a complete palette using a few rules from color theory. This guide covers how to do that, with practical examples.

The minimum viable color scheme

Every interface needs at least:

• Primary — the brand color. Used for the main actions, the logo, the accents.
• Neutral — a grey (or a near-black near-white pair) for body text, borders, and backgrounds.
• Semantic — success (green), warning (yellow/amber), error (red), info (blue).

That's 5 colors. Most design systems have more — but a 5-color scheme is the minimum. Start there; add colors only when you need them.

How to expand a brand color into a palette

Once you have the primary, you need supporting colors. There are three reliable approaches.

Complementary: pick the opposite on the color wheel

Complementary colors are directly opposite each other on the color wheel. Blue ↔ orange. Red ↔ green. Yellow ↔ purple. Complementary schemes are high-contrast and energetic. They are the right choice for call-to-action buttons: a blue link on a white page with an orange button draws the eye.

The catch: complementary colors are intense. Two saturated complements (e.g. #FF0000 and #00FF00) vibrate against each other. The fix: use one saturated, one muted. If the brand color is saturated blue, the complement is a muted orange (a brownish, desaturated version). If the brand color is muted, the complement can be saturated.

Analogous: pick the neighbors on the color wheel

Analogous colors are next to each other on the color wheel. Blue, blue-green, and green. Yellow, yellow-orange, and orange. Analogous schemes are harmonious and low-contrast. They are the right choice for backgrounds, hero sections, and anywhere you want a calm, unified feel.

The risk: low contrast. An analogous scheme often fails WCAG for body text. The fix: use the analogous colors for surfaces and accents, not for body text. Use a high-contrast neutral for body text.

Triadic: pick three colors evenly spaced

Triadic schemes use three colors 120° apart on the color wheel. Red, yellow, blue. Purple, green, orange. Triadic schemes are vibrant and balanced. They are the right choice for playful brands, kids' products, and any place where you want a sense of fun without going garish.

The catch: triadic schemes require discipline. With three equally-saturated colors, the design becomes chaotic. The fix: pick one as the primary (saturated, used most) and the other two as accents (muted, used sparingly).

The neutral: the most important color in the system

Most designers spend their time on the brand color and its accents. The neutral gets neglected. But the neutral is what 80% of the design uses — body text, borders, backgrounds, dividers, and disabled states.

A good neutral is not pure grey. It is a desaturated near-tint of the brand color, or a warm/cool grey that complements it. For a blue brand, a slightly cool grey (#475569 instead of pure #808080) feels cohesive. For a warm brand, a slightly warm grey.

The minimum neutral palette:

• White — background, surface. Often #FFFFFF or #FAFAFA.
• Off-white — secondary surface, card background. #F5F5F5 or #F8FAFC.
• Light grey — border, divider, disabled background. #E5E7EB or #CBD5E1.
• Mid grey — secondary text, placeholder text. #6B7280 or #64748B.
• Dark grey — primary text. #1F2937 or #0F172A.
• Black — emphasis text, headlines. #000000 or near-black.

Shades: how to build a 3-shade ramp

Most design systems have 3 shades of each color: a light version (for hover states, soft backgrounds), a default version (for buttons, accents), and a dark version (for pressed states, strong text). The standard way to build them is in HSL.

For a brand color of #3B82F6 (a blue):

• Default: #3B82F6 — HSL(217, 91%, 60%)
• Light: #93C5FD — HSL(213, 94%, 73%) — same hue, +13 lightness, slightly more saturation
• Dark: #1D4ED8 — HSL(224, 76%, 40%) — same hue, -20 lightness

Many design systems (Tailwind, Material, IBM Carbon) have 5-9 shades per color. The minimum is 3; more gives you finer control.

Semantic colors: success, warning, error, info

Most apps need to signal four states. The standard colors:

• Success — green. #10B981 (Tailwind emerald-500) is a good default.
• Warning — amber/yellow. #F59E0B (Tailwind amber-500) is a good default.
• Error — red. #EF4444 (Tailwind red-500) is a good default.
• Info — blue. #3B82F6 is a good default.

Each needs a light and dark variant. The Uttir Color Palette Generator builds a 5-shade ramp for any base color in your browser.

The whole picture: a starter palette

For a brand color of, say, indigo (#4F46E5), a minimum viable palette would be:

Role	Color	Use
Primary	#4F46E5	Buttons, links, accents
Primary dark	#3730A3	Hover/pressed states
Primary light	#A5B4FC	Backgrounds, soft tints
Neutral dark	#1F2937	Body text, headlines
Neutral mid	#6B7280	Secondary text
Neutral light	#E5E7EB	Borders, dividers
Neutral surface	#F9FAFB	Card backgrounds
Success	#10B981	Success messages
Warning	#F59E0B	Warning messages
Error	#EF4444	Error messages

That's 10 colors. Every other color in the design should be derivable from these.

Test accessibility for every combination

Once you have the palette, run every text/background combination through the Uttir Contrast Checker:

• Primary text on white — 4.5:1 minimum
• White text on primary — 4.5:1 minimum
• Neutral mid on white — 4.5:1 minimum (for secondary text)
• Primary on white — 4.5:1 minimum (for links and buttons)
• Success/error/warning on white — 4.5:1 minimum

The most common failure: the brand primary against white, when the brand is a light or mid-tone color. The fix is usually to darken the primary or to use a darker shade for text-on-white.

Document the palette

A palette that lives only in a designer's head is not a palette — it is a preference. Document every color with:

• Role (primary, neutral, semantic)
• Value (HEX, RGB, HSL)
• Allowed uses (body text, button, border, etc.)
• Forbidden uses
• Accessibility rating (contrast ratios)

The most useful artifacts: a Figma library, a Tailwind config, a CSS custom properties file, or a Notion page with screenshots. Whichever format your team will actually use.

Common mistakes

Too many brand colors

The most common mistake. A brand has a primary, a secondary, a tertiary, an accent, a highlight, and a special-occasion color. That is six "brand colors" in a system that should have one. The result: no visual hierarchy, no clear primary action, the design looks like a bag of Skittles.

Pick one primary. Use neutrals and semantic colors for everything else.

Saturated semantic colors

Success, warning, and error colors are often too saturated. Pure red #FF0000 is harsh; the conventional error red is a desaturated, slightly warm #DC2626. Same for success and warning.

Forgetting dark mode

A palette designed for light mode rarely works in dark mode. The brand primary stays the same, but the neutrals invert (light grey becomes dark grey, off-white becomes near-black). Build the dark-mode palette as a separate exercise, not as an afterthought.

No contrast documentation

Every color combination in the palette should have a contrast ratio and a WCAG level documented. Without that, designers will pick combinations that fail accessibility, and there is no record of what was intended.

When to use what

Some design systems, some tools:

• Tailwind — the default Tailwind palette (50-950 shades per color) is a great starting point. Pick a base color and use the default shades.
• Material Design 3 — the standard for Android and many web apps. Generates a palette from a single source color.
• IBM Carbon — accessible by default. Every color combination is pre-tested for contrast.
• Radix Colors — a curated set of accessible color scales, designed to work together.

All four are good. The best choice is the one your team will actually use. A custom palette is fine if it is documented; a default palette is fine if it is not modified without intent.

Bottom line

A brand color is one color. A palette is 5-10 colors that work together. Start with the primary, add a neutral, add semantic colors, and test every combination for accessibility. The Uttir Color Palette Generator builds ramps from any base color. The Contrast Checker verifies accessibility. Both run in your browser.