Color spaces and color-vision deficiency

class: center, middle, title-slide

# Color spaces and color-vision deficiency
### Claus O. Wilke
### last updated: 2021-09-23

---

class: center middle

## How does a computer represent color?

---

## The RGB color space

.pull-left.width-50[
- red R (0-255): amount of red light

- green G (0-255): amount of green light

- blue B (0-255): amount of blue light
]

.pull-right.move-down-1em[

R | G | B | hex code | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
---| --- | --- | --- | ---
0  | 0 | 0 | #000000 | <div style = "background-color: #000000;">&nbsp;</div>
255  | 0 | 0 | #FF0000 | <div style = "background-color: #FF0000;">&nbsp;</div>
0  | 255 | 255 | #00FFFF | <div style = "background-color: #00FFFF;">&nbsp;</div>
128  | 128 | 128 | #808080 | <div style = "background-color: #808080;">&nbsp;</div>
0 | 158 | 115 | #009E73 | <div style = "background-color: #009E73;">&nbsp;</div>
255 | 255 | 255 | #FFFFFF | <div style = "background-color: #FFFFFF;">&nbsp;</div>
]

---

## The RGB color space

.center[
![](color-spaces_files/figure-html/rgb-viz-1.svg)
]

---
class: center middle

## Humans cannot reason well about the RGB color space

---

## The HSV color space

.pull-left[

- 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
]

.pull-right.move-up-1em[
![](color-spaces_files/figure-html/hsv-viz-single-1.svg)
]

---

## The HSV color space

.center[
![](color-spaces_files/figure-html/hsv-viz-1.svg)
]

---

## The HLS color space

.pull-left[
- 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
]

.pull-right.move-up-1em[
![](color-spaces_files/figure-html/hls-viz-single-1.svg)

]

---

## The HLS color space

.center[
![](color-spaces_files/figure-html/hls-viz-1.svg)
]

---
class: center middle

## Humans cannot reason well about HSV or HLS either

---

## The Luv color space

.pull-left.width-50[

- 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
]

.pull-right.move-up-2em[
![](color-spaces_files/figure-html/luv-viz-single-1.svg)
]

---

## The Luv color space

.center[
![](color-spaces_files/figure-html/luv-viz-1.svg)
]

---

## The HCL color space: polar Luv

.center.move-up-1em[
![](color-spaces_files/figure-html/hcl-viz-single-1.svg)
]

---

## The HCL color space: polar Luv

.move-up-1em.center[
![](color-spaces_files/figure-html/cl-planes-1.svg)
]

[//]: # "segment ends here"

---
class: center middle

## Explore HCL colors interactively in R

---

## We can explore HCL colors in R

```r
colorspace::choose_color()
```

[//]: # "segment ends here"

---
class: center middle

## A few considerations when choosing colors

---

## 1. Avoid high chroma

.pull-left.width-45[
High chroma: Toys

<img src = "color-spaces_files/toys-image.jpg", width = 100%, style = "box-shadow: 3px 5px 3px 1px #00000080;"></img>
]

???

[Photo by Pixabay from Pexels](https://www.pexels.com/photo/super-mario-and-yoshi-plastic-figure-163077/)

.pull-right.width-45[
Low chroma: Elegance

<img src = "color-spaces_files/home-interior.jpg", width = 95%, style = "box-shadow: 3px 5px 3px 1px #00000080;"></img>
]

???

[Photo by Saviesa Home from Pexels](https://www.pexels.com/photo/kitchen-island-2089698/)

---

## 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

.center[
<img src = "https://clauswilke.com/dataviz/pitfalls_of_color_use_files/figure-html/palette-Okabe-Ito-1.png", width = 100%></img>
]

.tiny-font[
Name           | Hex code &nbsp;&nbsp; | 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
]

???

Figure from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

## CVD is worse for thin lines and tiny dots

.move-up-1em.center[
<img src = "https://clauswilke.com/dataviz/pitfalls_of_color_use_files/figure-html/colors-thin-lines-1.png", width = 65%></img>
]

---

## When in doubt, run CVD simulations

<div class = "move-up-1em" style = "width: 50%; box-shadow: 3px 5px 3px 1px #00000080; padding: 8px;">
.small-font[Original]<br>
<img src = "https://clauswilke.com/dataviz/redundant_coding_files/figure-html/iris-scatter-three-shapes-1.png", width = 100%></img>
</div>

???

Figure from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

---

## When in doubt, run CVD simulations

???

Figures from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz)

[//]: # "segment ends here"

---

## Further reading

- Fundamentals of Data Visualization: [Chapter 19: Common pitfalls of color use](https://clauswilke.com/dataviz/color-pitfalls.html)
- Wikipedia: [HSL and HSV](https://en.wikipedia.org/wiki/HSL_and_HSV)
- **colorspace** package documentation: [Color Spaces](https://colorspace.r-forge.r-project.org/articles/color_spaces.html)
- **colorspace** package documentation: [Apps for Choosing Colors and Palettes Interactively](https://colorspace.r-forge.r-project.org/articles/hclwizard.html)