Chapter 4: How to use colors

Colors are a big part of your visual identity. A common mistake is to believe that color only has an aesthetic purpose, while in user-experience design, colors mostly have a functional importance. Let’s see how to best utilize them in Pigment Boards.

1. Use a simple palette

When building your palette, make sure to keep it to the minimum amount of shades. Next, create dominant tones for each, and settle on a dark and a light shade. Those 4 colors should already cover most of your needs.

Using too many, unharmonious shades will risk creating a “rainbow” effect and will distract your users from the actual Board content.

Don’t: Use too many colors on the same screen

It will create a feeling of complexity immediately.

Do: Restrain the amount of shades

This will create harmony and remove cognitive load.

2. Pair similar tints

Use tints that are close to each other in the palette. For example:

• Blue + Purple

• Red + Orange

• Blue + Green

• Grey can be easily paired with any color.

This way, you’ll be sure to keep a harmonious visual design throughout your Boards. Also, certain shades are great to use for technical information. Red for instance, means an error, hence basing a palette on the color red can be very tricky.

Do: Use shades that are close together in the palette

Create a harmonious composition and remove cognitive load.

3. Be mindful of contrast

To be sure that your Boards are not only easy to use but also accessible to all, be careful with the contrast ratio between the text color and background color.

We recommend that you avoid using the colors that are in the middle of the palette, but rather use the one on the edges. A light text on a dark background and vice-versa.

Also, when in doubt, use black for text on light background or white on dark background, that is the safest way.

4. Use color when it’s really needed

Not everything needs to be colored. Use color to highlight and call attention to very specific pieces of information to make it stand out. However, when in doubt, default to white or gray.

Don’t: Color every object

It increases the visual noise and screen complexity.

Do: Use color sporadically

It helps to decrease cognitive load and to help users focus on content.

Next up

Learn how to format Grids, Charts and KPIs