Colors in UI Design
Applying color to your designs does take an understanding of how these colors are selected. Many people think the choice of colors for UI mostly depends on the designer’s taste and sense of beauty. However, the process of the color selection is more complicated than it seems and plays a significant role in design. According to color psychology, we’ve found out that colors have great impact on the mood and behavior of the user.
Pyschology of Colors
Color theory and the psychological effects color can have on users is a complex and often subjective topic. Psychology of colors states that our mind reacts to colors while we usually do not notice it. When human eyes perceive a color, our brain gives signals to the endocrine system releasing hormones responsible for the mood and emotions. Some colors and their meanings are :
Red — Red is the color of danger and passion, as well as excitement. It’s a very strong color and can elicit strong reactions in people. Lightening it to pink makes it more feminine and romantic while darkening the hue to maroon makes it more subdued and traditional.
Orange — Orange is a very creative color that’s also associated with adventure and youth. It’s very energetic, too. Because of orange’s strong ties to 70s style, it can also evoke a retro feeling.
Yellow — Yellow is happy, optimistic, and cheerful. It’s popular in designs for children and adults alike. More pastel hues are often used as a gender-neutral baby color, while brighter yellows are popular in creative designs. Darker shades of yellow become gold, which is associated with wealth and success.
Green — Green has varied associations. On one hand, it provokes feelings of wealth and tradition (particularly darker hues), while on the other it’s strongly associated with environmentalism and nature. Lime greens are often associated with renewal and growth.
Blue — Blue is most often associated with loyalty and trust. Brighter blues can be affiliated with communication, while duller and darker blues can be associated with sadness and depression. Blue is the most universally liked color in the world, which may explain why so many companies opt for blue shades for their branding.
Purple — Purple is another hue with varied meanings. It’s long been associated with royalty and wealth (since purple dye was rare in many ancient civilizations, it was reserved for royalty). But it’s also associated with mystery and spirituality. Purple can also evoke creativity.
Black — Black implies sophistication and luxury. It can also be tied to sorrow and negativity, however. Depending on the other UX colors being used alongside black, it can feel modern or traditional, formal or casual.
White — White is tied to purity, innocence, and positivity. White is also very popular in minimalist designs, due to its neutrality and simplicity. Like black, white easily takes on the characteristics of other colors it’s used with.
Gray — Gray has varied meanings, depending on context. It can be conservative and sophisticated or dingy and dull. It can be emotionless or moody. It can also be associated with sorrow and sadness.
Brown — Brown (which is actually a dark shade of orange) is associated with being down to earth and grounded. It’s also associated with nature and even coziness. And, of course, it can be affiliated with being dirty or dingy.
The 60-30-10 Rule
The 60-30-10 Rule is a simple theory for creating color palettes that are well-balanced and visually interesting. The idea is that one color—generally something fairly neutral (either literally or psychologically)—makes up 60% of the palette. Another complementary color makes up 30% of the palette. And then a third color is used as an accent for the remaining 10% of the design.
This method makes it much easier for designers to start experimenting with unconventional color palettes without stepping too far outside the expected norms within an industry or brand. Adding a pop of some unexpected hue can elevate a design that otherwise fits within what is expected of a particular company. It can also be the first step toward creating a brand palette that is much more forward-thinking than its competitors, thereby setting the brand apart and making it more memorable.
Color Contrast
Keeping decent contrast between colors is going to help keep your design accessible to people who have difficulty seeing in general. Colors that are too close in luminosity, hue, or saturation can be difficult to distinguish when paired next to or on top of similar elements. This difficulty with distinguishing elements can happen even when a person’s vision is unaffected. But for a short-rule, keep the contrast in check by testing out your colors by converting the palette or design into grey-scale as a quick way to test the amount of difference.
Color Harmony
The word “harmony” usually associates with something orderly and pleasing. The color harmony is about the arrangement of the colors in design in the most attractive and effective way for users’ perception. When colors are organized, viewers feel pleased and calm, while disharmony in design gives the feeling of chaos and disgust. The color balance is vital in design since users make their impression of the website or application by the first look, and colors have the big influence. Designers distinguished the basic color schemes that work effectively. Some Color Schemes that we have today are :
Monochromatic. Color harmony is based on one color with various tones and shades of it.
Analogous. The scheme applies colors located right next to each other on the color wheel.
Complementary. It is the mix of colors placed in front of each other on the color wheel and it aims to produce high contrast.
Split-Complementary. This scheme works similar to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red.
Triadic. It is based on three separate colors which are equidistant on the color wheel. Professionals recommend to use one color as a dominant, the others as accents.
Tetradic/Double-Complementary. The tetradic color scheme employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle.