6.S082 Lecture 18 Color

Topics for today

How color works
Different color models
Designing with color
Accessibility & color
Color appearance

Why is a fluorescent highlight not as bright in a photo?

Why are colors less vivid when we print?

Color gamut: The range of colors achievable by a certain output device

Fluorescent colors are outside the gamut of any screen
The most vivid colors your screen can display are outside the gamut of home printers

uv chromaticity diagram

Typical screen gamut vs print

Gamuts are actually 3D

Chromaticity diagrams are a simplicifation

Screen

How color works on screens

A computer display can be thought of as a grid of millions of little red, green, and blue lamps, each with their own dimmers.

8 bits

= 2⁸ states

8 bits

= 256 states

8 bits

= 0-255 range

= 24 bits per pixel

= 3 bytes per pixel
(in uncompressed images)

= 256³ possible colors

rgb(255, 51, 0) rgb(100% 20% 0%) #FF3300

Anti-aliasing

So, what's wrong with RGB?

The RGB color model comes from hardware design, not HCI.

So, I’ll produce the brown I want by combining some red light, a bit less green light, and a bit of blue light!

— No one, ever

Humans express color via a pure hue (green, blue etc) + modifiers (muted, light, dark, reddish etc)
Studies disagree on exact modifiers, but all find the same general approach

A brief sample of color naming research:

Berk, T., Brownston, L., & Kaufman, A. (1982). A New Color-Naming System for Graphics Languages. IEEE Computer Graphics and Applications, 2(3), 37–44. https://doi.org/10.1109/MCG.1982.1674223
Mojsilović, A. (2005). A computational model for color naming and describing color composition of images. IEEE Transactions on Image Processing, 14(5), 690–699. https://doi.org/10.1109/TIP.2004.841201
Heer, J., & Stone, M. (2012). Color naming models for color selection, image editing and palette design. Conference on Human Factors in Computing Systems - Proceedings, 1007–1016. https://doi.org/10.1145/2207676.2208547

#ff005a

= Red: 255
Green: 0
Blue: 90

So, 255 —> FF and 0 —> 00. What about 90? Hmmm… 90 = 5×16+10 —> 5A, so #FF005A!

— No one, ever

Any bad UI can be mastered with sufficient effort — that does not make it usable.
“The king is naked!”

What about named colors?

goldenrod darkgoldenrod lightgoldenrod lightgoldenrodyellow goldenrodyellow

darkolivegreen olivegreen lightolivegreen

lightseagreen seagreen darkseagreen

palevioletred mediumvioletred violetred

blanchedalmond chartreuse cornflowerblue goldenrod dodgerblue gainsboro lemonchiffon linen moccasin oldlace olivedrab orchid

indianred navajowhite peru

gray darkgray

Lightness

HSL: A polar form of RGB

HSL Math: Saturation & Lightness


		// red, green, blue in [0-100]
		let min = Math.min(red, green, blue);
		let max = Math.max(red, green, blue);
		let d = max - min;

		let saturation = 0;
		let lightness = (min + max) / 2;

		if (d !== 0) {
			saturation = d * 100 /
			             (100 - Math.abs(2 * lightness - 100));
		}

HSL Math: Hue


		let hue = 0;

		if (max === red) {
			hue = (green - blue) / d + (green < blue ? 6 : 0);
		}
		else if (max === green) {
			hue = (blue - red) / d + 2;
		}
		else if (max === blue) {
			hue = (red - green) / d + 4;
		}
		hue = Math.round(hue * 60 % 60);

Is HSL the solution?

Problem
HSL Lightness is meaningless across different hues.

Problem
The same distance in the HSL cone can produce vastly different perceptual color differences.

rgb(100%, 50%, 100%) rgb(100%, 0%, 100%) rgb(50%, 0%, 100%)

Problem
The same distance in the RGB cube can produce vastly different perceptual color differences.

A color space has

Perceptual uniformity

when the perceptual similarity of two colors is measured by the distance between them.

RGB and HSL are not perceptually uniform.

hsl(0, 100%, 50%) hsl(0, 100%, 80%)

Problem
HSL axes are not orthogonal; a change in lightness can affect perceptual saturation

Same RGB coordinates, different colors

MacBook Air 2013

MacBook Pro 2016

Problems with RGB

Hard for humans to use
Not perceptually uniform
Device dependent

Device Independent Color

Color models that are tied to measured color, not hardware

Most well-known: XYZ, Lab, LCH
Gamut: all visible color and beyond

Measuring color with a Spectrophotometer

ICC color profile: absolute measured color values of a color space

CIE XYZ 1931

One of the first mathematically derived color spaces
Based on human vision
Not perceptually uniform

Great reading: https://wolfcrow.com/what-is-the-difference-between-cie-lab-cie-rgb-cie-xyy-and-cie-xyz/

Lab & LCH

Transformation of XYZ
Perceptually uniform
L is perceptual lightness
a, b: opponent color axes (unbounded)
C, H: Chroma (unbounded) and Hue (0-360)
C = sqrt(a² + b²)
H = atan(b / a)

Standardized RGB color spaces

Predefined RGB gamut instead of device dependent
Most popular: sRGB
Newer monitors: Display P3, 50% larger by volume
All current CSS colors are in sRGB
- Surprise, rgb(100% 0 0) is probably not the most vivid red your screen can produce! 🤯
- Tradeoff: Device independence vs gamut richness

Different RGB gamuts

MacBook Air 2013

sRGB

Designing with color

Color is communication

✚

Adobe Color: Crowdsourced color palettes

Color harmonies

Palettes from photos

Adobe Capture

Accessibility concerns

Welcome to my awesome slide!!!

Ensure at least WCAG AA color contrast between text and background

Techniques to increase contrast

Increase/decrease lightness of one or both colors accordingly
Bigger and/or bolder text
text-shadow
Semi-transparent black or white background

Atypical color vision

Type	Male XY	Female XX
Protanopia	1.0%	0.02%
Deuteranopia	1.1%	0.01%
Tritanopia	0.002%	0.001%
Cone monochromatism	0.0%	0.0%
Rod monochromatism	0.003%	0.002%
Protanomaly	1.0%	0.02%
Deuteranomaly	4.9%	0.38%
Tritanomaly	0.0%	0.0%
Total	8.0%	0.4%

Protanopia in practice

Do not use color alone to convey information

Which one is better?

Side effect: better usability on monochrome screens

Color appearance

What color is the paper?

What color are the strawberries?

Actual colors in the image

Perception of color is affected by…

context
lighting
surrounding color
entire adaptive field of everything you can see

Checker shadow illusion

My mom says this is pink and white... I see teal and grey. What do you see? pic.twitter.com/1MqlWIGVR4
— Dylan Hawk (@dylanhawk_) October 13, 2017

The viral 2015 dress

The gamut of a digitally projected medium […]. Here, ambient illumination affects the result dramatically (gamut volume differs by a factor of six)
Morovic and Sun, 2000b

Topics for today

Why is a fluorescent highlight not as bright in a photo?

Why are colors less vivid when we print?

Color gamut: The range of colors achievable by a certain output device

u*v* chromaticity diagram

Typical screen gamut vs print

A computer display can be thought of as a grid of millions of little red, green, and blue lamps, each with their own dimmers.

Anti-aliasing

The RGB color model comes from hardware design, not HCI.

So, I’ll produce the brown I want by combining some red light, a bit less green light, and a bit of blue light! — No one, ever

Humans express color via a pure hue (green, blue etc) + modifiers (muted, light, dark, reddish etc) Studies disagree on exact modifiers, but all find the same general approach

#ff005a

So, 255 —> FF and 0 —> 00. What about 90? Hmmm… 90 = 5×16+10 —> 5A, so #FF005A! — No one, ever

Any bad UI can be mastered with sufficient effort — that does not make it usable. “The king is naked!”

What about named colors?

HSL: A polar form of RGB

HSL Math: Saturation & Lightness

HSL Math: Hue

Is HSL the solution?

Problem HSL Lightness is meaningless across different hues.

Problem The same distance in the HSL cone can produce vastly different perceptual color differences.

Problem The same distance in the RGB cube can produce vastly different perceptual color differences.

Perceptual uniformity

Problem HSL axes are not orthogonal; a change in lightness can affect perceptual saturation

Same RGB coordinates, different colors

Problems with RGB

Color models that are tied to measured color, not hardware

Measuring color with a Spectrophotometer

ICC color profile: absolute measured color values of a color space

CIE XYZ 1931

Lab & LCH

Standardized RGB color spaces

Different RGB gamuts

Color is communication

Adobe Color: Crowdsourced color palettes

Color harmonies

Color harmonies

Palettes from photos

Palettes from photos

Adobe Capture

Welcome to my awesome slide!!!

Welcome to my awesome slide!!!

Welcome to my awesome slide!!!

Ensure at least WCAG AA color contrast between text and background

Techniques to increase contrast

Atypical color vision

Protanopia in practice

Do not use color alone to convey information

Which one is better?

Side effect: better usability on monochrome screens

What color is the paper?

What color are the strawberries?

Actual colors in the image

Perception of color is affected by…

Checker shadow illusion

The viral 2015 dress

uv chromaticity diagram

So, I’ll produce the brown I want by combining some red light, a bit less green light, and a bit of blue light!

— No one, ever

Humans express color via a pure hue (green, blue etc) + modifiers (muted, light, dark, reddish etc)
Studies disagree on exact modifiers, but all find the same general approach

So, 255 —> FF and 0 —> 00. What about 90? Hmmm… 90 = 5×16+10 —> 5A, so #FF005A!

— No one, ever

Any bad UI can be mastered with sufficient effort — that does not make it usable.
“The king is naked!”

Problem
HSL Lightness is meaningless across different hues.

Problem
The same distance in the HSL cone can produce vastly different perceptual color differences.

Problem
The same distance in the RGB cube can produce vastly different perceptual color differences.

Problem
HSL axes are not orthogonal; a change in lightness can affect perceptual saturation