How to Use Color Well

Author: 时光

  How do you “do color” properly? Did that wording send your mind somewhere questionable? No—this is an entirely respectable science article. So let me show you a color picture. Very proper, isn't it? The charming little object below is called a color wheel. It will be the main character in what follows, so take a moment to remember what it looks like.

  This article introduces the fundamentals of color and several common ways of building a palette.

Color Theory and Color Schemes

How Do Humans See Color?

  In nature, light travels from a source to the surface of an object. Most illuminated objects absorb part of that light and reflect the rest into our eyes. The reflected light becomes the color we see. If an object absorbs none of the light falling on it—in other words, if it reflects all of that light unchanged—it looks white. At the other extreme, an object that absorbs all incident light looks black.

  This way of producing color is called subtractive color mixing and corresponds to the CMYK model in multimedia. In everyday life, it is widely used by printers and in other situations where color must appear on an object that does not emit light. The object cannot shine by itself, so the color we see comes from light reflected by the ink.

  The other model, RGB, works in the opposite way. You probably know more about RGB than CMYK. Its initials stand for red, green, and blue, the three primary colors of light. The RGB model mixes those colors in different proportions to create new ones. It is widely used in light-emitting devices such as televisions, computers, and phones.

  Now that you know the two most basic color models, how can you combine colors into a successful palette? Let us begin by looking at several established approaches.

Monochromatic Color Scheme

  A monochromatic scheme may be the most harmonious of all. In the example, the colors barely clash at all; the entire image feels balanced and fresh.

  That harmony comes from using one base color, or hue, and deriving the others through changes in lightness and darkness, as the color wheel shows. No additional hue intrudes, so the result looks simpler, cleaner, and more refined. The weakness is just as obvious: a monochromatic palette offers little variation.

Complementary Color Scheme

  If monochromatic color feels clean, spacious, and harmonious, the next scheme is far more energetic. Can anyone guess what it is? Type your answer in the group chat.

  This is complementary color, also called a contrasting scheme. Complementary colors create a powerful sense of collision. They sit opposite each other on the color wheel, which means their warm–cool qualities and the impressions they produce are also opposed. Place them together, and their conflict immediately commands attention. Used well, that conflict can be striking.

  UI designers often use complementary colors to highlight information they want users to notice. Paintings can exploit the same tension to lead the viewer's eye straight to the intended focal point. The disadvantage is equally clear: too many competing contrasts can become dazzling and chaotic.

Split-Complementary Color Scheme

  Next comes the split-complementary scheme. As the diagram shows, it uses a base color and two secondary colors placed symmetrically around the base color's complement, forming a narrow triangle on the wheel. The result pairs one warm color with two cool ones, or one cool color with two warm ones.

  Unlike a direct complementary pair, a split-complementary scheme is comparatively balanced and gentle. The color at the triangle's narrow vertex generally serves as the dominant hue, while the other two are often used for lighting or accents. This creates a subtler palette with much of the visual effect of complementary color but less of its head-on collision. The wheel makes clear that split-complementary color is essentially a variation or branch of the complementary scheme. Its crucial difference is that the contrast is less intense and exaggerated.

Analogous Color Scheme

  The next scheme seems to combine the strengths of the two approaches above. It is less monotonous than a monochromatic palette but not as aggressive as a complementary one. Applied flexibly, it makes harmonious yet lively interfaces easy to design. What is it? We have arrived at our next scheme: analogous color.

  Analogous colors form a low-contrast group located close together on the color wheel. The scheme is remarkably versatile. Compare it first with monochromatic color. An analogous palette plainly contains more hues, yet it does not break the subtle harmony and balance among them. The result is richer and more colorful, making it useful when a design needs greater variety.

  At the same time, analogous colors are much softer than complementary ones. That makes the scheme a dependable all-rounder, and we see it used everywhere.

Triadic Color Scheme

  A triadic scheme uses three colors spaced evenly around the wheel, creating a degree of contrast among all three. All three can act as major colors, producing a bright, attention-grabbing effect. This approach demands particular care with color balance. Because each pair has a subtle contrast, triadic color is useful when a design needs strong differentiation among all three hues. Divide the image equally among them, however, and the impact can become so strong that beauty is lost.

  Are there exceptions? Yes. Equal shares work in an image whose very meaning suggests an even division—three buttons for three equivalent functions, for example. Once the composition becomes complicated, distributing all three colors equally tends to create disorder.

  To use a triadic palette well, choose one or two of the three as dominant hues and let them restrain the others. Make one color the main presence in the image and use the rest sparingly as accents. Another option is to use a softer tone to temper the other two.

Rectangular Color Scheme

  What happens if you select two pairs of opposing colors from the wheel? You get a rectangular, or tetradic, scheme—an approach even more unruly than triadic color. The four hues have no obvious hierarchy, but their paired contrasts still produce a bright, vivid result. Together, they can create a powerful visual impression, though achieving the best effect requires advance planning and careful design.

  The more colors a palette contains, the harder they generally are to reconcile. Rectangular schemes are more common in evenly divided situations such as four buttons. They can also be blended at lower contrast to create an intentionally intricate effect.

Color Psychology

  Now that we know some fundamentals of color schemes, how do we choose the right one? Before we begin working with color in earnest, we need some “color psychology.” Many people assume that color choice depends mainly on a designer's taste and aesthetic sense. The process is more complicated than it looks, and choosing well is vital to design. The table below shows that different colors tend to produce different feelings.

  Red, for example, is often associated with passion and fervor, but also with aggression and attack. It has two faces: love and confidence on one side, anger on the other. Either way, it is exceptionally conspicuous. In design, red is often an effective way to attract a user's attention.

  What image appears when you think of green? Even if it is not your first thought, green readily suggests dense forests and thriving grassland. It is a vigorous color and therefore ill suited to decorating a negative or pessimistic image. For the latter, we more often choose shades of gray.

  Color psychology describes the feelings of a majority, not a rule that applies to everyone. Some people see green and think of plague, disease, or death. Cultural differences also give the same color different meanings. In Western cultures, white represents holiness and purity and often appears on solemn, sacred occasions such as weddings—hence the traditional white bridal gown. In traditional Chinese culture, by contrast, white can symbolize death. The common phrase “red and white happy occasions” uses “white happy occasion” for the funeral of a family member who died at an advanced age.

  When choosing colors, then, we must consider not only the psychological response we want from the audience but also the specific meanings colors carry in different cultures.

Putting Color to Work

  We now know the basics of color schemes and color psychology. It is time to start using color properly. But how should the first color be chosen? As noted above, the choice matters, and the wrong color can be fatal to a design. We will consider both the intended audience and the subject.

  If the audience is everyone, what is the “safest” color? The answer is blue. Applications built around blue are easy to find on a phone: the default themes of QQ, Alipay, Twitter, and Pixiv, among many others. Why blue? The chart below shows that blue is the most popular color among both men and women, so choosing it appeals to the largest share of the audience. What about cultural differences among countries? Blue also has the largest share among the favorite colors of every country listed in the chart. In color-psychology terms, it feels deep and comfortable while suggesting innovation, trust, and safety.

  Now consider a more specific audience. If it consists mainly of women, warm colors such as pink, purple, and red may create a romantic and pleasant feeling. For a mainly male audience, cool colors such as green, blue, and black may instead suggest calm, depth, or technology. For children and young people, complementary, triadic, and split-complementary palettes can be suitably energetic and bold. For an adult audience, a quieter monochromatic or analogous scheme may be more appropriate.

  The subject matters too. If a painting or design concerns sport, its dominant palette will often involve yellow, red, or green. The first two feel “energetic and passionate,” while green conveys vitality and the pursuit of success. For work or study, cool colors such as blue, green, purple, and even black are more suitable because they can evoke intelligence and maturity.

  You are now a mature connoisseur of color. The next time you admire a colorful picture, you should be able to analyze its palette—and to apply today's ideas when choosing colors of your own. Thank you for reading; that brings us to the end.