3.3.3 Color Relativity

When designing, it is essential to understand how colors interact with and relate to one another. Color relativity is based on the contrast between neighboring colors. The way humans perceive a color is heavily influenced by the colors that surround it. The three key attributes of a color are hue, value, and chroma. Each can appear altered depending on the surrounding colors. Our eyes judge colors relatively, not absolutely. This concept has been described by Stokley (2018) and others.

The images in the following sections are best displayed when the GitBook is set to light mode.

Impact on hue:

Figure 20: Example illustrating a gray square surrounded by orange adapted from (Stokely, 2018)

The relative hue of a color can shift depending on its surroundings. When placing gray colors inside a warm color, such as an orange rectangle, the gray appears cooler or bluer (see Figure 20). This effect also applies to color temperature: traditional warm and cool hues can appear cooler or warmer depending on the colors nearby. The warmth and coolness of a hue are not absolute; they are strongly related to the colors surrounding it.

Impact on value:

Figure 21: Example illustrating the same colored square surrounded by different color value adapted from (Stokely, 2018)

The relative value of a color refers to the darkness or lightness of a color. The value of a color may appear darker or lighter depending on the neighboring color. For example, the same small purple square may appear lighter and more red-leaning when placed against a cool violet, and darker and more blue-leaning when surrounded by a warmer violet (see Figure 21). This becomes especially relevant in web design, where light and dark modes shift the overall background value dramatically. A color that appears balanced and legible in light mode might become too bright or too dim in dark mode due to changes in surrounding contrast.

Impact on chroma

Figure 22: Example illustrating the same colored lines with different background (Stokely, 2018)

The relative chroma of a color refers to its perceived intensity or saturation. A moderately saturated color may appear vivid when surrounded by neutrals, or dull when placed next to more saturated hues. In some cases, the surrounding lightness and hue can even make a color appear completely different (see Figure 22). By understanding and applying the principles of color relativity, designers can create more effective and visually coherent color combinations that remain adaptable across different environments.