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.