ColorBlend

Color palette guide

Color palettes for websites

20 palettes

Turn a palette into a website color system

A website palette should define roles instead of treating every color equally. Start with a background and surface color, choose a dark readable text color, then assign one primary brand color and one restrained accent.

Test buttons, links, form controls, focus states, and body text before adopting a palette. Decorative colors can be flexible, but essential text and controls need sufficient contrast in both light and dark contexts.

Brand palette questions

How many colors should a website use?

Four or five core colors are usually enough: background, surface, text, primary, and accent. Additional semantic colors may be needed for success, warning, and error states.

What is the 60-30-10 color rule?

It is a starting ratio where a dominant color covers about 60% of the design, a supporting color 30%, and an accent 10%. Interfaces still need separate text and state colors.