High-speed photograph of a droplet in white fluid
Part of the CSS Reading List

Color is an inherent part of design, and one that is easy to apply in CSS: the color property determines the color of selected text, while background alters the perceived color in the space behind the element.

However, color is not without its complications: there are four different methods of applying color in CSS, each with its own purposes. Color is not perceived equally by all human beings: contrast ratio, cultural signifiers and color blindness are all factors that need to be carefully considered. Finally, all web designers need to have an understanding of the basics of color theory: what makes certain shades "work", and why.

Goals: “Paint” web page elements using all four CSS color systems; understand accessibility issues relating to color, together with basic color theory.

Prerequisite: Introduction to CSS

Total time: 3 hours

Core Material

  1. Introduction
  2. Hexadecimal Colors
  3. Color Keywords
  4. RGB
  5. HSL
  6. Three Ways To Use HSL
  7. alpha
  8. opacity
  9. Color Theory Introduction
  10. Basic Color Theory
  11. Understanding Gamma
  12. Understanding sRGB
  13. Traditional Color Tools
  14. Minimalist Color Tools
  15. Sources of Color Inspiration
  16. Which Color System To Use When
  17. currentColor

Color Accessibility

These are also part of the accessibility reading list

  1. Contrast Ratio
  2. Designing For Color Blindness

Optional

Read about color palette extraction tools for web development.

Recommended Reading

Read Chapter 11, Color, from HTML & CSS by Jon Duckett. Read Chapter 13, pages 576 – 591, in Learning Web Design by Jennifer Niederst Robbins.

Read Adam Schwartz’s chapter on color in The Magic of CSS.

Supplementary Material

Read Sarah Drasner’s excellent Nerd's Guide to Color. I would also highly recommend reading Interaction of Color: 50th Anniversary Edition by Josef Albers.

When You’re Done

After color comes typography: the setting, placement and display of text on web pages. In the meantime, you are strongly encouraged to start building your color literacy by combining and contrasting different colors on web pages, exploring and researching how color wordlessly communicates to an audience.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.