Color Systems and Conventions in Designs

Color is a vital aspect of designing. Choosing the right shades of colors is paramount to obtain an aesthetic design. Among the infinite number of hues and shades, selecting the optimum one can be intimidating. In this article, you will learn about the various color systems and conventions.

Learning about the theory and science behind color can guide you in identifying the right shades. It is more important due to the perception of the human eye. You can associate different things with one particular color. Also, you cannot use one color to describe multiple situations.

Every color has an emotion associated with it. Moreover, the use of different shades of the same color can deliver a different message. There are infinite reasons why understanding the color systems and conventions is for designers.

Let us start with the basics of color, including the theory and science behind it.

Understanding the Science of Color

What is color? The answer may not seem simple, but it is very straightforward. It is the light reflected by an object that enters the human eye. Different colors are measured by hue, brightness, and saturation of the reflection.

(Source : Google Images)

When light enters your eye, it passes through the rods and cones to the brain. That is how a picture is created. Your perception of a specific color depends upon your specific visual knowledge. Light can be measured in waves, and the distance between two of its peaks is the wavelength.

Color enters your eye in the form of electromagnetic wavelength, representing the entire range of the wavelengths of light. The varying wavelengths form different colors in your mind. However, only a portion of the magnetic wavelength is visible to the human eye.

What you may know as the rainbow is actually the spectrum of light that is visible to the human eye. It is arranged in ascending order, such that the shortest wavelength comes first. That said, you must know that wavelengths may be lower and higher than the visible spectrum.

Categories of Color

Colors can be categorized into three—primary, secondary, and tertiary. Every color or shade of color that you know falls under one of these groups.

Primary: The three main or primary colors are red, yellow, and blue. These come in the primary category as no two colors can be mixed to form these three. They are the main ones from which various other colors originate.

(Source : Google Images)

It is a widely-used tool by artists and designers to choose colors. It usually consists of 12 classes of colors, while some may also contain 24.

To further understand the practical use of colors, let us learn about its models and systems.

Color Systems and Their Importance

Munsell Color System

One of the widely used color systems, it specifies each color based on three particular properties—hue, value, and chroma. Here, hue represents the basic color, the value identifies the lightness, and chroma is the intensity of the color.

It is based on the response of human perception to visual colors. This method is known to be a highly accurate system.

(Source : Google Images)

Hue: It is a horizontal circle that consists of the five common colors—red, yellow, green, blue, and purple. Between the two colors of this circle exists a third color that is a blend of the two. Thus, there are a total of 10 colors in hue.

Each of these colors is further broken into ten parts, making a total of 100 shades. However, color charts usually specify only 40 of these, with each one representing 2.5 shades.

Value: It is the vertical representation of how bright a color is. It varies from white (10) at the top to black (0) at the bottom.

Chroma: It refers to the purity of each color or shade. Its level varies from 0 to infinitely high. However, the standard for chroma of vivid colors is around 8. Here, the lower the level, the less pure the color.

HSB Model

Also known as HSV, the HSB model stands for hue, saturation, and brightness (or value in HSV).

Hue: Ranging from 0 to 360 degrees, hue represents various colors at each degree. For example, red stands at 0 (or 360 degrees). Yellow, green, blue, and purple are at 120, 180, 240, and 300 degrees, respectively.

(Source : Google Images)

Saturation: It is the percentage or amount of color at each level. While 0 shows no color, 100 shows full color. It may be achieved by going inward (less saturated) and outward (more saturated).

Brightness: Varying between white and black, the brightness ranges from 0 to 100. Here 0 is completely white, and 100 is fully black. If the value is closer to 0, the color will be brighter, while it will be darker if close to 100.

Its straightforward ranges or measurements make HSB very simple to understand. At the same time, this becomes the reason why it is not accurate.

HSL Model

Similar to the HSB, the HSL stands for hue, saturation, and lightness. However, the difference here is that the lightness value ranges from 0 to 1, i.e., black to white.

LAB Color Model

Exceeding the HSB model in terms of representing luminosity, the LAB color model creates a distinction based on lightness. It includes L for lightness, A for variations between red and green, and B for the range between yellow and blue.

(Source : Google Images)

Lightness or Luminosity: It ranges from 0 to 100, where the former is white, and the latter is black. It works like the HSB model.

Red and Green: The A component ranges from green to red with the values -120 to +120, respectively.

Blue and Yellow: Similarly, with the B component, you can determine the color variations between blue and yellow. Here, -120 is blue while +120 is yellow.

Comparison Between Color Models

When it comes to using the models, HSL proves to be one of the easiest while using bright colors. Here, you can let the lightness or brightness be the same and just choose different hues for representation.

On the other hand, when using lighter shades of different or the same color, the LAB model is better. That is because, with this model, you can change the luminosity of varying or the same color.

Understanding Color Conventions

Every color that exists is associated with something, such that it delivers a message. No one can understand this better than designers as they need to use colors with the utmost consideration. Each color exhibits an emotion. That is not all. Different shades of the same color may narrate a different story.

That is why understanding color conventions or associations is essential, especially while making designs. On one hand, it will reflect what your brand is about, while on the other, it will represent a feeling.

Before diving into the world of color associations, you must be clear about their temperature.

Color Temperature

The representation of color temperature is best seen in the wheel of colors. Here is a brief description of each group.

Warm: Colors that are on the red side of the color wheel fall under the category of warm colors. These include red, yellow, and orange, along with variations of each of them. Here, you can notice that both red and yellow are primary colors while orange falls in the middle of these.

Thus, it can be said that the range between red and yellow makes the category of warm colors. When compared to the cooler colors, these appear to be closer to an observer.

(Source : Google Images)

Cool: Colors on the rest of the wheel fall under the category of cool colors. These include blue, purple, green, and their variations. While blue is from the primary category, the other two are in the secondary. They are a combination of blue with other primary colors—red and yellow.

These colors are softer and often more restrained than the warmer ones. Additionally, cool colors seem to appear farther when compared.

Note: Only the bright versions of each of the mentioned colors absolutely lie in the given category. It does not apply for lighter versions of the same color or a mixed variant. It means that the color in the warm category may fall under the cool one, depending upon its neighboring shade. The same applies to the cool color category.

Neutral: Colors such as black, brown, grey, tan, and white fall under this category. You may use them in combination with other bright colors or individually. However, they do not really deliver a clear meaning. Instead, their message depends upon the colors present around.

Color Associations

Now that you have an idea about the emotion extended by the different categories of colors let us get specific.

Red: The color is known to produce one of the most powerful responses. As soon as you see red, your instincts immediately tell you that something is wrong. From the ambulance and police siren lights to the signboards on the road, it is often associated with danger. Moreover, you will always find a cross in red.

(Source : Google Images)

Apart from that, it can be associated with blood or anything medical, such as the first aid sign, AIDS, etc. Additionally, the color promotes accuracy, and at the same time, hampers freedom and creativity.

Yellow: If you want your viewers to notice something among the crowd, this is your color. It sort of pops out among multiple colors and has a distinctive identity. You can use yellow to highlight an important message or a warning note.

(Source : Google Images)

Green: You may always get a good and positive vibe from green color. It may be due to its association with nature that makes humans perceive this color to be eco-friendly. If you use any application, green would always signify confirmation or the success of any procedure.

(Source : Google Images)

White: What do you think of when you see white? Peace. Yes, that’s what it mainly represents. However, when it comes to designing, the color is primarily used as a neutral. That is, white mostly does the work of supporting another primary or secondary color.

(Source : Google Images)

Blue: It is a naturally calming color, which may be due to the tranquil feeling exhibited by the sky and water. Also, blue helps enhance creativity, adding to its softness. However, you cannot associate it with eatables, as it may signify cold or rotten food.

Simple Color Combinations

Taking the example of Facebook, it has a plethora of colored images. Now with all the multi-colored content, using all colors as the base would be total chaos. It would seem unpleasant to look at. That is why it uses simple colors such as blue and white, to balance the contrast.

(Source : Google Images)

Apart from that, if you want to deliver a serious message, using whites, blacks and greys are the best options. In this case, users will focus more on your content instead of the colors. On the other hand, content related to fun, party, and enjoyment will be best represented by bright colors.

That said, you must make sure that you never overdo the color usage. It can be a big turn-down for your users. Therefore, understanding the perception of people and their associations with colors is highly essential.

Learning color theory is a huge part of design, but understanding the software like Photoshop and layers is also very important.


Colors act as the building blocks for your design. Users will notice them before any other elements of a content. As a result, your viewer will perceive your page or design directly based on the colors used.

That and many more reasons make the usage of the right colors and combinations crucial for any design. Remember, it can make your art reach the level of 100 or bring it down to zero in seconds. A dominant color can completely change the message delivered or the appearance of a piece.

Understand the correct application of color systems and conventions, and rock your design! Then, you can start to build a brand with designs.

Leave a Reply

Your email address will not be published. Required fields are marked *

Reduce Your Creative Design Budget by 92% With Us!

Join 100+ Customers using Graphically!

100+ Agencies use for their creative needs. Signup now for actionable content & GREAT deals. We won’t SPAM, we promise!