How to Choose Brand Colors: Build a Color Palette in 5 Steps
Quick answer: choose one main color that fits your brand’s mood, add 1–2 accent colors with a color-wheel rule, add a dark and a light neutral, and check text contrast is at least 4.5:1. Generate a palette free →
Step 1: pick the main color from your brand’s mood
| Mood you want | Colors often used |
|---|---|
| Trust, calm, professional | Blue, navy |
| Growth, health, nature | Green, teal |
| Energy, food, urgency | Red, orange |
| Friendly, optimistic | Yellow, warm orange |
| Creative, premium | Purple, deep indigo |
| Luxury, minimal | Black, off-white, gold |
These are common associations, not rules. Look at your competitors too: a color that stands out in your market is often worth more than the “correct” one.
Step 2: add accents with a color-wheel rule
- Complementary — the opposite color on the wheel. Strong contrast, good for buttons.
- Analogous — neighbours on the wheel. Calm and related.
- Triadic — three colors evenly spaced. Lively; use one as the leader.
- Monochrome — lighter and darker shades of one color. Clean and safe.
Step 3: add neutrals
Most of a website or document is background and text. Pick a dark neutral for text (near-black or dark navy rather than pure #000000) and a light one for backgrounds (white or a soft off-white).
Step 4: balance with the 60-30-10 rule
Use about 60% main or neutral color, 30% secondary color and 10% accent. Save the accent for the things you want people to click.
Step 5: check contrast
The WCAG guideline asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and icons. Light grey text on white and yellow text on white usually fail.
Example palette
| Role | Color | HEX |
|---|---|---|
| Main | Indigo | #4F46E5 |
| Accent | Amber | #F59E0B |
| Secondary | Teal | #14B8A6 |
| Dark neutral (text) | Slate | #0F172A |
| Light neutral (background) | Off-white | #F8FAFC |
Save and use your palette everywhere
Write down the HEX, RGB and CMYK values (for print) and use the same values on your website, logo, social posts and documents. The free color palette generator builds complementary, analogous and triadic palettes and exports HEX, RGB, CSS and Tailwind values. Already have a logo or photo? Pull its exact colors with the image color picker.
Frequently asked questions
How many colors should a brand palette have?
Usually 3 to 5: one main brand color, one or two accent colors, and one or two neutrals such as a dark text color and a light background.
What is the 60-30-10 rule?
A balance guide: about 60% of a design uses the main (often neutral) color, 30% a secondary color and 10% an accent color for buttons and highlights.
How do I check if my colors are readable?
Check the contrast ratio between text and background. The WCAG accessibility guideline asks for at least 4.5:1 for normal text and 3:1 for large text.
What are complementary and analogous colors?
Complementary colors sit opposite each other on the color wheel (blue and orange) and give strong contrast. Analogous colors sit next to each other (blue, teal, green) and feel calm and related.
