6a: Color


  • Perception: How the eye perceives color
  • Specification: How we specify color
  • Use: Use of color in visualizations

Visible electromagenetic spectrum

Visible light is roughly in the wavelengths of 400nm (4 x 10-7m) to 700nm (7 x 10-7m).

Eye Structure

Eye: Rods and Cones

More detail on the fovea

Cones: photoreceptor wavelength

Red cones, or L-cones. 64% of total cones, maximally sensitive to long-wave light

Green cones, or M-cones. 32% of total cones, maximally sensitive to medium-wave light

Blue cones, or S-cones. 2 – 7% of total cones, maximally sensitive to short-wave light

Cones: distribution

Left: Illustration of distribution of cones in fovea of human with normal color vision.

Right: Illustration of distribution of cones in fovea of human with protanopic vision, i.e. no L-cones (red cones)

What color does the human eye see the most?

Why we need green in our lives

Color blindness 1

Color blindness is genetically inherited. About 8% men (esp. northwestern European descent), 0.5% women around the world

Red-green color blindness is passed down on the X chromosome, of which men have only 1 X chromosome (women have 2).

Color blindness 2

Common: red-green deficiency (deuteronomaly 6% of males). Less common: protonomaly (2 % of males).

Rare: blue-yellow deficiency, tritanomaly (<0.01%).

More info on color blindness

Video: What causes color blindness?

Color blindness 2

Vischeck: color blindness simulation and correction


A colorspace is a system for describing color numerically.

  • RGB
  • CMYK
  • CIE Lab

There are many more: XYZ, Munsell, CMS, etc.

Reading: List of color spaces

Colorspace: RGB

Left: Magnification of pixels on a screen. Right: RGB color cube.

RGB colorspace is additive (i.e. more colors added, the lighter it is).

Problems: Not perceptually uniform.

Reading: Perceptually Smooth Multi-Color Linear Gradients

Chromaticity and Color Gamut

Video: CIE 1931 Chromaticity Diagram

Video: Color Gamuts

Wiki: CIE 1931 space and chromaticity

Reading: What are display color gamuts? sRGB, DCI-P3, Rec. 2020 explained

CIE (Commission internationale de l'éclairage, or International Commission on Illumination) - international authority on light, illumination, colour, and colour spaces.

Colorspace: CMYK

CMYK colorspace is subtractive (i.e. more colors added the darker it is).

CMY is lighter than RGB. Typically for print only.

Reading: Why printing uses CMYK

Video: CMYK vs Pantone vs RGB

Colorspace: HSV/HSL

H = Hue, S = Saturation (vividness of color), V/L = Value / Lightness

Left: Hue described radially. Right: HSV color cylinder

Problems: More intuitive, but also not perceptually uniform.

Colorspace: CIE Lab (or Lab)

L = Lightness, a = red-green scale, b = yellow-blue scale

CIE (Commission internationale de l'éclairage, or International Commission on Illumination) - international authority on light, illumination, colour, and colour spaces.

Designed to better approximate human perception of color.

Perceptually linear (or close).

Colorspace: CIE HCL (or HCL)

H = Hue, C = Chroma, L = Luminance

H and C are transformations of a and b in the Lab model.

Perceptually linear, and more intuitive.

Colorspace comparison

Recap: Color channels

Magnitude channel (quantitative) or identity (qualitative)?

4th channel: Transparency (used as layer for interaction)

D3: Color scales (aka as a channel)

D3: Colorspace

Viridis color palette

Recap: color blindness

  • Colorful (spans wide palette)
  • Perceptually uniform
  • Robust to color blindness
  • Pretty!

Viridis color palette

Reading: "Perceptually uniform?" D3 color scales

Reading: 5 tips on designing colorblind-friendly visualizations

Redundantly encode channels - shape, tooltip, etc.

Color Tools

Recap: Channel effectiveness: Discriminability.

Not too many color bins. Perceptually distinct colors.

I want hue

Color Brewer 2.0

ColorBrewer.org: An Online Tool for Selecting Colour Schemes for Maps

Color: Channel Implications

Channel: separability - luminance and saturation are not the most separable. Also not separable from transparency. For separability, pick hue vs saturation / luminance.

Channel: salience (popout) - small number of bins.

Rainbow color maps: Pros and cons

Reading: Choosing colors for your visualization

Reading: Using color in Information Display Graphics (NASA color usage research lab)

Color: Contrast

Color is perceived differently depending on how it is contrasted with other colors. It is relative and not absolute.

Bezold Effect and White's Illusion

Reading: Luminance contrast

Reading: Simultaneous and successive contrast

Color Theory

Color theory is the collection of rules and guidelines which designers use to communicate with users through appealing color schemes in visual interfaces.

Color theory and the color wheel

Role of color in UX


Chi-Loong | V/R