Color Theory for Web Designers

WordCamp US 2016

Beth Soderberg | @bethsoderberg

How do humans see color?

Photo by dhester at

Color is not a physical property of objects.

Color is a psychophysical property.

Photo by DeduloPhotos at

Photo by Librepath via


All rods:

  • contain one photoreceptor
  • have the same sensitivity to wavelengths
  • respond to low light levels


Humans have three types of cones:

  • short-wavelength ("blue")
  • medium-wavelength ("green")
  • long-wavelength ("red")

Trichromatic Color Theory

Our visual system is defined by numbers that correspond to the proportional outputs of the three cone photoreceptor types.

Photo by svklimkin at

Photo by chazzy at

Photo by Fir0002/Flagstaffotos via

Photo by AcrylicArtist at

Opaque objects reflect all or part of the light they receive.

If an object absorbs all light...

Photo by o0o0xmods0o0o at

If an object reflects all light...

Photo by lisaleo at

If an object absorbs absorbs blue and green wavelengths...

Photo by Westminister at

When we "mix" paint colors, we are mixing opaque pigments, not light.

Pigment Colors


  • Cyan

  • Magenta

  • Yellow


  • Red

  • Green

  • Blue

When we "mix" light colors, we are combining wavelengths of light.

Light Colors


  • Red

  • Green

  • Blue


  • Cyan

  • Magenta

  • Yellow

Mixing pigment colors and light colors have opposite effects.

pigment and light based color mixtures

Illustration derivative of Quark67 via

Humans tend to think in subtractive color palettes because these mirror the natural world that we live in.

Computer screens generate color using additive systems.

Not all screen colors can be printed and not all print colors can be displayed on a screen.

spectrum of colors available using different color models

Illustration by BenRG and cmglee via

Web Safe Colors

216 colors were identified as "web safe" at the time when computer monitors were limited to 256 colors.

Hex Colors

  • Each digit ranges from 0 (lowest) to f (highest)
  • 16.7 million potential combinations
  • #000000

  • #000011

  • #000022

  • #000033

  • #000044

  • #000055

  • #000066

  • #000077

  • #000088

  • #000099

  • #0000AA

  • #0000BB

  • #0000CC

  • #0000DD

  • #0000EE

  • #0000FF

RGB Colors

  • Each digit ranges from 0 (lowest) to 255 (highest)
  • 16.7 million potential combinations

Don't forget RGBA!

Alpha channel respects:

  • values between 0 (transparent) and 1 (opaque) OR
  • percentages between 0% (transparent) and 100% (opaque)
  • rgb(0,0,0)

  • rgb(0,0,17)

  • rgb(0,0,34)

  • rgb(0,0,51)

  • rgb(0,0,68)

  • rgb(0,0,85)

  • rgb(0,0,102)

  • rgb(0,0,119)

  • rgb(0,0,136)

  • rgb(0,0,153)

  • rgb(0,0,170)

  • rgb(0,0,187)

  • rgb(0,0,204)

  • rgb(0,0,221)

  • rgb(0,0,238)

  • rgb(0,0,255)

HSL Colors

  • Hue: degree from 0 to 360
  • Saturation: percentage from 0% (desaturated) to 100% (saturated)
  • Lightness: percentage from 0% (black) to 100% (white)

HSLA Colors

Alpha channel respects:

  • values between 0 (transparent) and 1 (opaque) OR
  • percentages between 0% (transparent) and 100% (opaque)

HSL Colors

hue distribution



HSL Colors

HSL color model graphic

Illustration by SharkD via

HSL Colors

color picker from PhotoShop
  • hsl(240,100%,0%)

  • hsl(240,100%,3%)

  • hsl(240,100%,7%)

  • hsl(240,100%,10%)

  • hsl(240,100%,13%)

  • hsl(240,100%,17%)

  • hsl(240,100%,20%)

  • hsl(240,100%,23%)

  • hsl(240,100%,27%)

  • hsl(240,100%,30%)

  • hsl(240,100%,33%)

  • hsl(240,100%,37%)

  • hsl(240,100%,40%)

  • hsl(240,100%,43%)

  • hsl(240,100%,47%)

  • hsl(240,100%,50%)

  • hsl(240,100%,50%)

  • hsl(240,100%,53%)

  • hsl(240,100%,57%)

  • hsl(240,100%,60%)

  • hsl(240,100%,63%)

  • hsl(240,100%,67%)

  • hsl(240,100%,70%)

  • hsl(240,100%,73%)

  • hsl(240,100%,77%)

  • hsl(240,100%,80%)

  • hsl(240,100%,83%)

  • hsl(240,100%,87%)

  • hsl(240,100%,90%)

  • hsl(240,100%,93%)

  • hsl(240,100%,97%)

  • hsl(240,100%,100%)

Color is a psychophysical, not physical property.

Trichromatic color theory describes how humans see and how screens generate color.

Mixing pigment colors is the opposite of mixing light colors.

Screens can not display all possible colors of physical objects.

We can use keywords, HEX, RGB(A), and HSL(A) to identify color values in CSS.

Thank you!


Additional Resources

Articles and Resources

Print to Web Conversion Tools

HSL Color Tools

Tools to Test Color Accessibility

Tools to Test Contrast Accessibility

Tools to Choose Colors