Color in CSS Design: Choosing Color Combinations

There are various methods for choosing a color combination for a website. One is through instinct or trial and error. However, this can be limiting in that instinct can only take you so far; the knowledge of color research is necessary. Another approach is to use the goal of a website as a guide, based on past practices. For example, certain colors are more commonly used for some types of businesses than others. However, this, too, is subjective and can be unreliable. A more systematic approach tends to be more reliable, and it is because of this that the use of color schemes should always be considered in the decision of choosing the color combination to use for a website.

Color schemes are derived from a color wheel (also known as color circle) but can also be derived from the colors of an image. A color wheel shows the relationships between colors and provides guides on which colors can be mixed to produce which color. In visual design, it is especially useful for determining which colors can be used together effectively to create specific styles and moods. There are different variations, and the variations are also represented in a variety of ways. Two examples are shown in Figure 9.9.

A typical color wheel contains colors known as primary colors and colors that are produced from mixing primary colors, known as secondary colors and intermediate (or tertiary) colors. Which colors are primary colors depends on various factors such as area of application and tradition. In screen display technologies, they are red, green, and blue. In printing, they are cyan, magenta, and yellow. Artists usually use red, yellow, and blue; for little more than traditional reasons, these colors are the ones on which most color wheels are based. Because mixing them cannot produce all colors, green is often added, and together, the four colors (red, green, blue, and yellow) are sometimes referred to as the psychological primary colors, and they are the colors that are commonly researched in studies regarding the psychological effects of color. Figure 9.10 illustrates the production principle behind a color wheel.

The colors of a color wheel are generally grouped into cool, warm, and cool and warm, as illustrated in Figure 9.11. Cool colors include greens, blue-greens, and blues; warm colors include yellows, oranges, and reds; and purples are either cool or warm. Black is considered warm, because it absorbs all colors and reflects none, while white is considered cool, because it absorbs no colors and reflects everything. Warm colors are used to project warmth in a design, while cool colors are used to project coolness.

By combining the colors in a color wheel, using various configurations, it is possible to produce different types of color schemes, both basic and complex, each of which is best suited for different situations. The color schemes presented here include monochromatic, analogous, complementary, split complementary, double contrast, and triadic. However, there are others. One is the neutral scheme, which includes neutral colors, such as white, black, gray, beige, and brown, which are colors not found on the color wheel. Another is accented neutral scheme, which includes neutral colors and small amounts of one or more colors from the color wheel; for example, black and gray may be used with red.

Some websites provide dynamic color scheme generators with which to experiment, as a quick search should reveal. Some popular ones include paletton.com and color.adobe.com. The latter website also supports the use of images for generating a color scheme. Basically, it allows an image to be uploaded and uses the colors in it to compose a color scheme with which you can then experiment. Being able to generate a color scheme from an image is particularly useful when a design is being created around a central image, such as a logo and the image of nature.

1. Monochromatic

This is a relatively basic scheme that uses only one color, as implied in the name (“mono” meaning one and “chroma” meaning color). Although only one hue is used, the use of tints and shades of the same color makes it possible to produce interesting designs. The scheme is easy to work with and usually produces designs that look balanced and appealing. What constitutes balance in design is discussed in Chapter 23. The main downside of the scheme is that it is difficult to achieve strong contrast or vibrant designs with it. Figure 9.12 shows an example of a design that uses green and its tints and shades. The color palette shows the main colors used in the design, but they are only some of the colors that can be derived from green via the scheme.

2. Analogous

The analogous scheme, too, is a basic scheme, and it uses colors that are next to each other on the color wheel. Typically, three to five colors are used, but more colors may also be used. Designs produced using the scheme are richer than those produced with monochromatic scheme. However, the scheme, too, lacks contrast because of the relatively close similarities between adjacent colors on the wheel. Variation of the scheme are the warm scheme, which uses only warm colors, such as reds, yellows, and oranges, and the cool scheme, which uses only cool colors, such as blues, greens, and purples. Figure 9.13 shows an example of a design that uses the analogous scheme of warm colors. The circular “Award” image at bottom right is not part of the design, so its colors are not part of the scheme; however, the blue provides a good accent. When using this scheme, attention needs to be paid to the contrast between text and background colors to ensure good level of legibility. If the colors are too close, tints and shades are usually used to improve contrast.

3. Complementary

The complementary scheme uses colors that are opposite to each other on the color wheel, such as red and green. The high contrast that results from combining complementary colors typically creates a vibrant look, particularly when the colors are highly saturated. However, combining highly saturated colors can also produce unwanted optical effects, such as vibrations, shadows, and afterimages (ghost images), particularly when they touch. Figure 9.14 shows an example of a design in complementary colors.

To avoid unwanted optical effects when using complementary colors, neutral colors may be added, particularly as background colors, such as the ones shown in Figure 9.15. Notice how the text in the left illustration is difficult to read, while it is not so in the right illustration, because white background is used.

4. Split Complementary

The split complementary color scheme is a variation of the complementary scheme and includes a base color and the colors on either sides of the complementary color on the color wheel. For example, choosing purple color will give orange-yellow and yellow-green as split complementary colors. The scheme produces the same strong visual contrast as the complementary scheme but with less tension. Also, it produces more subtle variations than complementary scheme. Figure 9.16 shows a design that uses these colors and their tints and shades.

5. Double Contrast

The double-contrast (or tetradic) scheme, too, is based on the complementary scheme technique and uses four colors (i.e., two complementary color pairs). Basically, it is a double application of the complementary scheme technique, in that the colors on either sides of each of the two complementary colors are chosen. For example, if the complementary colors are blue and orange, then the colors chosen are blue- purple and blue-green on the blue side and red-orange and orange-yellow on the orange side. Because it uses four colors, the scheme offers more variety of colors than other schemes and produces bold-contrasting designs. However, it is also the hardest to balance. Figure 9.17 shows a design that uses double-contrast colors and their tints and shades.

A variation of the double-contrast scheme is the square scheme, in which the four colors are evenly spaced on the wheel. The scheme’s characteristics are similar to those of double contrast. Figure 9.18 shows as illustration.

6. Triadic

The triadic scheme involves three colors that are equidistant from each other on the color wheel, such as red, yellow, and blue. Although it is not as contrasting as the complementary scheme, it, too, produces strong vibrant designs, and it is relatively easy to achieve balance and harmony with it. Figure 9.19 shows a design that uses triadic colors and their tints and shades.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

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