How to Choose a Color Palette for Your Website Based on Your Brand

A website color palette is a small set of colors used consistently: one main brand color, one or two accents, and neutrals for text and backgrounds. Getting it right makes a site look trustworthy and keeps it readable.

1. Start from your brand, not a trend

Write down three words for how your brand should feel, such as calm, bold or premium. Look at your logo and any existing materials. If you already have a brand color, build around it rather than starting again.

Color meanings vary by culture and context, and research on color psychology is weaker than many articles claim. See what the research shows. Being distinct from competitors usually matters more than any meaning.

2. Pick the parts of the palette

• Primary: your main brand color, used for key buttons and highlights.
• Accent: one or two contrasting colors for links, badges or secondary actions.
• Neutrals: a range of grays or off-whites for text, backgrounds and borders. Most of a site is neutral.
• Status colors: red for errors, green for success, amber for warnings.

3. Balance them

A common guide is 60-30-10: about 60% neutral background, 30% secondary color, 10% accent. It isn't a strict rule, but it stops a bright brand color from overwhelming the page.

4. Create lighter and darker shades

Each main color needs tints and shades for hover states, backgrounds and borders. The color palette generator turns one color into a 10-step scale with CSS variables.

5. Check contrast

Body text needs a contrast ratio of at least 4.5:1 against its background. Many bright brand colors fail as text colors, so use them for buttons and shapes and choose a darker version for text. Test pairs with the contrast checker. See designing for colorblind users.

6. Plan dark mode

Dark backgrounds need softer, lighter versions of your colors. See dark mode palette principles.

7. Learn from sites you admire

Color Palette Extractor shows the 20 most-used colors on any page, in HEX, RGB or HSL, so you can see how well-designed sites balance brand colors and neutrals. Use it to study proportions rather than copying a competitor's exact colors. See borrowing color ideas ethically.

8. Write it down

Save the palette as named CSS variables, such as --color-primary, with notes on where each color is used. Consistency is what makes a palette look intentional.

Want feedback on your site's design? Get a free website audit.