chapter nine

9 Color theory

 

This chapter covers

  • The color wheel and color relationships to help you pick colors when creating a color palette
  • How to create shades and tints from colors and the terminology to use when talking about different color aspects
  • The psychology of color, what color choices convey emotionally and how that can help you determine what colors to pick from when picking a color palette
  • An exercise that walks through how to pick and apply a color scheme and accessibility considerations when doing so
  • The different web color modes that are available for you to pick from when coding and being mindful of color discrepancies across screens

If you search for “color optical illusions” in your favorite search engine, you’ll get a number of results, some that look like the image is moving. This is due to the color choices, the structure of our eyes and our perception. Those color choices to create the illusion are a part of the subject of color theory. One of the more famous color optical illusions, in figure 9.1, is Adelson’s checker-shadow illusion in which a checkerboard is appears appear to have a shadow cast over it by an object. The square labeled “A” appears to be darker than the square labeled “B” but they are actually the same color when placed side by side.

Figure 9.1 Adelson’s checker-shadow is an optical illusion where squares A and B are the same color.

9.1 The Color Wheel

9.1.1 Color relationships

9.2 Color terminology

9.2.1 Creating shades and tints

9.2.2 Warm versus cool colors

9.2.3 Hue, Saturation, and Lightness

9.3 Color psychology

9.4 Picking and applying a color scheme

9.4.1 Tutorial: Pick a color scheme and apply it

9.5 Accessibility considerations

9.6 Web color modes

9.6.1 RGB & RGBA

9.6.2 Hexadecimal

9.6.3   HSL and HSLA

9.7 Color discrepancies on screens

9.8 Summary