How to Choose a Color Palette for a Website or App (A Simple Method)

A good palette isn't a random assortment of pretty colors; it's a small system with clear roles. Following a simple method saves hours of second-guessing and produces a design that feels cohesive.

Step 1: pick one brand color

Start with a single main color that represents your product's personality. Blue tends to read as trustworthy, green as growth or health, and red or orange as energy, though context and culture matter more than any rule.

Step 2: add neutrals

Most of your interface will be neutral: backgrounds, borders, and text. Build a gray scale, ideally tinted slightly toward your brand hue so the grays feel like part of the same family. Avoid pure black text on pure white; a very dark gray on an off-white background is easier on the eyes.

Step 3: choose accent and status colors

• One accent for calls to action if your brand color isn't distinct enough.
• Success (often green), warning (amber), and error (red) colors for feedback.
• Use each color for a single job so users learn what it means.

Step 4: generate shade scales

For each key color, create a scale of about 9 to 11 steps from very light to very dark (commonly labeled 50 to 900). This gives you tints for backgrounds, mid-tones for buttons, and dark shades for text and hover states, without inventing new colors every time.

Step 5: apply the 60-30-10 idea

• About 60% dominant color (neutral backgrounds).
• About 30% secondary color (surfaces, sections, text).
• About 10% accent (buttons, links, highlights).

Step 6: check accessibility

1. 1Test every text and background pair for at least 4.5:1 contrast (3:1 for large text).
2. 2Check that UI elements such as borders and icons reach 3:1 against their background.
3. 3Don't rely on color alone to communicate state; add icons or text.
4. 4Look at the palette in a color-blindness simulator.
5. 5Define dark-mode variants and check them too.