ECA 228 Internet Design color. rods & cones electromagnetic radiation.

ECA 228

Internet Design

color

rods & cones

electromagnetic radiation

spectrum

hue

RED ORANGEVIOLET GREENYELLOW BLUE

saturation

RED

value

value – no contrast

value – added hue

Color Models

RYBRBGCMYHSL

Subtractive vs Additive color

• Subtractive color:primary colors for mixing paints

cyan magenta yellow

• Additive color:primary colors for mixing light

red green blue

Light

• light is a mixture of all colors

• light can be broken down into its component parts with a prism

• visible spectrumrepresents colorvisible to the human eye

Subtractive color• Primary colors: Cyan, Magenta, Yellow

– combining primaries creates secondary colors

M + Y = RedC + Y = GreenC + M = Blue

– more shades are created byadjusting the amount of component colors

Subtractive color cont …

• subtractive color works by absorbing (subtracting) some colors, while reflecting other colors

• an apple, eg, really has no color• the apple absorbs most

of the cyan, some magenta and yellow

• it reflects magenta and yellow which allows us to see red

Subtractive color cont …

• with subtractive colors each time you add more of a primary color, the darker the overall color value becomes

• as more colors are added, the resulting color becomes darker, because more light is being absorbed

Subtractive color cont …

• CMYK– in theory, adding all the subtractive primary

colors together will produce black– in practice, doing so will produce a muddy

brown color, because all man-made colors have imperfections

– therefore, black ( K ) isused with the Cyan, Magenta, and Yellowwhen printing

Additive color• Primary colors: red, green, blue

– combining primaries produce secondary colors

B + G = Cyan R + B = MagentaR + G + Yellow

– more shades are created by adjusting the amount of component colors

Additive color cont …

• additive colors involve light generated directly from a source, such as televisions or computer monitors

• additive colors are defined by adding colors

Additive color cont …

• the additive process mixes various amounts of red, green, and blue to produce other colors

• with additive colors each time you add more of a primary color, the lighter the overall color value becomes

• when red, green, and blue are mixed, white is produced

Monitor

Color wheel

• the visible spectrum of light can be represented as a color wheel

• color wheel can be used to visualize color relationships

Color wheels

artist’s wheel RGB wheelCMY wheel

Color schemes

• According to color theory, harmonious color combinations can be found with– two colors opposite each other on the color

wheel– three colors forming a triangle, equally spaced

around the color wheel– four colors forming a rectangle on the color

wheel (two pairs of colors opposite each other)

Classic color schemes

• Monochromatic

• Analogous

• Complementary

• Split Complementary

• Triadic

• Tetradic (Double Complementary)

Monochromatic

• variations of a single color– looks clean and elegant– produces a soothing effect– easy on the eyes, especially

blues and greens

Monochromatic cont …

• advantages– easy to manage– looks balanced and appealing– soothing

• disadvantages– lacks contrast– not as vibrant as other

schemes– not as exciting

Analogous

• colors adjacent on the color wheel– one color is used as dominant– other colors are used to

enhance– offers more nuance than

monochromatic

Analogous cont …

• advantages– easy to create and managed– richer than monochromatic

• disadvantages– lack contrast– not as vibrant as

complementary– using too many hues

may ruin harmony

Complementary

• two colors that are opposite each other on the color wheel– intrinsically high contrast– looks best when a warm

color is placed againsta cool color, eg, redplaced against green-blue

Complementary cont …

• advantages– offers stronger contrast than

any other color scheme– draws maximum attention

• disadvantages– harder to balance than

monochromatic andanalogous

Split Complementary

• variation of standard complementary– uses one color, then the two colors adjacent

to its complementary color

– provides high contrastwithout strong tensionof standard complementaryscheme

Split Complementary cont …

• advantages– strong visual contrast– allows more nuance

than standardcomplementary

• disadvantages– may be difficult to

balance

Triadic

• uses three colors equally spaced around the color wheel– popular among artists– offers strong visual

contrast while retainingharmony

– not as much contrast ascomplementary, but morebalance and harmony

Triadic cont …

• advantages– offers high contrast– retains harmony

• disadvantages– not as much contrast as

complementary

Tetradic

• uses two pairs of complementary colors– hard to balance and harmonize– choose one dominant color– if all four hues are used in

equal amounts, the schememay look unbalanced

Tetradic cont …

• advantages– offers more variety then

any other scheme

• disadvantages– hardest scheme to balance

Web graphics

• web graphics– simply grids of colored pixels– appearance of image depends upon varying

the colors in the pixels