The importance of Color Composition

The proper use of color is paramount in any visual design project. The central concept of using color is to achieve the right balance between choice, saturation, and contrast. In this article, I will explain how color schemes apply to web and mobile apps, and how primary and secondary combine and produce desired value and effect.

Color in Digital

Do you ask yourself how and why color affects your mood? Some color meanings are deeply rooted in our brains. Colors are visible all around us always. Red, as the color of fire, is associated with warmth. Blue is the color of the sky and the sea. However, color associations differ individually, even culturally. For example, most Americans associate green with money, which is the color of dollar bills. Research shows that coloring can influence mood, heart rate, even cause insomnia. Many factors influence people’s preferences – gender, age, even cultural background. Tests indicate that a black-and-white image may sustain interest for less than two-thirds of a second, while a colored image does for two seconds or more.

Nowadays, people can live and work in two different locations. From a designer’s perspective, it is essential to do a quick research before starting a new project. My advice, whatever you do or wherever you go, do not underestimate the demographic factor. If you do, you may put yourself in danger. Choose colors wisely.

Primary, Secondary and Tertiary Color Wheel

People have a better relationship with art and artists when they understand color combinations and what makes it look naturally beautiful.

Primary Colors cannot be created by mixing other colors. Yellow, Red, and Blue are the original parents of all the future generations of paint. They are at the top of any color structure. You may look around you and assume that there are dozens of primary colors, but in fact, there are only three. Every other color you see in everything around us is created from a combination of these three colors.

When I was a kid, my parents used to buy a bunch of drawing supplies for the chilly days when we had to stay home. Most of my drawings from then were with flowers, trees, grass under the house, and often green was the first color to run out. Then I found a solution – I could make green mixing other colors, and voila, I made a Secondary Color. Secondary colors are green (yellow and blue), orange (yellow and red), and purple (red and blue).

When we take this a step further and mix a primary color with a secondary color, we get a tertiary color. There are six tertiary colors: yellow-orange, red-orange, red-violet, blue-violet, blue-green, and yellow-green. 

Color scheme

Now we have a color wheel with 12 primary colors. They can help us create a color combination that looks good and stands out. When colors are mixed randomly, they do not produce a positive effect. Choosing the right combination comes as a result of applied color theory knowledge and a sense of aesthetics. Fortunately, there are some fail-safe color schemes, ready for use, and easy on the eye:

1. Complementary - colors are opposite to each other on the color wheel, so they create a sharp contrast

2. Split-complementary - where two analogous colors complement a primary color

3. Analogous - groups of three colors that are next to each other on the color wheel, and a tertiary

4. Triadic – Colors that are evenly spaced out around the color wheel. Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated versions of your hues

5. Square/ Rectangle – They are like triadic, but have one more color so that all of them are evenly spaced around the color circle

6. Monochrome - based solely on one base color and includes different shades and hues of that same color

Warm and Cool Color

It is a well-known fact that colors fall into two main categories: warm and cool. Understanding warm and cool colors will significantly help you with your color mixing and give your artwork a more balanced look.

Warm colors are red, yellow, and orange because they remind us of things like the sun or fire.

Cool colors are blue, green, and purple, and even violet. They evoke a relaxed feeling because they remind us of things like water or grass, snowy mountains.

An interesting fact is there are warm and cold versions in each color family. Colors seem friendly if they contain enough yellow or yellow-red, and cold — if they hold a noticeable quantity of blue.

Shades, Tint and Tone

A tint is a mixture of a color with white, which reduces darkness. Tinting a color also desaturates the hue, making it less intense. White can mix with any of the twelve shades of the color wheel, or you can mix any of the twelve shades to make any other hue and create tints of that hue by adding measured amounts of white.

The tone is produced either by mixing a color with grey or by both tinting and shading. A tone is created when you add both white and black (gray), to paint and tone it down, or desaturate it.

The shade is a mixture of black, which increases darkness. Shades can range from a barely shaded pure hue to a deep black color that is in the color family of the original hue.

Color Palette in Web and Mobile Application  

The color palette is the combination of colors you choose for your work. Once you have picked the colors you will be using, you’d better stick to using them throughout your site. Color palettes are used to make sure your painting, illustration, design colors coordinate, and look they belong to the same set. Color increases brand recognition by 80%, which means choosing your web design color palette is essential to making your website not just enjoyable, but also engaging to your audience.

My advice for web and mobile designers is to start with a monochrome scheme and then gradually use colors. Second, pick a base color (or I called it dominant color), and once you have it, it is time to choose a color scheme to build a palette. Keep in mind that choosing a color scheme depends on how do you want to engage with visitors and end customers. Do not forget and undervalue the background color of your work. Picking and mixing color can be a tricky game. 

If you have a few spare minutes, find a picture you like, and create a color palette. I guarantee that you will be surprised by the result.  

Power of Color Composition 

Designing a new website or mobile application always leads us to questions what color palette will work best. There is an infinite number of possible color combinations. But keeping it simple will help to improve the UX. It would be easier to understand what are the main topics and what actions can be made. As you would expect, designers use brand color identity for the base color and then add contrast color, a different type of shades, tint, etc.

Color attracts attention, groups related elements, conveys meaning, and generally enhances the aesthetics of your site. Knowing how to use the right color is essential. Using psychology, in combination with color, often works to gain more success among your competitors.

• blue: sadness, calm, loyalty. (Primary)
• yellow: happiness, concentration, hope. (Primary)
• red: passion, anger, danger, love (Primary)
• green: abundance, nature, freshness. (Secondary)
• purple: royalty, luxury, wealth, sophistication (Secondary)
• white: purity, cleanness, innocence.
• black: mystery, elegance, death, evil, power, mourning

Before choosing what colors to include, be sure that you understand your audience and culture and what colors represent. A few examples of making a clear view:  

• Love takes on unusual colors in diverse cultures: red for Western and Japanese, green for Hindu, Yellow for Native American, and blue for African 
• In the Western and Japanese culture, red symbolizes anger while in Hindu, anger is represented by black 
• In the UK, yellow is associated with happiness and springtime; in China — with pornography

What a difference, ha?

Color Scheme Examples in Apple’s Icons

I want to share with you some of the color schemes that Apple use in their icons: 

• Notifications and Messages– use a complementary color scheme for better contrast 
• Find my phone – analog scheme 
• Game Center – mixed  
• Photos – color wheel in different shape 

Web and Mobile Application

As a UI/UX designer, I read a lot about design, and I want to be up to date. I want to share with you what dribbble.com does — I like it a lot. Uploading an illustration, animation, web, or mobile application design, Dribbble automatically creates a color palette. You can scroll down and see what type of color scheme it uses.

Brand colors should stand out or at least be instantly recognizable. Most brands have more than one color. While the logo might be blue, the website might include yellow or green as well. This combination is called a brand palette, and essential to have those colors work together in harmony. Brand colors appear in:

• Logo
• Website
• Advertisement
• Social Media
• Products
• Events

Conclusion

Color Composition has an undeniable weight during the planning and execution of any UI/UX design. The human eye recognizes colors and shapes much sooner than anything more complex like word characters. Designers use set color schemes for everything related to the brand – logo, website, brochures. Although a color selection is central to making a good ‘first impression,’ its real power shows when paired with quality content. Content and color do more than help people digest information quickly — they can change moods and actions, as well as influence decisions.