-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
497 lines (418 loc) · 27.9 KB
/
index.html
File metadata and controls
497 lines (418 loc) · 27.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
<!doctype html>
<html>
<head>
<title>Everyday Color Theory</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://typography-interaction-2324.github.io/assets/reset.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<p class="header_smaller-subheading">Apr 10, 2020</p>
<p class="header_subheading">A poetic crash course on the history of color</p>
<!-- Header "Image" -->
<div class="header_imagery">
<div><p>S</p></div>
<div><p>M</p></div>
<div><p>T</p></div>
<div><p>W</p></div>
<div><p>T</p></div>
<div><p>F</p></div>
<div><p>S</p></div>
</div>
<h1>Everyday <br><span class="header_outline-text">Color Theory</span></h1>
<p class="header_disclaimer-paragraph"><em>A version of this essay was presented at <a href="https://design.google/library/span2019" target="_blank">SPAN2019</a> during the "Hue & Glue: Hands-On Color Theory" workshop. Read to the end to find instructions for an exercise that explores the relationship between color and light.</em></p>
</header>
<section class="section_main-body">
<!-- Intro section -->
<section>
<div class="title-container">
<div class="square"></div>
<h3>Introduction</h3>
</div>
<div class ="text">
<p>
The color you see is only the color you think you see. Your interpretation of light landing on a surface depends on your frame of reference and your frame of mind — both can be altered at the speed of light.
</p>
<p>
When I'm overwhelmed in a crowd I distract myself by looking for as many red-colored objects as I can. Red is not typically a calming color, especially if you're staring at miles of brake lights in traffic, but it's really easy for me to see. Red becomes the most dominant thing on my mind.
</p>
<!-- This is where the visual goes -->
<div class="imagery_ryg">
<div class="imagery_ryg-content">
<p class="imagery_ryg-content-red">R</p>
<p>#F45050</p>
</div>
<div class="imagery_ryg-content">
<p class="imagery_ryg-content-yellow">Y</p>
<p>#F6FA70</p>
</div>
<div class="imagery_ryg-content">
<p class="imagery_ryg-content-green">G</p>
<p>#36AE7C</p>
</div>
</div>
<blockquote>
"Someone who speaks of the character of a colour is always thinking of just one particular way it is used." — Ludwig Wittgenstein
</blockquote>
<p>
Humans have used red since the neolithic era, as seen in the prehistoric cave drawings; When developing languages, red is typically the color named first after black and white. It's now used so frequently in advertising—because it attracts the most attention—that people have learned to ignore it. The ad industry has successfully made a highly visible color…invisible.
</p>
<p>
In grade school, I learned that yellow was the most soothing to color with when I brought the expensive markers I wasn't allowed to use at home to school. I colored in a picture of <a href="https://ecoloringpage.com/holding-and-umbrella-paddington-bear-coloring-page/" target="_blank">Paddington wearing a raincoat</a> well enough for my teacher to hang it on the wall for parent-teacher day. The comfort I experienced from quietly meeting the black lines with a high-contrast yellow, disappeared as I waited for my mother to find me out.
</p>
</div>
</section>
<!-- Laurel Schwulst section -->
<section>
<div class="title-container">
<div class="square"></div>
<h3>Laurel Schwulst</h3>
</div>
<div class="text">
<blockquote>
"Yellow tries to show you the way"
</blockquote>
<p>
In her piece commemorating a decade of internet colors, designer <a href="https://rhizome.org/editorial/2020/jan/06/laurel-schwulsts-decade-in-internet/" target="_blank">Laurel Schwulst</a> reflects that “yellow tries to show you the way” in Google Maps. Artist <a href="https://www.ianwhittlesea.net/exhibitions_pages/ex_invisible/ex_invisible.html" target="_blank">Ian Whittlesea</a> describes yellow as the easiest to mentally conjure in his seven breathing exercises to become invisible—inspired by the literature of Rosicrucianism, theosophy, and esoteric yoga. According to Whittlesea, Indigo is the most difficult color to generate and green can be the most difficult to keep stable.
</p>
<!-- This is where the visual goes -->
<div class="imagery_laurel">
<div class="imagery_laurel-content">
<p><</p>
<p><</p>
<p><</p>
<p><</p>
</div>
<p>//which direction would you go?//</p>
</div>
</div>
</section>
<!-- Color Blindness Section -->
<section>
<div class="title-container">
<div class="square"></div>
<h3>Color Blindness</h3>
</div>
<div class="text">
<blockquote>
"Colors can be hard to see."
</blockquote>
<p>
Colors can be hard to see. To the chemist John Dalton, red, orange, yellow, and green all appeared the same. The rest of the color spectrum appeared as gradients of blue and purple. Dalton went on to write the first scientific paper on the subject of color blindness, <a href="https://books.google.com/books/about/Extraordinary_Facts_Relating_to_the_Visi.html?id=jYkyAQAAMAAJ" target="_blank">"Extraordinary facts relating to the vision of colours"</a> in 1798.
</p>
<p>
Ludwig Wittgenstein — the Austrian philosopher who popularized the <a href="https://en.wikipedia.org/wiki/Rabbit%E2%80%93duck_illusion" target="_blank">rabbit-duck illusion</a> as a means of describing two different ways of seeing — wrote in <em>Remarks on Colour</em>, that “not every deviation from the norm must be a blindness.” He pointed out that the “normal” sighted and the color-blind do not have the same concept of color-blindness.
</p>
<p>
People with decreased ability to differentiate between hues experience color through a series of judgments. My colleague, for example, explained that for red, green, and brown to function for him, he has to consider their context. These judgments may be “wrong” when they need to be “right”; Like the order of a traffic light, the alternating red and green battery light on a vape pen, or the order of a color legend matching the clockwise color placement in a pie chart.
</p>
<!-- This is where the visual goes -->
<div class="imagery_color-blindness">
<div class="imagery_color-blindness-content">
<div class="imagery_color-blindness-content-roygbiv">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<p>//normal vision//</p>
</div>
<div class="imagery_color-blindness-content">
<div class="imagery_color-blindness-content-color-blind">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<p>//color blind vision//</p>
</div>
</div>
</div>
</section>
<!-- Different Reds Section -->
<section>
<div class="title-container">
<div class="square"></div>
<h3>Different Reds</h3>
</div>
<div class="text">
<blockquote>
"If one says 'red' and there are fifty people listening, it can be expected that there will be fifty reds in their minds"
</blockquote>
<p>
“If one says 'red' and there are fifty people listening, it can be expected that there will be fifty reds in their minds,” wrote the artist and educator Josef Albers. We see fifty different reds because we each perceive and experience color differently.
</p>
<p>
The artist Wassily Kandinsky could practically hear and taste color because of his synesthesia. To him yellow was a trumpet's C note, black was the end of things, “blue is cold, red is a square, and green is a feeling,” as summarized by the painter Amy Sillman who called Kandinsky's philosophy a kind of color astrology in her essay <a href="https://servinglibrary.org/journal/11/drug-poison-remedy-talisman-cosmetic-intoxicant" target="_blank">“Drug, Poison, Remedy, Talisman, Cosmetic, Intoxicant.”</a>
</p>
<!-- This is where the visual goes -->
<div class="imagery_red-content">
<div class="imagery_red-content-colors">
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
</div>
<p>//which red are you thinking of?//</p>
</div>
</div>
</section>
<!-- Effect of Colors Section -->
<section>
<div class="title-container">
<div class="square"></div>
<h3>Effect of Colors</h3>
</div>
<div class="text">
<blockquote>
"An equilateral triangle was the most effective form."
</blockquote>
<p>
In 1810, writer Johann Wolfgang von Goethe decided that an equilateral triangle was the most effective form for his ideas on the psychological effect of colors. This new way of organizing color came about a hundred years after Sir Isaac Newton first arranged colors on a disk, to create an early form of the color wheel. The triangle served Goethe as a modular system of desirable and dissonant color relationships that evoked vibes like serious, mighty, serene, and melancholic.
</p>
</div>
</section>
<!-- Nature of Surface Section -->
<section>
<div class="title-container">
<div class="square"></div>
<h3>Nature of Surface</h3>
</div>
<div class="main-text">
<blockquote>
"Colors can change depending on the nature of surfaces."
</blockquote>
<p>
Colors can change depending on the nature of surfaces, like the atmospheric oxidation of the Statue of Liberty's plating from shiny copper to verdigris (a bluish-green patina). In 1906, the Army Corps of Engineers vetoed a proposal from the United States Congress to restore the statue, concluding that the patina protecting the underlying metal from corrosion “softened the outlines, and made it beautiful.”
</p>
<p>
We can see those softened outlines because light helps us discern forms. I find <a href="https://en.wikipedia.org/wiki/Vantablack" target="_blank">Vantablack</a>—one of the darkest known substances, absorbing 99.96% of visible light—unsettling. As <a href="https://www.kassiastclair.com/" target="_blank">Kassia St Clair</a> explains in <em>The Secret Lives of Color</em> “black is an expression of light, in this case, it's absence.” My eyes hunt for the surface, and Vantablack leaves nothing to see.
</p>
<p>
White surfaces reflect and scatter visible light, and according to Wittgenstein “very few people have seen pure white.” In the essay <a href="http://pdf-objects.com/files/In-Praise-of-Shadows-Junichiro-Tanizaki.pdf" target="_blank">“In Praise of Shadows”</a> on traditional Japanese aesthetics, <a href="https://en.wikipedia.org/wiki/Jun%27ichir%C5%8D_Tanizaki" target="_blank">Jun'ichirō Tanizaki</a> wrote that “western paper turns away light, while [Japanese] paper seems to take it in, to envelope it gently, like the soft surface of a first snowfall.” If you take a piece of computer paper, that you know is white in its normal surroundings, and place it next to snow, the paper may appear grey. A white can be light grey in poor lighting or a light grey in good lighting.
</p>
<p>
Or a <a href="https://en.wikipedia.org/wiki/The_dress" target="_blank">dress</a> can look black and blue under yellow light and white and gold in blue light.
</p>
<!-- This is where the visual goes -->
<div class="imagery_nature-of-surfaces">
<div class="imagery_nature-of-surfaces-content">
<div>
<p>?</p>
<p>?</p>
<p>?</p>
<p>?</p>
<p>?</p>
<p>?</p>
<p>?</p>
</div>
<p>//surface color transition//</p>
</div>
</div>
</div>
</section>
<!-- maybe this is where the blue light/yellow light Java iteraction section -->
<section>
<blockquote>
"A dress can look black and blue under yellow light and white and gold in blue light."
</blockquote>
</section>
<!-- Purkinje Shift Section -->
<section>
<div class="title-container">
<div class="square"></div>
<h3>Purkinje Shift</h3>
</div>
<div class="main-text">
<blockquote>
"In color therapy, shifts in color can change minds."
</blockquote>
<p>
In full sunlight, the petals of a red flower appear bright red against duller green leaves. At dusk, the red flowers become darker while blue flowers appear brighter than they did in full daylight. This effect is called the <a href="https://en.wikipedia.org/wiki/Purkinje_effect" target="_blank"><em>Purkinje shift</em></a>.
</p>
<p>
Albers based his career on studying these kinds of shifts in color. In his book <em>Interaction of Color</em>, first published in 1963, he created color theory exercises that could make “colors lie”—as Tamara Shopsin put it in her essay <a href="https://www.servinglibrary.org/journal/11/homage-to-an-homage-of-an-homage" target="_blank">"Homage to an Homage of an Homage."</a> By itself, a color appears dominant, but when placed next to an even stronger hue, we can see its more diminished true nature.
</p>
<p>
Sixty years before <em>Interaction of Color</em>, the artist and historian Emily Noyes Vanderpoel published color studies in her forgotten book, <a href="https://www.kickstarter.com/projects/sacredbones/color-problems-a-book-by-emily-noyes-vanderpoel" target="_blank"><em>Color Problems: A Practical Manual for the Lay Student of Color</em></a>. Her work predicted trends that wouldn't occur for several decades, like the concentric square format of Albers's <em>Homage to the Square</em>.
</p>
<p>
In color therapy, also known as chromotherapy, shifts in color can change minds. Each color is believed to have healing energies that can affect the body, like red for passion, green for harmony, and violet for intuition. One method for administering chromotherapy includes eating foods of a specific color. The artist Sophie Calle does this in her series <a href="https://www.perrotin.com/artists/Sophie_Calle/1/le-regime-chromatique/14386" target="_blank"><em>The Chromatic Diet</em></a>. Inspired by Paul Auster's <em>Leviathan</em>, in which a character inspired by Sophie Calle herself restricts her diet to foods of a single color on certain days, Calle recreates and photographs each meal in the book as an act to bring herself and the fictional character closer together.
</p>
<p>
An inventor in Arkansas advertised <a href="https://twitter.com/us_fda/status/875453779625127936?lang=en" target="_blank">Vision-Dieter</a>, his special two-color tinted glasses that deter shoppers from buying brightly-colored food packages. He boasted that “you won't believe your eyes” and that the combination of a blue and brown tint was a “secret European color technology.” But the product didn't work and the FDA destroyed most of the glasses.
</p>
<!-- This is where the visual goes -->
</div>
</section>
<!--Ultramarine Section -->
<section>
<div class="title-container">
<div class="square"></div>
<h3>Ultramarine</h3>
</div>
<div class="main-text">
<blockquote>
"Ultramarine was the most expensive blue used by Renaissance painters."
</blockquote>
<p>
Before the computer, the physical production of pigments limited our access to color. Naturally occurring, finely ground minerals mixed with toxic solvents — or <a href="https://en.wikipedia.org/wiki/Indian_yellow" target="_blank">the urine of cows fed mango leaves</a> — were expensive. Ultramarine was the most expensive blue used by Renaissance painters and remained available only to the rich, or those backed by wealthy benefactors, until the invention of a synthetic version in 1826.
</p>
<p>
In “On Color,” <a href="https://www.amysillman.com/uploads_amy/pdfs/194b4c83.pdf" target="_blank">Sillman</a> notes that most oil painters can tell the difference between colors from their weight alone, but that also means we're “somewhat doomed to the palette provided by manufacturers.” Even our ready-made digital palettes are predetermined for us by the choices of both software and hardware manufacturers. (Or whoever we borrow from when using the eyedropper tool.)
</p>
<p>
Our perceptions of people or objects in photographs change dramatically from black and white to color. If I see myself in a black and white photo, I am far less critical about my polychromatic flaws because they're filtered out. And if I see a colorized photograph of a historical figure or event, I'm surprised by how <em>real</em> they seem.
</p>
<p>
With the invention of movable type, the colorful heraldic language for coats of arms, was transferred into a <a href="https://en.wikipedia.org/wiki/Hatching_(heraldry)#Conventional_system" target="_blank">one-color hatching system</a> for books, wax seals, and coins. The graphic design duo <a href="http://www.dextersinister.org/index.html?id=35" target="_blank">Dexter Sinister</a> tested the transference of color data to one-color hatching by converting a László Moholy-Nagy panel that he originally “painted” over the phone with a manufacturer.
</p>
<p>
In the <a href="https://www.xrite.com/hue-test" target="_blank">Farnsworth-Munsell test</a>, in which a subject has to arrange 100 hues on a continuous gradation scale, less than sixteen percent achieve a perfect score. According to Johannes Itten, one of Albers's instructors at the Weimar Bauhaus, distinguishing the many shades of a color depends on the sensitivity of the eye and “the response threshold of the observer.” In English, we only use about thirty names for colors in daily vocabulary, and only a “trained artist can discriminate and name a great many hues,” wrote Umberto Eco in <a href="https://www.servinglibrary.org/journal/11/the-colors-we-see" target="_blank">"The Colors We See."</a>
</p>
<p>
Albers believed that developing a sensitive eye for color took practice, but it doesn't come without a bit of work: Illustrator <a href="https://tamarashopsin.com/" target="_blank">Tamara Shopsin</a> writes that Albers's exercises “were hard and time-consuming”; Sillman compared his <em>Interaction of Color</em> to notes from a test kitchen: “To do his exercises, you first have to gather color swatches like ingredients, splice and dice them, layer them and shift them around to test them out on your eyeballs.”
</p>
<p>
“When one becomes infatuated with the seven [spectral] colors, the mind is easily distracted,” wrote <a href="https://en.wikipedia.org/wiki/Masanobu_Fukuoka" target="_blank">Masanoba Fukuoka</a>, in his manifesto <em>One-Straw Revolution</em>. One of the most important organic farmers of the twentieth century, Fukuoka believed that viewing the colors of the world with “no-mind” — a state that recognizes the insufficiency of intellectual knowledge — helps one see the color of the colorless as color.
</p>
<!-- This is where the visual goes -->
<div class="imagery_ultramarine">
<div class="imagery_ultramarine-content">
<p>{</p>
<p>&</p>
<p>%</p>
<p>#</p>
<p>}</p>
</div>
<p>Ultramarine Hex #0437F2</p>
</div>
</div>
</section>
<!-- Gray Section -->
<section>
<div class="title-container">
<div class=square></div>
<h3>Gray</h3>
</div>
<div class="main-text">
<blockquote>
"Colors are the children of light, and light is their mother."
</blockquote>
<p>
A flat gray surface can come to life through its small modulations of shading, which requires a visual sensitivity to tonal differences. The act of arranging the subtle differences is like arranging lengths of sticks or consecutive numbers, according to Wittgenstein, who once asked, “To what extent can we compare black and white to yellow, red, and blue?”
</p>
<p>
To use his own words in response, “Colors are the children of light, and light is their mother.” Notably, Vanderpoel also called color “the music of light.” Black and white, yellow, red, and blue preserve their relationship with light through <a href="https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors" target="_blank">the scales of tones between their lightest and darkest</a>. The continuous scale does not change in saturation, but changes in brilliance. As all colors we can and cannot see differ depending on their surface, surrounding, and our state of mind—they will always in some way share their brilliance.
</p>
<!-- This is where the visual goes -->
<div class= "imagery_gray-content">
<div>
<p>0</p>
<p>100%</p>
</div>
<div>
<p>0</p>
<p>90%</p>
</div>
<div>
<p>0</p>
<p>80%</p>
</div>
<div>
<p>0</p>
<p>70%</p>
</div>
<div>
<p>0</p>
<p>60%</p>
</div>
<div>
<p>0</p>
<p>50%</p>
</div>
<div>
<p>0</p>
<p>40%</p>
</div>
<div>
<p>0</p>
<p>30%</p>
</div>
<div>
<p>0</p>
<p>20%</p>
</div>
<div>
<p>0</p>
<p>10%</p>
</div>
</div>
</div>
</section>
</section>
<footer>
<p>designed by <span>Vicky Chen</span> and <span>Lucy Kim</span></p>
</footer>
</body>
</html>