Lecture 18 Color

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

Gamuts are actually 3D

Screen
Print
Chromaticity diagrams are a simplicifation

How color works on screens

We tend to thik of a pixel as a mini lightbulb that can display millions of colors. However, in reality it's more like three lightbulbs: a red, a green, and a blue one, which are dimmable. Note that while we can clearly see the three separate colors when the pixels are large, they blend together to produce white (or more like light gray here, since this is an illustration of the concept)
Dimming each of these three basic colors by a different amount produces the millions of colors modern screens can display
On older, lower resolutions screens, you can actually see the subpixels if you look very closely. Sometimes taking a photo of the screen makes it easier to see them. On modern screens, pixels are so small however that they cannot be seen with a naked eye.

Anti-aliasing

This is why on subpixels if you look very closely at the edges of black letterforms you see blueish and orangish colors.
Note that subpixels do not have the same shape in every screen, each screen has a different *subpixel geometry*

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

= 28 states

8 bits

= 256 states

8 bits

= 0-255 range

= 24 bits per pixel

= 3 bytes per pixel
(in uncompressed images)

= 256³ possible colors

The range of colors a screen can display depends on two things: - how bright are the colors it can prodce when its subpixels are at 100% - how many different states do the subpixels have For many years, red, green, and blue were limited to 8 bits, which produced 256 states. We are currently in a transitional state where many screens have sufficiently large gamuts that they need to use 10 bits or even more to avoid banding. Note that this is approximately the filesize you get with uncompressed image formats like `.bmp`: 3 bytes per pixel.
rgb(255, 51, 0) rgb(100% 20% 0%) #FF3300
For years, all CSS colors were based on RGB as a color model. All of these CSS colors specify the same color.

So, what's wrong with RGB?

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

It's not how humans think about color, it's how machines display color. Using RGB to select colors is like using binary to select numbers.
Thought experiment: Suppose you wanted to describe the top right color here to a friend, in a way that distinguishes it from the other three colors here. How would you describe it?

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:

  1. 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
  2. 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
  3. 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

Hex colors are even worse. Not only do they carry the unnatural mental model of RGB, they have an additional complication over it that each component is encoded in base 16.

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

And yet, you will find numerous developers claiming that hex is super usable, because that's what they learned, and over the years they practiced tweaking hex colors so much that they are now highly familiar with them.

What about named colors?

red lime blue aqua fuchsia yellow green maroon navy olive purple teal white silver gray black orange
In theory, named colors could have had great usabiity. They are very readable after all! However, due to their messy history, they are anything but. CSS started with these 17 named colors. 16 of them came from HTML 3.2 that got them from the Windows VGA palette, then CSS 1 added `orange`.
aliceblue antiquewhite aquamarine azure beige bisque blanchedalmond blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue firebrick floralwhite forestgreen gainsboro ghostwhite gold goldenrod greenyellow honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightpink lightsalmon lightseagreen lightskyblue lightslategray lightsteelblue lightyellow limegreen linen magenta mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite oldlace olivedrab orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna skyblue slateblue slategray snow springgreen steelblue tan thistle tomato turquoise violet wheat whitesmoke yellowgreen
Then, in CSS Color 3 around 130 additional color names were adopted, that SVG had supported for many years prior. This list of colors [came from X11](https://en.wikipedia.org/wiki/X11_color_names), [an old windowing system](https://en.wikipedia.org/wiki/X_Window_System).
gray darkgray
Some X11 colors were not adopted, because they clashed with the existing color names, leading to inconsistencies like this
blanchedalmond chartreuse cornflowerblue goldenrod dodgerblue gainsboro lemonchiffon linen moccasin oldlace olivedrab orchid
These names were strange at best. Not only did they use odd names for base colors like "goldenrod" or "blanched almond"…
goldenrod darkgoldenrod lightgoldenrod lightgoldenrodyellow goldenrodyellow
…but the presence of modifiers is also inconsistent. Example: there is dark goldenrod, and light goldenrod yellow, but no light goldenrod and no goldenrod yellow!
darkolivegreen olivegreen lightolivegreen
lightseagreen seagreen darkseagreen
Even when the modifiers present are symmetric, they are not necessarily variations of the same color. Is `lightseagreen` here a lighter version of `seagreen`?
palevioletred mediumvioletred violetred
indianred navajowhite peru
Some of them are even mildly racist!
[HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) is a color model that attempts to be closer to how humans think about colors. It was designed by Alby Ray Smith in the 70s. Its three coordinates actually correspond to color attributes, not amounts of light. It starts with a hue, which is the primary, base color, then its remaining two coordinates are modifiers on that hue: - saturation (how gray it is) - lightness (how white or black it is)

HSL: A polar form of RGB

While RGB is a cube, HSL is a double cone (here only showing half of it). Why is HSL a cone and not a cylinder?

Is HSL the solution?

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));
		}
Unfortunately, HSL is a rather naive transformation of RGB into polar coordinates, that fails to account for the different characteristics between [how the eye perceives red, green, and blue](https://graphicdesign.stackexchange.com/questions/36997/why-is-pure-blue-darker-than-pure-green). Take a look at the math to convert RGB to saturation and lightness here. They treat red, green and blue exactly the same!

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);
Hue math is similarly naive. It just assumes that all RGB primaries are perceptually equidistant, and just places them around a circle, with a different primary every 60 degrees. This results to several problems…

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

Device Independent Color

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

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

Lab & LCH

Standardized RGB color spaces

Different RGB gamuts

MacBook Air 2013
sRGB
P3

Activity: Guess the color!

Designing with color

Color is communication

✚
✚
✚

Adobe Color: Crowdsourced color palettes

Color harmonies

Color harmonies

Palettes from photos

Palettes from photos

Adobe Capture

Accessibility concerns

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

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

with normal vision with protanopia

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…

Checker shadow illusion

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