Color spaces and color-vision deficiency
2025-01-13
The HSV color space
hue H (0-360):
hue of the color
saturation S (0-1):
colorfulness relative to the brightness
of the color
value V (0-1):
subjective perception of amount
of light emitted
The HSV color space
Problem: Color changes in non-intuitive ways with saturation and value
The HLS color space
hue H (0-360):
hue of the color
lightness L (0-1):
brightness relative to the brightness
of a similarly illuminated white
saturation S (0-1):
colorfulness relative to the brightness
of the color
The HLS color space
Problem: For high saturation, perceived lightness changes with hue
The Luv color space
luminance L (0-100):
amount of light emitted
green/red axis u (approx. -100 to 100):
amount of green vs. red
blue/yellow axis v (approx. -100 to 100):
amount of blue vs. yellow
The Luv space in polar coordinates: HCL
hue H (0-360):
hue of the color
luminance L (0-100):
amount of light emitted
chroma C ():
colorfulness of the color
The HCL color space: Hue-Chroma plane
The HCL color space: Luminance-Chroma plane
We can explore HCL colors from R
We can explore HCL colors from R
The app is also available on the class website
1. Avoid high chroma
High chroma: Toys
Low chroma: Elegance
2. Be aware of color-vision deficiency
5%–8% of men are color blind!
Red-green color-vision deficiency is the most common
2. Be aware of color-vision deficiency
5%–8% of men are color blind!
Blue-green color-vision deficiency is rare but does occur
2. Be aware of color-vision deficiency
Choose colors that can be distinguished with CVD
Consider using the Okabe-Ito scale
| Name | Hex code | R, G, B (0-255) |
|---|---|---|
| orange | #E69F00 | 230, 159, 0 |
| sky blue | #56B4E9 | 86, 180, 233 |
| bluish green | #009E73 | 0, 158, 115 |
| yellow | #F0E442 | 240, 228, 66 |
| blue | #0072B2 | 0, 114, 178 |
| vermilion | #D55E00 | 213, 94, 0 |
| reddish purple | #CC79A7 | 204, 121, 167 |
| black | #000000 | 0, 0, 0 |
CVD is worse for thin lines and tiny dots
When in doubt, run CVD simulations
Original
