The use of color in design


4 minute read // Design

Color plays a vital role in design and everyday life. It can attract your eye to a specific image, or trigger a certain mood or feeling in you. It can even communicate important information to you without using words at all.

Animated traffic light
Animated traffic light

So, how do we know which colors work together, and which ones don’t? The answer is simple: color theory.

Artists and designers have followed color theory for centuries. However, anyone can know more about it. They can make you confident in a wide variety of situations. Whether you are choosing colors for a design or choose the colors of the clothes you will buy. All it takes is a little insight, and then you’ll look at the colors in a completely different way.

The basics

Do you remember what you learned in school about primary and secondary colors? Then you already have some knowledge of color theory. Red and yellow make orange, yellow and blue make green, and blue and red make purple. If we mix these colors, we get more gradients like red-orange and yellow-green. All together, they form what is known as the “color wheel.”

Color grid
A color grid centered in the middle

Hue, saturation, and value

These terms may not have been used in everyday life before, but they are key to a more understanding of the shades of a single color.

Hue is just another word to express color. As for saturation, it means intensity, it determines whether the color is dull or vibrant. As for value, it is due to whether the color is dark or light. Gradually from black to white. Combining these gives us a lot of different shades of color.

To create professional-looking color schemes there are formulas based on something called “color harmony”.


It refers to a single hue in a color palette that is expanded upon adding variations in saturation and values.

choosing color in color grid
3 lines choosing the color in a grid


These are the consecutive colors on the color wheel Like reds and oranges, or cooler colors like blues and greens.

picking multiple colors in grid
Example of picking multiple colors in grid


This one refers to colors that are the opposite of each other on the color wheel. For example, blue and orange, or red and green. To avoid seemingly simple complementary colors, diversify them by using other shades that are dark, light, or faded.


This harmony system uses three evenly spaced colors on the color wheel, taking the form of an equilateral triangle. These combinations tend to be striking, especially when combined with primary or secondary colors Therefore, be careful when using them in your work.

picking complimentary colors in grid
Complementary / opposite colors in color grid

There are many more, just check for online color wheels. Most of the time you can choose your harmony.

The dos and dont’s

There are a few dos and dont’s when it comes to color. For example, have you ever seen colors that appear to vibrate if you place them together? The solution is to tone down these colors, and there’s a simple way to do that.

Start with a single color, and try to adjust it, by brightening, darkening, or deflating it. Sometimes a little bit of contrast is all your color palette needs.

Readability is an important factor in any design. Your color should be easy to read and comfortable on the eye. Sometimes it might mean that no color is used at all, or at least not on every little detail. Neutrals like black, white, and gray can help you balance your design. But when you use color then, it will stand out more.

Each color communicates a message (to whoever looks at it). It is important to bear in mind the nature of your project and then choose the right colors. For example, bright colors tend to give a fun and modern vibe. Faded colors seem to have something to do with business.

Sometimes, it depends on the context. Colors are amazing in their flexibility.

You can find ideas for color schemes in all kinds of interesting places. From advertising and marketing, websites, and even famous artworks.

We hope you have enjoyed learning basic information about color. Don’t forget about color blind people. We explain more about that in our other article called: Accessible web design explained.

Scroll down for more related articles in this section
Scroll down for more related articles in this section