Barcelona chair by Mies Van Der Rohe Poster
Color
CS 73, lecture 3, 2022
Color topics
Color Blindness Simulator�https://www.color-blindness.com
Color Wheel
Complementary colors
Colors that fall on the opposite sides of the wheel
Analogous colors
Three colors that fall next to each other on the color wheel
Warm and cool colors
warm
cool
Color space
HSV color space:
Hue� Saturation
Value
Color variation
Hue refers to the color name (red, green, etc) and is measured in degrees from 0 to 360.
Saturation (or chroma) describes the amount of gray in a particular color, from 0 to 100 percent.��Value refers to the relative lightness or darkness of a color.
Color topics
Colors interact: 1+1 = 3
Josef Albers: interaction of color
Josef Albers: interaction of color
Josef Albers: interaction of color
Color palettes in art
Warm and cool palettes
Red Canna�1925-1928�Georgia O'Keeffe
Blue Morning
Glory�1935�Georgia O’Keeffe
Analogous colors
Irises
1890
Vincent van Gogh
Compartment C Car
Edward Hopper
1938
Complementary palettes
Black Mesa Landscape, New Mexico
Georgia O’Keeffe
1930
Anything
Georgia O’Keeffe
1916
Noon - Rest from Work (after Millet)
Vincent Van Gogh
1890
Dance, Matisse Music, Matisse
Monochromatic palettes
The Tragedy
Pablo Picasso
1903
Armin Hofmann
posters
Graffiti
Djerba, Tunisia, 2014
NeSpoon
Graffiti
Croatia, 2019
NeSpoon
Joel by Chuck Close, 1993
Alex
1991
Joel by Chuck Close, 1993
Alex
1991
Atmospheric perspective
Landscape in the Style of Yan Wengui�Dai Jin, Early Ming Dynasty (1368-1644)
The Virgin of the Rocks
1508
Leonardo da Vinci
The further away an object gets, the less contrast between its value and the value of the background. This means that more distant objects will be closer in value to the background.
Richard Shucksmith
Color and emotion in art
Self-portrait Van Gogh 1889
Van Gogh didn’t use “real” colors. Instead, he used colors to affect the viewer’s emotions.
His choice of colors depended on his mood.
Self-Portrait with a Straw Hat, 1887
Self-Portrait, 1889
The Night Café �(Le Café de nuit)
Vincent Van Gogh
1888
“I have tried to express the terrible passions of humanity by means of red and green. [...] Everywhere there is a clash and contrast of the most alien reds and greens”
Color palette sketch
Color field painting
What if color is all you want to use?
No. 46 (Black, Ochre and Red over Red)
Mark Rothko
1957
A glimpse of the infinite
Helen Frankenthaler
1976
‘Like a Rothko dancing wildly to jazz’
Off White Square, Helen Frankenthaler, 1973
Red, Cut By Black
Robert Motherwell
1966-67
Accent color
Barbara Kruger
Photographic silkscreen on vinyl, 1989
Photographic silkscreen on vinyl, 1987
Schindler's List
Movie, 1993
Amy Sherald
Saint Woman
2015
When I let go of what I am, I become what I might be
2018
Working with procedural color
Tip: don’t use random colors
Procedural Color: Creating Color Variation, Sighack
RGB: mix in a base color with each randomly-
generated color
Procedural Color: Creating Color Variation, Sighack
HSB: �. vary saturation and brightness: different shades of the same hue
. vary hue: get analogous colors
hue values: 10–100
saturation: 50–150
brightness: 150–255
hue values: 0–30
saturation: 50–150
brightness: 150–255
hue values: 110–130
saturation: 50–150
brightness: 120–250
P5.js sketch by Richard Bourne
Phase shifting (from Inigo Quilez’s article)
Use trig functions to generate color schemes that are coherent and aesthetically pleasing
Tweak parameters to create complementary colors or monochromatic colors
Color Sampling
You can use an external image (e.g. photograph or digital painting) to select the color palette for your composition.
Inheritance
If your composition uses recursion or any kind of parent/child relationship, consider using a form of “inheritance” when assigning colors.
Isabelle & Chris: color spaces
Red, green, and blue! – The RGB Color Model
RGB values
RGB(237, 69, 91)
RGB(187, 228, 242)
RGB(87, 87, 87)
RGB(235, 205, 14)
Hex codes
RGB(237, 69, 91)
= #ed455b
RGB(187, 228, 242)
= #bbe4f2
RGB(87, 87, 87)
= ???
RGB(235, 205, 14)
= ???
Hex code are perfect for color palette arrays
HSB (Hue, Saturation, Brightness)
HSB Live Coding!!
Live code w/ multiples example
Blending in p5.js
https://colorbrewer2.org
Color palette resources
color.adobe.com
Homework due next week (also on Canvas)
Homework 1: Color & depth (1 sketch)
Create a composition where you:
Use color to create a sense of depth (foreground and background). � Think about what color palette can help you achieve depth–no random colors.
You have drawn on every pixel, without using the background() command
There is a clear focal point to your composition that is created by color.
Homework 2: Music Visual Portrait (1 sketch)
For one piece of music from the list below, create a visual "portrait" using a color scheme that captures the mood of the piece. Color should be a primary element of your portrait.
Carmina Burana - O Fortuna:
Clair de Lune - Debussy:
Spring 1 - Recomposed: Vivaldi's Four Seasons:
When the Saints Go Marchin’In:
Night Owl:
Once Again:
Peer Reviews:
Due Monday, Sept 19 by 5pm
Due by class time, Sept 20