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
- Hexadecimal Colors
- Color Keywords
- Three Ways To Use HSL
- Color Theory Introduction
- Basic Color Theory
- Understanding Gamma
- Understanding sRGB
- Traditional Color Tools
- Minimalist Color Tools
- Sources of Color Inspiration
- Which Color System To Use When
These are also part of the accessibility reading list
Read about color palette extraction tools for web development.
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.
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.