5. Working with color (p. 119)
Use HSL to represent colors using attributes the human-eye perceives.
Ditch hex for HSL
HSL vs. HSB
Browsers only understand HSL
You need more colors than you think
What you actually need
Three categories:
- greys or neutral (text, backgrounds, panels, form controls): 8-10 shades
- primary color (primary actions, active navigation elements, etc.): 5-10 shades (ultra-light shades = alert backgrounds; dark shades for text)
- accent colors (highlight a new feature): eye-grabbing color like yellow, pink or teal
- semantic states colors: red (destructive action), yellow (warning message), green (positive trend), 5-10 shades
Define your shades up front
Choose the base color first
Pick a shade that work well as a button background with white text.
Finding the edges
Use a alert component to pick the darkest shade as text & the lightest shade as background. Adjust saturation and lightness.
Filling in the gaps
- lightest = 100
- base shade = 500
- darkest = 900 Pick shades 700 & 300. Then shades 800, 600, 400 & 200.
What about greys?
Pick the darkest for text and le lightest for background, then fill in the gaps.
It's not a science
Trust your eyes, not the numbers
Don't let lightness kill your saturation
Increase saturation with darker & lighter shades.
Use perceived brightness to your advantage
- yellow & cyan have higher perceived brightness
- red & blue have lower perceived brightness
Changing brighness by rotating hue
- blue with a hue = 210: lighter color with hue = 190
- orange with hue = 50: darker color with hue = 32
Don't rotate hue more than 20-30°
Greys don't have to be grey
- cool greys: saturate with a bit of blue
- warm greys: saturate with a bit of yellow or orange
Don't forget to increase saturation for lighter & darker shades.
Accessible doesn't have to mean ugly
- WebAIM Contrast Checker
- text under 18px: contrast ratio at least 4.5:1
- larger text: contrast ratio at least 3:1
Flipping the contrast
- for text on colored background, backgrounds have to be really dark!
- flip the contrast: use dark colored text on light colored background
Rotating the hue
- for colored text on colored background, rotate the hue towards a brighter color like cyan, magenta or yellow
Don't rely on color alone
- add icons to indicate if the change is positive or negative
- on a graph, try contrast instead of colors
Always use color to support something that your design is already saying; never use it as the only means of communication.