ALL ABOUT COLO R

CGS3066

Is color

Inherent in objects– do objects HAVE color?

or

Something created by the mind of the beholder when he/she perceives light?

Here’s where light fits in

Basics of Color and Color Vision Paul Avery 2

Vision and the “Electromagnetic Spectrum”

Lesson: We directly perceive a tiny fraction of the world

And yet the human eye can distinguish as many as

a. 100, 000

b. 1,000,000

c. 10,000,000

???? colors

How We See

Three distinct eye layersSclera: Outer layer, includes corneaChoroid: Middle layer, has blood supply, irisRetina: Image surface, contains photoreceptors

Picture of Retina

Rods and Cones Cover Retina

Retina schematic

Rods

Cones

Rods versus Cones

• Many more Rods- all same kind -- 120 million (night vision)

– 7 million cones (day vision)

• 3 kinds of cones, each sensitive at different range of wavelength– Humans have “Trichromatic” vision– why colors requires 3 numbers to specify

Sensitivity of Cones re Wavelength

“Short” “Medium” “Long”

Few of these Many of these

We have 3 kinds of cones but many Animals have only two- ie are dichromats

Here is how the world looks to them

What would a tetrachromat see?

Rods and cones in humans summed up

If we had only _______, we’d see only in black and white.

It’s the ________ that give us color vision.

What you need to remember about human color perception

Where vision fits into the spectrum

Roughly how many colors humans can perceive

How the retina works: cones and rods

Difference between human and animal vision (Trichromatic vs dichromatic)

2 Basic Approaches to Color

Subtractive systems RYB and CMYK (pigment)

all colors make black

Additive system RGB (light)

all colors make white

Subtractive Color: for pigment

Paint: RYB red yellow blue Primary colors: red yellow blue Secondary colors: 2 primaries Tertiary colors: 1 secondary 1 primary

Printing: CMYK cyan magenta yellow black

But

Red, yellow, and blue aren’t technically primary colors at all, because

- they can’t reproduce as many ___________

and

- they can’t get as close to true _______

as cyan magenta and yellow can.

Additive Color: For Light

RED GREEN BLUE

light-generated color

  for graphics/backgrounds

intended for screen display

 

Red + blue = magenta blue + green=cyan

green + red = yellow

mix everything you get white

RGB in HTML

 

3 numbers 1-255 designates

the amount of

RED, GREEN, or BLUE

Black- 100% of all three

White- 0% of all three

Hexadecimal Color

 

Here is an example:

255 RED 255 GREEN 0 BLUE

translated into hexadecimal

FFFF00

Huh?

Hex means to the base 16 instead of 10

The 16 positions :0123456789ABCDEF

Each RGB component is a 2 position hex #

The smallest would be 00, the biggest FF

Furthermore…

The absence of color is black – (000000) so the closer to 00 a designation for RGB is,

the darker it is and the closer to FF the brighter it is

The saturation of all colors is white-- All Fs ( FFFFFF)

RGB CMYK

To reproduce a RGB image in ink on paper, it must be converted to "CMYK"

CMYK and RGB not perfectly compatible - deep blues and rich reds on screens won’t print

using "SWOP CMYK" inks (SWOP: standard web offset press))

- pure cyan in CMYK can’t be duplicated on a computer screen

So….CMYK is anticipating print

(cyan magenta yellow black)

for computer graphics intended for paper

subtracts

Cyan S red yellow S blue magenta S green.

mix everything you get black

Web-Safe Color

- any color can be specified in hex but different browsers don’t define them identically

- colors using only 00,33,66,99,CC,FF are common across browsers

- SO, there are only 216 web-safe colors (6 cubed) versus 16,777,216 theoretical possibilities (256 cubed)

A color poster for the web

Here are web colors derived from a color wheel:

http://www.visibone.com/colorlab

Don’t use too many

Good to choose colors from the middle- outside ones are too bright

Some Approaches to Coordinating Colors

Monochromatic

 

One color plus hues, tints, shades

To increase intensity, add white

 

http://www.carbonplaces.com/

 

Some Approaches to Coordinating Colors

Complementary:- Across from each other on the color wheel

- These can clash

- Used side by side can cause problems for the eye because are very different wavelengths

Some Approaches to Coordinating Colors

Triadic

Colors chosen by drawing an

equilateral triangle inside a color

wheel 

Sources of Eye Strain

Too little contrast between text and background–

contrast should be 80%

Complementary colors side by side

cause shadows and vibrations

The Effects of Color

 

Certain colors trigger a physical reaction

red raises blood pressure blue lowers it

Some More Effects

 Colors evoke styles:

Can date: eg Avocado- 60s and 70s Can pigeonhole: blue and green-

preppy

Implications of Color Choice

Cultural: Flag colors, for example

Different symbolic messages in west white = purity in east can = death

Test yourself on western color symbolism

http://desktoppub.about.com/library/

quizzes/blcolormatching.htm

2 General Color-Group Effects

Cool Colors calm (Blue, Green & White)

Warm Colors excite (Red, Yellow, Orange & Black)

Color Blindness

about 8 of every 100 men 1 of every 200 women doesn’t mean can’t see color just can’t tell red from green

Are you color blind?

http://colorvisiontesting.com

how color blind people see

http://www.vischeck.com/examples/

This site will let you check your site for colorblindness problems

What Colors are Safe for All?

http://more.btexact.com/people/rigdence/colours/

Does Color Matter?

• Research reveals all human beings make a subconscious judgment about an item within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone.

Does color matter?

• Close to 40% of American consumers report they would change car makes if they couldn’t get the color of their choice

• Source: Institute for Color Research

Some design advice

• Limit your color palette to no more than three colors to reduce visual clutter.

• Use colors appropriate to the theme of your web site.

• Use colors found in key photos or graphics on your web page for added harmony.

• Avoid harsh colors. Desaturate colors to approximate colors found in nature and textiles.

A Terrific Site for Color Info

• http://www.colormatters.com/entercolormatters.html

One more Source for Color Choice

http://www.2createawebsite.com/build/hex-colors.html

Vision is not simple: Some Illusions

Is the Green Dot in Front or Back of Cube?

Which Avocado Has the Pit?

Is the Green Dot in Front or Back of Cube?

Hidden Bird Illusion

http://zeus.rutgers.edu/~feher/bird/example1.html