color theory 6.1

8/6/2019 Color Theory 6.1

1/80

CIT 350

Dr. Nilesh Patel


2/80

Chapter 9: Color Copyright 2004 by Prentice Hall

In this class you will learn about:Physical and perceptual aspects of color

Several color models and the advantages ofeach

Four color-harmony schemesSome examples of color in nature, relatingthem to our vocabulary of color

Tool programs available to you for studyingcolor

How color can make Web pages pleasingand easy to read


3/80


The spectrum of visible light

The electromagnetic spectrum

Human response to color


4/80


340 630


5/80



6/80




An artists color wheel: red,yellow, and blue (RYB)

Additive color: red, green, blue

(RGB)

Subtractive color: cyan, magenta,

yellow, and black (CMYK)Hue, saturation, and brightness

(HSB)



Non-spectralColors

SpectralColors



Red + Green =

Red + Blue =

Green + Blue =

Not the case for print

Subtractcolors.



Cyan subtracts red Magenta subtracts green

Yellow subtracts blue

In photography, thats it: all threetogether subtract all light, giving black

In print, the dyes arent that good, and

we need black ink too Hence, four-color printing: CMYK

K from blacK; B already means Blue



Hue: where a color lies around acolor wheel: red, green, yellow, blue-green, etc.

Saturation: the purity of a color; afully-saturated color has no whitemixed with it, in paint terms

Brightness: light, dark, or inbetween?



White, black, and all grays are zeropercent saturated

A color becomes more saturated as itmoves away from gray to a pure color

A pure (fully-saturated) color, in RGBterms, in one that contains:

Only red, green, or blue, or

Only yellow (= red + green), or Only magenta (= red + blue)

Only cyan (= blue + green)



Monochromatic: colors of same orsimilar hue, differing in brightnessand/or saturation

Complementary: colors approximatelyopposite each other on a color wheel

Analogous: colors adjacent to eachother, from any segment of a color

wheel

Triadic: three colors approximatelyequally spaced around a color wheel


21/80


All blue All orange


22/80



23/80



24/80



25/80



26/80



27/80



28/80


Ten pictures of flowers, taken at theHeather Garden, in northern Manhattan,New York City, June and July, 2003

One picture taken at sunrise in Arizona,of frost on glass


29/80


30/80

Copyright 2004 by Prentice HallChapter 9: Color


31/80



32/80



33/80



34/80


35/80



36/80



37/80



38/80



39/80



40/80


Permits simple experimentation with theconcepts, e.g.: What is pink? (Desaturated red)

Can a dark color be saturated? (Yes)

Does adding red and green really give yellow?(Yes)

Is gray ever saturated? (No)

What does saturation mean at low brightness

levels? (Not much) In RGB, how do you add white to red?

(Increase the amounts of green and blue)

http://www.prenhall.com/mccracken/


41/80


The axis of the color cone (Slide 20) runsfrom black at the bottom, through thegrays, to white at the top

All points on the axis are unsaturated

Near the bottom of the color cone there isvery little space between the axis and thepure colors

And the pure colors at the bottom of the

cone are dark Hence: saturation is not a helpful term for

low-brightness colors


42/80


Two versions: match using RGB or HSBmodel

Start with any of the hundreds of namedcolors available

That color appears in a top rectangle;bottom rectangle is black

Move sliders to match colors Hints given; warmer means your last

change got you closer When you get a match, the number of

adjustments taken is reported


43/80

Chapter 9: Color Copyright 2004 by Prentice HallCopyright 2004 by Prentice HallChapter 9: Color


44/80


45/80


46/80

Chapter 9: Color Copyright 2004 by Prentice HallCopyright 2004 by Prentice HallChapter 9: Color

1 2 3 4 5 6 7 8 9 10 11 12


47/80

1 2 3 4 5 6 7 8 9 10 11 12

1

2

3

4

5

67

8

9

10

11

12

13Chapter 9: Color Copyright 2004 by Prentice Hall

Color Wheel


48/80


Monochromatic: colors from onecolumn

Complementary: any two colors whosecolumn numbers differ by 6

Analogous: several colors from adjacentcolumns, with 12 considered next to 1

Triadic: colors from columns:

1, 5, and 9, or 2, 6, and 10, or

3, 7, and 11, or

4, 8, and 12


49/80


3 7 11


50/80



51/80



52/80



53/80


But dont do this casuallythe clash can be almostpainful; you need to have a reason to do it


54/80



55/80



56/80


Big Important Words

Nice words, but not headline-type words.Text. The story, now that I have your

attention.


57/80


Rule #1: Provide adequate contrast

Rule #2: But not too much, and forextended use, black on white is too muchcontrast

Rule #3: Dark on light is better than lighton dark, for text

Rule #4: There are no other rules

Complements work

So does a dark color on a background of thesame hue but much lighter

Light on dark is occasionally OK for headings


58/80


59/80


60/80


It is rare that the color choices for Web pages are leftentirely in the hands of a developer or designer. In mostcases, the client will already have some colors in mind,based on a corporate logo, a school insignia or personalpreference. Color harmonies provide options forchoosing colors that are compatible with the clients

wishes. Applying guidelines for text and background

color will foster readability. Finally, using color toorganize text and focus attention will result in easiernavigation.


61/80


There is quite a bit of overlap in the response curves.The peak sensitivities for the first and second typesare actually in the yellow range. There is a big disparity

in the height of the three curves. This is due to the factthat human eyes are most sensitive in the green rangeof the spectrum and are dramatically less sensitive inthe blue range.

Black on white may not look too bad here. Butsuppose you sat at a monitor six hours a day. Wouldntyou prefer a pastel background? And text that is darkbut not black?


62/80


Offer expires 07/31/03. Offer available to new High SpeedInternet subscribers only. May not be used in conjunctionwith any other offer. Service is not available in all areas.

Certain taxes and fees may apply. DSL: Offer requires a 12month subscription. First six months will be billed at $29.95per month, 49.95 thereafter. Early termination fees apply.Includes Standard DSL Installation Kit. Does not includeshipping and handling charges. Additional equipment may be

required.


63/80


Below is the same text as on the previous slide, except pureblue instead of pure yellow. According to Adobe they bothhave 100% brightness, and according to Microsoft they bothhave luminance of 128. But that it not how we perceive them.

Offer expires 07/31/03. Offer available to new High SpeedInternet subscribers only. May not be used in conjunctionwith any other offer. Service is not available in all areas.Certain taxes and fees may apply. DSL: Offer requires a 12month subscription. First six months will be billed at $29.95per month, 49.95 thereafter. Early termination fees apply.Includes Standard DSL Installation Kit. Does not includeshipping and handling charges. Additional equipment may berequired.


64/80


65/80


Red on green also hurts the eyes. I refuse toshow any more of it!


66/80


But: same hues, except a very light green background anda very dark red textdifferent story. In fact, this is rather

nice, so Ill show some more of it.One reason this works is that there is adequate contrastbetween the text and the background. As noted, our lowsensitivity to blue makes it hard to give rules on what the

difference in brightness should be. Use judgment andcommon sense. And maybe do some user testing.


67/80


Thats It For

Text/Background

You have seen combinations that workand combinations that dont work. Be

bold! Experiment! Just maintain

adequate contrast.


68/80

11-Jun-11 Dr. Nilesh Patel


69/80

Why major caution signs on our roads are usuallyyellow?

Pure yellow strains your eye more than any othercolor - your eye will fix on it first

Using this color for banners and advertisements willreceive more attention from the viewer's eye.


70/80

Green is a cool color that symbolizes nature and the natural world.

Green also represents tranquillity, good luck, health, and jealousy.

Researchers have also found that green can improve reading ability. Somestudents may find that laying a transparent sheet of green paper over readingmaterial increases reading speed and comprehension.

Green has long been a symbol of fertility and was once the preferred color

choice for wedding gowns in the 15th-century. Even today, green M & M's (anAmerican chocolate candy) are said to send a sexual message.

Green is often used in decorating for its calming effect.

For example, guests waiting to appear on television programs often wait in agreen room to relax.

Green is thought to relieve stress and help heal. Those who have a greenwork environment experience fewer stomach aches.

Consider how green is used in language: green thumb, green with envy,greenhorn.


71/80

11-Jun-11 Dr. Nilesh Patel


72/80

Blue is described as a favourite color by many people and is the color mostpreferred by men. Women tend to buy blue clothing for men because theybelieve men prefer it.

Blue calls to mind feelings of calmness or serenity. It is often described aspeaceful, tranquil, secure, and orderly.

Blue can also create feelings of sadness or aloofness.

Blue is often used to decorate offices because research has shown thatpeople are more productive in blue rooms.

Blue is one of the most popular colors, but it is one of the least appetizing.Some weight loss plans even recommend eating your food off of a blueplate. Blue rarely occurs naturally in food aside from blueberries and someplums.

Also, humans are geared to avoid foods that are poisonous and bluecoloring in food is often a sign of spoilage or poison.

Blue can also lower the pulse rate and body temperature.

Consider how blue is used in language: blue moon, blue Monday, blue blood,the blues, and blue ribbon.


73/80

Use color in addition to other information, not

instead Do not use to many colors (3 by apple)

Do not use saturated colors

Choose the background for text on the basis ofcontrast

Use white. Use space. Please!White in its nothingness acts as a wonderfulbalance between colors.

Use web-safe colors(only these 216 colors can be displayed

by every web browser)


74/80


75/80

Rule 1 Exaggerate lightness differences

between foreground andbackground colors, and avoidusing colors of similar lightnessadjacent to one another, even if

they differ in saturation or hue. Dont assume that the lightness

you perceive will be the same asthe lightness perceived by peoplewith color deficits. You cangenerally assume that they will

see less contrast between colorsthan you will. If you lighten thelight colors and darken the darkcolors in your design, you willincrease its visual accessibility.


76/80

Rule 2

Choose dark colors with hues from thebottom half of this hue circle againstlight colors from the top half of thecircle. Avoid contrasting light colors

from the bottom half against darkcolors from the top half. Theorientation of this hue circle waschosen to illustrate this point.

For most people with partial sight

and/or congenital color deficiencies,the lightness values of colors in thebottom half of the hue circle tend tobe reduced.


77/80


78/80

Example: color coding inaccountancy


79/80


In this chapter you learned about:

The color spectrum; our eyes sensitivityto red, green, and blue

Additive (RGB) and subtractive (CMYK)

color models The hue, saturation, and brightness (HSB)

color model

Four color-harmony schemes:

monochromatic, complementary,analogous, and triadic

Text and background color combinationsthat are legible and easy on the eyes


80/80
http://freevideolectures.com/Course/2712/Human-Computer-Interaction-Seminar-2009-2010/4http://www.youtube.com/watch?v=Ukl9yecLxIQ&feature=youtu.be&hd=1

color theory 6.1

Documents