Efficient Color
for Efficient Web Applications

Victor Ostromoukhov

Université de Montréal

Color is one of the most
effective visual attributes
for coding information in
displays and is capable,
when used correctly,
of achieving powerful
and memorable effects

A little color can be more effective than a lot

Slide 4

Slide 5

Slide 6

Outline

Introduction: What Is Color?

Milestones in Understanding Color

Artistic Approach

Scientific Approach

Perceptual Phenomena Studied in Psychology & Neuroscience

… And by Artists

Conclusions

What is Color?

What and Where Subsystems

Outline

Introduction: What Is Color?

Milestones in Understanding Color

Artistic Approach

Perceptual Phenomena Studied in Psychology & Neuroscience

… And by Artists

Conclusions

Two Great Western Traditions

Rational Tradition

Mystic (Artistic, Emotional) Tradition

Plato c. 380 BC

Inverse physical model: visual rays are emitted from the eye

Two basic colors:

white extends visual rays

black is its opposite

Other colors are derivative:

"by virtue of the ray of blended fire gleaming through the moisture, a color similar to that of blood is created"

Newton 1672

Belongs to Both Great Traditions

Rational Tradition:

Discovery of Truly Primary Colors

Theory if Light Color Mixture

Pythagorean Tradition:

Color is a Manifestation of the Harmony of the Celestial Spheres

Studied Relations between Colors and Music

Lambert 1760

Color pyramid

Base color triangle

Tertiary colors

Basis for mathematical approach to colorimetry

Intended for printers, dyers and craftsmen

Runge 1803

Theorist and Romantic Painter

Goethe 1810

Circular diagram:

primary colors (red, blue and yellow) alternate with secondary colors (orange, violet and green)

Exerted huge influence on generations of artists, scientists and philosophers

Goethe 1810

Related aesthetic and emotional values of colors:

"powerful", "gentle" and "radiant"

Chevreul 1839

Great Influence on XIX century painters: Delacroix, Impressionists, Post-Impressionists, Pointillists

Maxwell 1867

Origins of modern quantitative color measurement (Colorimetry)

Experiences with Color Mixtures

Psychological explanation of visual phenomena

von Helmholtz 1859: Trichromatic color theory

Hering 1874

Father of the opponent process color theory

Focus on psychological interpretation of colors

Munsell 1905

System of visually uniform distribution of color patches

Ancestor of CIE-LAB and CIE-LUV color spaces

Retinal Neural
Interconnection

1900s

Neural Codes

Milestones

Discovery of complex receptive fields in the visual cortex

Neural mechanisms of visual information processing

Nowdays

Color Appearance Models: Predict the appearance
of a color depending on

Objective stimulus

Surrounding, context

Exploration Of Higher-Level Perception and Cognition, Based on Modern Non-Invasive Scanning Techniques (MRI)

Antiquity

Middle Age

Fine Control of the Process

Notions of Optical Color Mixture

Mastery of Color Contrast

Leonardo 1510

Distinction between primary and secondary colors

Effects of aerial attenuation of colors

Simultaneous contrast

Renaissance
Masters

Breakthrough in Realism circa 1430 (according to Hockney)

Rubens beg. of XVII century

Mastery of Flesh Colors

Glazes, Transparent and Opaque Colors

Vermeer mid-XVII century

XIX century Romantic Painters: Eugène Delacroix

Explicit Usage of Opponent Colors

Simultaneous Contrast

Impressionism

Retinal Image: Painted What They Saw

Post-Impressionism

Expressive Power of Complementary Colors

Pointillism

Use of pure colors

Reduced palette

Additive rather than subtractive mixture

Expressionism

De Stijl and Bauhaus

Post-Modernism

Photo-Mosaics,
Artistic Halftoning

“Layered” pointillism

Colorimetry: CIE Color Matching

CIE-XYZ Color Space

The Colors in the Chromaticity Diagram

Perceptually Uniform Space: MacAdam

CIE-LAB

Gamut Mapping

Gamut Mapping

Gamut mapping is a morphing of 3D color space according to adopted scheme

Color Pickers: HLS

Device-Dependent
Color

Device-Independent
Color

Perceptual Phenomena Studied in Psychology & Neuroscience

Contrast Enhancement (Mach Effect)

Simultaneous Color Contrast

Chromatic Adaptation

Complementary (Opponent) Colors

Light Mixture

Color Blindness

The Mach effect

The Cornsweet effect

Summing and Subtracting Cone Signals

Color opponents wiring

Sums for brightness

Differences for color opponents

Pointillism

Haloing, local contrast

Negative space

Simultaneous Color Contrast

Chromatic Adaptation

Crispening

Increased sensitivity

Slide 72

Anchoring vs. Scaling

Slide 74

After-Image-white

After-Image

After-Image-white

Opponent Colors

Light Mixture

Mixing two lights in varying proportions produces colors that lie along the straight line between them in color space

Mixing three lights in varying proportions produces colors that lie within the triangle they define in color space

Physical color mixture

Additive Subtractive

red, green, blue cyan, magenta, yellow

Spreading

Optical mix when spatial frequency increases

But before fusion frequency

Additive mix! (opposed to pigment mix)

Color Printing

Divisionism

Color blindness

8% male (up to 12-20%, according to some estimations),

0.6% female

Genetic

Dichromate (2% male)

One type of cone missing

L (protanope)

M (deuteranope)

S (tritanope)

Anomalous trichromat

Shifted sensitivity

What is Color?

Color blindness

8% male (up to 12-20%, according to some estimations),

0.6% female

Genetic

Dichromate

One type of cone missing

L (protanope)

M (deuteranope)

S (tritanope)

Anomalous trichromat

Shifted sensitivity

Color blindness test (Ishihara)

Color blind impressions

Web-Safe Palette

Safe Web Colors for color-deficient vision

Differential Filtering

Color Shadows

Chromatic Adaptation

Color Shadows

Perception of Space

Perception of Depth

Perception of Motion

Chromatic and Achromatic Visual Acuity

Chromatic and Achromatic Visual Acuity

JPG, MPG

Color
opponents
instead of
RGB

Compress
color more
than
luminance

Conclusions

Color vision is a complex process

RGB color space is device-dependent

Use CIE-LAB as device-independent perceptually uniform color space

Take into account

Simultaneous contrast

Chromatic adaptation and after-image

Color spreading and crispening effect

Chromatic and achromatic visual acuity

Use Web-safe palette for normal vision and protan/deutan palette for anomalous vision

Selected Bibliography

Colorimetry, Color Science

Selected Bibliography

Psychology, Neuroscience

Selected Bibliography

Color and Art

Selected Bibliography

Color Blindness

Thank You!


	Introduction: What Is Color?
	Milestones in Understanding Color
	Artistic Approach
	Scientific Approach
	Perceptual Phenomena Studied in Psychology & Neuroscience
	… And by Artists
	Conclusions


	Inverse physical model: visual rays are emitted from the eye
	Two basic colors:
		white extends visual rays
		black is its opposite
	Other colors are derivative:
		"by virtue of the ray of blended fire gleaming through the moisture, a color similar to that of blood is created"


	Belongs to Both Great Traditions
	Rational Tradition:
		Discovery of Truly Primary Colors
		Theory if Light Color Mixture
	Pythagorean Tradition:
		Color is a Manifestation of the Harmony of the Celestial Spheres
		Studied Relations between Colors and Music


	Color pyramid
		Base color triangle
		Tertiary colors
	Basis for mathematical approach to colorimetry
	Intended for printers, dyers and craftsmen


	Circular diagram:
		primary colors (red, blue and yellow) alternate with secondary colors (orange, violet and green)
	Exerted huge influence on generations of artists, scientists and philosophers


	Related aesthetic and emotional values of colors:
		"powerful", "gentle" and "radiant"


	Great Influence on XIX century painters: Delacroix, Impressionists, Post-Impressionists, Pointillists


	Origins of modern quantitative color measurement (Colorimetry)
	Experiences with Color Mixtures
	Psychological explanation of visual phenomena


	Father of the opponent process color theory
	Focus on psychological interpretation of colors


	System of visually uniform distribution of color patches
	Ancestor of CIE-LAB and CIE-LUV color spaces


	Discovery of complex receptive fields in the visual cortex
	Neural mechanisms of visual information processing


	Color Appearance Models: Predict the appearance of a color depending on
		Objective stimulus
		Surrounding, context

	Exploration Of Higher-Level Perception and Cognition, Based on Modern Non-Invasive Scanning Techniques (MRI)


	Fine Control of the Process
	Notions of Optical Color Mixture
	Mastery of Color Contrast


	Distinction between primary and secondary colors
	Effects of aerial attenuation of colors
	Simultaneous contrast


	Mastery of Flesh Colors
	Glazes, Transparent and Opaque Colors


	Use of pure colors
	Reduced palette
	Additive rather than subtractive mixture


	Gamut mapping is a morphing of 3D color space according to adopted scheme


	Contrast Enhancement (Mach Effect)
	Simultaneous Color Contrast
	Chromatic Adaptation
	Complementary (Opponent) Colors
	Light Mixture
	Color Blindness


	Mixing two lights in varying proportions produces colors that lie along the straight line between them in color space

	Mixing three lights in varying proportions produces colors that lie within the triangle they define in color space


	Optical mix when spatial frequency increases
	But before fusion frequency
	Additive mix! (opposed to pigment mix)


8% male (up to 12-20%, according to some estimations),
0.6% female
Genetic
Dichromate (2% male)
	One type of cone missing
		L (protanope)
		M (deuteranope)
		S (tritanope)
Anomalous trichromat
	Shifted sensitivity


	JPG, MPG
	Color opponents instead of RGB
	Compress color more than luminance


	Color vision is a complex process
	RGB color space is device-dependent
	Use CIE-LAB as device-independent perceptually uniform color space
	Take into account
		Simultaneous contrast
		Chromatic adaptation and after-image
		Color spreading and crispening effect
		Chromatic and achromatic visual acuity
	Use Web-safe palette for normal vision and protan/deutan palette for anomalous vision