Color 2 (Using Colors)

Guide info#

Short: 6-8 minutes

TLDR - What this guide covers#

• Using gray colors can create contrast and can also be used to transition between warm colors and cool colors.
• Using greens is very important as humans are the most perceptible to changes in this color. Greens can also look good with other colors, like purples and reds.
• Gradients allow for a seamless transition between two colors. There are hue, saturation, and value gradients.
• Tints are different shades of the same color. They can help create an atmospheric mood.
• Accents are small details that are used sparingly and are used to create emphasis. They can help make your creations more memorable.

1: Using Grays

Some think that since grays are dull colors, they are not important. On the contrary, mastering the usage of grays will greatly help with your colors overall. In this section, we investigate how using grays can help achieve appropriate contrast. Note that when we refer to grays, we refer to not just strictly grayscale values, but any desaturated color in general.

Contrasting with Saturated Colors#

Gray is a dull color - at least compared to its saturated counterparts - yet it is precisely this property that makes them useful in creating a good color composition. Placing vibrant colors next to grays creates a strong contrast that can easily draw someone’s eyes towards it. This is similar to the effect contrast in value gives. Value contrast and saturation contrast are often utilized together for the strongest effect.

The image below is an example of how using grays can make your colors pop. The left and right sides of the painting contain gray and dark buildings, allowing the bright and vibrant oranges in the center to stand out. This contrast is both pleasing and effective at drawing the viewer’s eyes to the intended focal point: the city street.

When contrasted with another hue effectively, grays can often enhance the effect created by that hue. In the example below, the grays of the painting make the red stripe near the bottom to stand out, creating an interesting mood.

An example in GD is shown in this brief ship part by Xender Game. The relatively desaturated blue tones make up most of the color composition, allowing the more saturated red elements to stand out.

Grays as a Transitional Color#

Grays can also work well as an “in-between” color when transitioning from warm to cool colors. Desaturating a hue between a warm and cool color makes the transition more natural. This is helpful for color composition and can help make your lighting more realistic. The examples below can help demonstrate how to implement this.

This image below is a good example of how gray tones can be used as a transition. The sky is a warm grayish color, while the ambient color (the color of the darkest shadows) is a purplish blue. In between the sky and the shadows, there is a more grayish-pink tone to smoothen the transition.

Here is another example, this time with yellow and blue tones. The pinkish-gray midtones harmonize with the bright yellows and oranges, and go along the dark blue shadows.

There are many ways to harmonize grays with other hues. The best way to learn how is to build up a visual library of appealing color compositions that feature gray tones; in other words, look for as much art as you possiblby can.

2: Using Greens

Greens are common in beautiful natural scenes, but they can look hideous when used improperly. Human eyes are the most sensitive to changes in the color green, which is why controlling its hues and saturation is such a precarious task. In this section, we investigate:

• How green hues can be used with other colors for great visual effects.
• Effective methods to enhance the appearance of green by incorporating accents of reds and purples.

In general color design principles, it is a good idea to vary your hues a fair amount. This usually means taking a normal hue and adding slightly warmer/cooler variations around it, something often referred to as hue shifting. This is especially true when using greens.

Here is an example of an artwork that heavily uses different hues of green. The otherwise dull green of the leaves and foliage are enlivened by the yellow hues in the areas where the grass catches sunlight. The red accents also play a big role in making the greenery more interesting, bringing attention to the focal area.

Here are some examples from GD: In Ibrah, Kivvvi, Cuaer, and Nekon’s part of Cytokinesis, the primarily used color is green, but is complemented by the secondary blue pulses. Some of the green elements in the part are also livened up by pulses into a more yellow-green hue. Both of these factors contribute to an interesting color composition.

In Deovise’s part of Postbluane, green plays a role as an accent or secondary color rather than the primary color. Still, it is contrasted effectively with the primarily cooler blue shades to show the warm sunlight on the greenery. Meanwhile, a bluer hue is used for the shadows, both for hue variation and to showcase the ambient blue light from the sky.

3: Color Gradients

Gradients excel at livening up your colors by creating subtle but eye-catching variation. To be specific, they let you have contrast without needing everything to be a sharp edge, thus allowing a seamless transition between two different colors. Below is an example by Firs7 that demonstrates a wide variety of gradients. Throughout the structure, there are gradients from green to yellow (hue gradients), gradients from green to white (saturation gradients), and gradients from green to black (value gradients). These gradients work together to give the structure visual flair and appeal.

In this scene of Ori and the Will of the Wisps, the color gradients are prominent in the background and on the trees. Notice how each gradient in this image cannot be classified as just a hue, saturation, or value gradient; rather, they are a combination of all three types occurring simultaneously. The gradients on the trees act as a form of lighting and help the trees feel less flat.

4: Tints

Tinting a color means whitening it to become paler. Tints can make your colors airier and less muted, and are beneficial for creating an atmospheric perspective or mood.

Color tints are also often used in UI/UX design, as shown below:

The UI elements of this UI/UX prototype are tints of the same primary color, brown.

An example of tints used in GD is in this part of NEW LIGHT by cometface. This level uses darker tints of orange and yellow for the blocks, and lighter tints of yellow for the background. This helps the player to focus on the block designs and structuring, and also helps to create an atmospheric and airy background.

5: Accents

Accents are bursts of color that are placed for emphasis__. They are used sparingly, and should have high contrast. If used effectively, they can make your color composition pop and aid in visual flow or mood.

The character below by Rino Park (@rinotuna on Instagram) has an overall red and white color palette. However, most viewers would be immediately drawn to the starkly contrasting green hair, an accent that adds a lot of depth and intrigue to the character. This makes the character’s design more memorable and interesting.

The spaceship below by Kirill Nadtochiy has gray and blue as its main colors. The red stripes on the side of the ship and wings serve as the accent colors.

An example in GD is Magdalene by Lyriaki. This part uses light blue accents to contrast with the red primary color, helping the red stand out much more. This prevents the red from looking monotonous and dead, and additionally helps direct the viewer’s focus as the player icon moves through the part.

Sources#

• James Gurney: Color and Light, Pages 79-86

Changed the channel name: Color 2: Using Colors

**Video: **https://youtu.be/P2r4Z5kbx7M?si=HBKD1NF62wq1inJI&t=875

Credits#

Created by @DangerChampion and @KDE