ECA 228 Internet Design color

rods & cones

electromagnetic radiation

spectrum

hue REDORANGE VIOLETGREEN YELLOWBLUE

saturation RED

value

value – no contrast

value – added hue

Color Models RYB RBG CMY HSL

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 spectrum represents color visible to the human eye

Subtractive color Primary colors: Cyan, Magenta, Yellow –combining primaries creates secondary colors M + Y = Red C + Y = Green C + M = Blue –more shades are created by adjusting 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 ) is used with the Cyan, Magenta, and Yellow when printing

Additive color Primary colors: red, green, blue –combining primaries produce secondary colors B + G = Cyan R + B = Magenta R + 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 wheelRGB 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 against a cool color, eg, red placed against green-blue

Complementary cont … advantages –offers stronger contrast than any other color scheme –draws maximum attention disadvantages –harder to balance than monochromatic and analogous

Split Complementary variation of standard complementary –uses one color, then the two colors adjacent to its complementary color –provides high contrast without strong tension of standard complementary scheme

Split Complementary cont … advantages –strong visual contrast –allows more nuance than standard complementary disadvantages –may be difficult to balance

Triadic uses three colors equally spaced around the color wheel –popular among artists –offers strong visual contrast while retaining harmony –not as much contrast as complementary, but more balance 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 scheme may 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