There are a million resources out there about color theory and psychology. When using color for product design, a few simple rules will suffice.

Less Is More

You only need three base colors: neutral, primary, and secondary. Each color might have several tints (mixed with white), shades (mixed with black), or tones (mixed with grey), but limit your colors to avoid over-complicating your design.

The 60-30-10 rule states that 60% of your design should use a neutral color, while 30% and 10% should consist of primary and secondary colors, respectively.

Neutral colors are usually in the white or grey family.

Primary colors often match your brand. Specify them with a HEX code like #FFCC00 or as an RGB value like (255, 204, 0).

Your secondary color will often be complementary or analogous to your primary. Use a color generator to explore alternatives.

Convey Meaning

Beyond base colors, you need a palette of colors reserved to convey meaning. These include things like data visualization, alerts, and status. Reserve the “stoplight” shades of red, yellow, and green for alerts and status. Your data visualization palette should include a wide range of high-contrast hues.


Never use color alone to convey meaning. When using red in an error message, pair it with an icon or text.

Test your color palette for contrast to accommodate the visually impaired. The W3C (World Wide Web Consortium) recommends the following contrast ratios:

  • 4.5:1 for text
  • 3:1 for large text
  • 3:1 for icons

Finally, be sure to test your color palettes with your users.