How to select the right colors for your web app

Colors have many different purposes. They can make a design appealing, but they also affect how users feel because people associate different colors with different meanings.

Why color matters

Colors can:

Get people’s attention
Make users feel calm, excited, or safe
Help people remember your brand
Make your site easier to use for everyone

Good color choices can help your web app get more visitors and keep them longer.

What’s your goal an who is your visitors

Ask yourself:

What feeling do I want my web app to give?
Who will visit my site?

Here are some common colors and what they mean:

Color	Meaning
Blue	Trust, calm, stability and reliability
Red	Energy, passion, urgency
Green	Health, nature, peace, freshness
Yellow	Happiness, optimism and warmth
Black	Smartness, style and elegance

Keep your color choices simple

Use a small set of colors that look good together. A good rule is:

60% primary color (like the background)
30% second color (menus, sections)
10% bright accent color (buttons, links)

Try not to use too many colors to keep your site clean. Using too many primary colors will create a childish feeling.

Below you can explore how to build a balanced color palette

Choose your secondary color (30%), and the tool will generate a primary color, an additional secondary color, and a bright accent color.

Primary color

Primary

Secondary color

Secondary 1

Additional secondary color

Secondary 2

Accent color

Accent

Provide text that are easy to read

Colors need to have enough contrast, that means light text on dark background or the other way around. This helps people read without trouble.

A suggestion is to use Lighthouse in Chrome to make sure the contrast is enough. It helps out with other improvements too.

Help people with colorblindness

Some people see colors differently. Don’t use color alone to show important info. For example, use icons or text labels too.

Use colors to guide the user

Use bright colors for buttons or important things you want people to click. Use soft colors for backgrounds so your content stands out.

Cultural differences

Be aware, colors can mean different things in different cultures. Make sure your choices fit the people you’re designing for. This post is primarily meant for western countries.

Quick Tips

Pick colors with a clear goal.
Use only a few colors that work well together.
Make sure your text is easy to read.
Don’t rely on color alone to share important info.
Use bright colors to show what’s important.