Most small business owners pick brand colors the same way: they open a color generator, click refresh until something looks nice, screenshot it, and move on. Six months later the website blue does not match the Instagram blue, the printed flyer looks muddy, and nobody can remember which hex code is the “real” one.
This guide fixes that. Below is a repeatable, six-step process for how to create a brand color palette that works on screen and in print, passes accessibility checks, and can be documented on a single page so anyone on your team applies it consistently. No design degree required.
What a brand color palette actually is
A brand color palette is not “three colors you like.” It is a small, structured system with defined roles. A usable palette for a small business typically contains:
- 1 primary color (the color people associate with you)
- 1 secondary color (support, sections, illustrations)
- 1 accent color (buttons, links, calls to action, highlights)
- 4 to 6 neutrals (text, backgrounds, borders, dividers)
- Tints and shades of the primary (hover states, backgrounds, charts, print variations)
- Semantic colors if you sell online (success, warning, error)
That is usually 12 to 20 documented hex codes total. It sounds like a lot, but most of them come from mathematics applied to one starting color, not from taste.
Before you start: three decisions that save hours
- Where will these colors live most? A service business that lives on a website and social media should optimize for screen first (RGB and HEX). A bakery printing packaging, bags and menus should lock a print reference (CMYK or Pantone) first, then convert to screen.
- Who is your audience and what do competitors use? List five competitors and their dominant color. If four out of five are blue, blue is a safe expectation but a weak differentiator.
- Do you already have a fixed color? An existing logo, a vehicle wrap, a shopfront or a product often decides your primary for you. Start from what already exists instead of fighting it.
The 6-step process to build your brand color palette
Step 1: Describe your brand in five words
Write five adjectives that describe how you want customers to feel. Be specific. “Professional” is useless because everyone claims it. “Calm, precise, clinical, quiet, premium” gives you direction.
Then translate those words into color families:
| Brand words | Color directions that usually fit |
|---|---|
| Trustworthy, stable, technical | Blue, navy, slate, steel |
| Natural, healthy, sustainable | Green, olive, sand, warm off-white |
| Energetic, bold, youthful | Orange, coral, electric yellow |
| Premium, quiet, luxury | Black, deep burgundy, cream, muted gold |
| Creative, playful, unexpected | Purple, magenta, teal pairings |
| Caring, human, approachable | Terracotta, soft pink, warm beige |
Deliverable of step 1: one color family, not one color yet.
Step 2: Choose one primary brand color (and only one)
Build a small mood board first. Collect 15 to 20 images, packaging photos, interiors or posters that feel like your brand. Do not collect logos from your industry, collect feelings. Then look at what repeats. There is almost always one dominant hue.
Now pick a single primary hex code inside that family. Two practical rules:
- Avoid extremes. Pure saturated colors such as #FF0000 or #00FF00 are hard to print, vibrate on screen and look amateur. Pull saturation down slightly.
- Test it at small size. Fill a 40 by 40 pixel square. If it is unreadable or unpleasant as a tiny app icon, it will fail as a favicon and a social avatar.
Example primary used through the rest of this guide: #2563EB, a confident but not neon blue.
Step 3: Build tints and shades from your primary
This is the step non-designers skip, and it is the one that makes a brand look professional. A single color cannot handle a website. You need lighter versions for backgrounds and darker versions for text and hover states. This discussion raises a few points we skipped.
- Tint = your color mixed with white (lighter)
- Shade = your color mixed with black (darker)
- Tone = your color mixed with grey (muted)
Create a 9-step scale labelled 50 to 900. Your primary sits at 500. Here is a ready example based on #2563EB:
| Token | Hex | Typical use |
|---|---|---|
| Primary 50 | #EFF5FF | Page section background, table stripes |
| Primary 100 | #DBE8FE | Cards, badges, quote blocks |
| Primary 200 | #BFD6FE | Borders, dividers, disabled states |
| Primary 300 | #93BAFD | Charts, illustrations |
| Primary 400 | #6098FA | Decorative shapes only, not text |
| Primary 500 (base) | #2563EB | Logo, buttons, key brand moments |
| Primary 600 | #1D4FD8 | Button hover state |
| Primary 700 | #1B3FB0 | Links on light backgrounds |
| Primary 900 | #1B2F6E | Headings, dark sections, footers |
How to generate the scale without design software: use a free tint and shade generator, or in most tools convert your hex to HSL and adjust only the lightness value in even increments while dropping saturation slightly at the extremes. Keep the hue number identical so the family stays coherent.
Step 4: Add a secondary and an accent color
Now add contrast to the story. Three reliable approaches:
- Analogous: a neighbour on the color wheel (blue plus teal). Calm and safe.
- Complementary: the opposite hue (blue plus warm orange). High energy, excellent for buttons.
- Triadic: three hues evenly spaced. Playful, harder to control, best for brands with lots of illustration.
Two rules that prevent chaos:
- The accent color must be reserved for actions: buy, book, call, subscribe. If your accent appears in decorative graphics, it stops signalling “click here.”
- Keep the accent visually distinct from the primary. Two similar blues confuse rather than enrich.
Continuing the example: secondary #0E9F8C (teal), accent #F97316 (warm orange).
Step 5: Add neutrals, the colors that do 80% of the work
On a real website or brochure, roughly 80 percent of the surface is neutral: text, backgrounds, borders. Yet most small businesses never define neutrals, so they default to pure black on pure white, which looks harsh and cheap. Much the same conclusion turns up on franco.com.
Define at least five neutrals and warm or cool them slightly toward your primary so they belong to the same family:
| Role | Hex | Use |
|---|---|---|
| Ink (near black) | #111827 | Body text, headings |
| Muted text | #4B5563 | Captions, secondary text |
| Border grey | #D1D5DB | Lines, input fields, cards |
| Surface | #F5F6F8 | Alternating sections |
| Paper | #FFFFFF | Main background |
If you sell online, add three semantic colors so your checkout does not invent its own: success #15803D, warning #B45309, error #B91C1C.
Step 6: Test accessible contrast pairs and lock the palette
A palette is only finished when you know which combinations are allowed. Run every text and background pair through a free contrast checker and record the result. Targets to aim for:
- 4.5:1 minimum for normal body text (WCAG AA)
- 3:1 minimum for large text (about 24px and above, or 19px bold)
- 3:1 minimum for buttons, icons and input borders
- 7:1 if you want AAA level for long-form reading
Document approved pairs like this:
| Foreground | Background | Approx. ratio | Verdict |
|---|---|---|---|
| #111827 | #FFFFFF | 16.9:1 | Body text, approved |
| #1B3FB0 | #FFFFFF | 8.4:1 | Links, approved |
| #FFFFFF | #2563EB | 4.6:1 | Buttons, approved |
| #FFFFFF | #F97316 | 2.9:1 | Fails, use #111827 text instead |
| #6098FA | #FFFFFF | 2.6:1 | Decorative only, never text |
The orange row is the most common real-world trap: bright orange or yellow buttons with white labels look great in a mockup and become unreadable on a phone in daylight.
Print versus screen: keeping one color everywhere
Screens emit light (RGB), print absorbs it (CMYK). A vivid screen blue can dull noticeably on uncoated paper. Handle it deliberately instead of discovering it after 2,000 flyers are printed.
| Format | Where it is used | Notes |
|---|---|---|
| HEX | Websites, email, social, apps | Your master reference for digital |
| RGB | Video, presentations, screens | Same value as HEX, different notation |
| CMYK | Flyers, brochures, packaging | Ask the printer to confirm before a large run |
| Pantone (spot) | Logos, signage, textiles, merchandise | Most consistent option across materials |
Practical tips:
- Request a printed proof before any run above a few hundred pieces.
- Never judge a printed color on a screen. Judge it on paper, in daylight.
- If a color cannot be reproduced acceptably in CMYK, adjust the print value slightly rather than changing your digital brand color.
- Store one Pantone reference for the primary if you plan signage, uniforms or product packaging.
How to document your palette so it stays consistent
Inconsistent branding is almost never a taste problem. It is a documentation problem. Build a one-page color sheet and share it with every freelancer, printer and employee. Include for each color:
- Name and token (Primary 500, Neutral Ink, Accent). Names beat “the blue one.”
- HEX, RGB, CMYK and Pantone if relevant.
- Allowed uses and forbidden uses in one line each.
- Approved contrast pairs for text.
- Proportion guidance (see the rule below).
Then push those exact values into the places colors actually get chosen: your website theme settings, your Canva brand kit, your presentation template, your email platform, your social templates. If a tool lets you save brand colors, save them. Every manual color pick is a future inconsistency.
The 60/30/10 rule (and the 70/20/10 variation)
Proportion matters more than the colors themselves. Use roughly:
- 60 percent dominant (usually a neutral or light background)
- 30 percent secondary (your primary brand color, sections, headers)
- 10 percent accent (buttons, links, highlights)
The 70/20/10 variation simply pushes more space to the neutral background, which suits minimal, premium or content-heavy brands. Either way the message is identical: your loudest color should occupy the smallest area. Brands look expensive when color is rationed, not when it is everywhere.
7 common brand palette mistakes to avoid
- Too many colors. Seven “main” colors means no brand color at all. Cap it at one primary, one secondary, one accent.
- No tints and shades. Without a scale, your team invents random lighter blues in every document.
- Approximate hex codes. #2563EB and #2663EC look identical alone and different side by side. Copy and paste values, never eyedrop from a compressed screenshot.
- Ignoring contrast. Light grey text on white and white text on yellow are the two fastest ways to lose readers and fail accessibility checks.
- Choosing colors on one screen only. Check on a phone, a laptop and a cheap monitor before locking anything.
- Copying a competitor. If your palette matches the market leader, you are advertising for them.
- No documentation. A palette that lives only in a designer’s file will drift within months.
Free tools that make this faster
- Adobe Color for analogous, complementary and triadic schemes from a base hue.
- Coolors for fast exploration and exporting hex lists.
- Canva color palette generator for extracting colors from a photo you already love.
- WebAIM Contrast Checker for the accessibility step.
- A tint and shade generator for building the 50 to 900 scale in seconds.
- Colorblind simulators to verify your accent still reads for the roughly 1 in 12 men with color vision deficiency.
AI assistants can suggest starting hues and generate a scale quickly, but they cannot judge how a color behaves on your packaging, in your shop lighting or against your product photography. Treat their output as a first draft, then run steps 5 and 6 yourself. For the wider picture, see How to choose your brand colors.
Quick checklist before you lock your palette
- One primary color chosen and named
- Tint and shade scale generated (at least 5 steps)
- Secondary and accent defined, accent reserved for actions
- Five neutrals defined, no pure black on pure white
- All text pairs tested at 4.5:1 or better
- CMYK or Pantone reference recorded for print
- Values saved in website, Canva, slides and email tools
- One-page color sheet shared with the team
FAQ
How do I create my own color palette from scratch?
Start with five words describing your brand, choose one primary color from the matching color family, build tints and shades of it, add one secondary and one accent, add four to six neutrals, then verify every text and background combination reaches at least 4.5:1 contrast. Document all hex codes on one page.
How many colors should a brand palette have?
Three brand colors maximum (primary, secondary, accent) plus neutrals and a tint and shade scale. That usually totals 12 to 20 documented values, but only one of them is “your” color in the customer’s mind.
What is the 70/20/10 rule for colors?
It is a proportion guideline: 70 percent dominant or neutral color, 20 percent secondary, 10 percent accent. It is a calmer variation of the classic 60/30/10 rule and works well for minimal, editorial or premium brands.
Can ChatGPT or another AI tell me my color palette?
It can propose hex codes, generate tint and shade scales and explain color theory very quickly. It cannot verify how the color prints, how it looks under your shop lighting, or whether it separates you from competitors in your specific market. Use it for speed, then validate with real proofs and contrast checks.
What is the best color palette for branding?
There is no universal best palette. The best palette is the one that matches your brand personality, differs from your direct competitors, stays readable at AA contrast, and can be reproduced consistently in both CMYK and RGB. A single distinctive primary plus disciplined neutrals beats a rainbow every time.
Should I choose my colors before or after my logo?
Choose the primary color direction first, design the logo in black and white to prove it works on form alone, then apply the palette. A logo that only works in color is a fragile logo.
How often should I change my brand colors?
Rarely. Recognition is built on repetition. Refine tints, neutrals and accessibility as you grow, but keep the primary stable for years unless your positioning genuinely changes.
Need help locking it down?
If you would rather have a documented palette, contrast-tested pairs and print-ready references delivered as a proper brand guide, the team at abdesigner.net can build it for you and set it up directly in your website, Canva and template files so it stays consistent from day one.