ECA 228
description
Transcript of ECA 228
![Page 1: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/1.jpg)
ECA 228
Internet Design
color
![Page 2: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/2.jpg)
rods & cones
![Page 3: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/3.jpg)
electromagnetic radiation
![Page 4: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/4.jpg)
spectrum
![Page 5: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/5.jpg)
hue
RED ORANGEVIOLET GREENYELLOW BLUE
![Page 6: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/6.jpg)
saturation
RED
![Page 7: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/7.jpg)
value
![Page 8: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/8.jpg)
value – no contrast
![Page 9: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/9.jpg)
value – added hue
![Page 10: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/10.jpg)
Color Models
RYBRBGCMYHSL
![Page 11: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/11.jpg)
Subtractive vs Additive color
• Subtractive color:primary colors for mixing paints
cyan magenta yellow
• Additive color:primary colors for mixing light
red green blue
![Page 12: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/12.jpg)
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
![Page 13: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/13.jpg)
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
![Page 14: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/14.jpg)
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
![Page 15: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/15.jpg)
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
![Page 16: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/16.jpg)
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
![Page 17: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/17.jpg)
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
![Page 18: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/18.jpg)
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
![Page 19: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/19.jpg)
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
![Page 20: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/20.jpg)
Monitor
![Page 21: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/21.jpg)
Color wheel
• the visible spectrum of light can be represented as a color wheel
• color wheel can be used to visualize color relationships
![Page 22: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/22.jpg)
Color wheels
artist’s wheel RGB wheelCMY wheel
![Page 23: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/23.jpg)
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)
![Page 24: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/24.jpg)
Classic color schemes
• Monochromatic
• Analogous
• Complementary
• Split Complementary
• Triadic
• Tetradic (Double Complementary)
![Page 25: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/25.jpg)
Monochromatic
• variations of a single color– looks clean and elegant– produces a soothing effect– easy on the eyes, especially
blues and greens
![Page 26: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/26.jpg)
Monochromatic cont …
• advantages– easy to manage– looks balanced and appealing– soothing
• disadvantages– lacks contrast– not as vibrant as other
schemes– not as exciting
![Page 27: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/27.jpg)
Analogous
• colors adjacent on the color wheel– one color is used as dominant– other colors are used to
enhance– offers more nuance than
monochromatic
![Page 28: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/28.jpg)
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
![Page 29: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/29.jpg)
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
![Page 30: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/30.jpg)
Complementary cont …
• advantages– offers stronger contrast than
any other color scheme– draws maximum attention
• disadvantages– harder to balance than
monochromatic andanalogous
![Page 31: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/31.jpg)
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
![Page 32: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/32.jpg)
Split Complementary cont …
• advantages– strong visual contrast– allows more nuance
than standardcomplementary
• disadvantages– may be difficult to
balance
![Page 33: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/33.jpg)
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
![Page 34: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/34.jpg)
Triadic cont …
• advantages– offers high contrast– retains harmony
• disadvantages– not as much contrast as
complementary
![Page 35: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/35.jpg)
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
![Page 36: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/36.jpg)
Tetradic cont …
• advantages– offers more variety then
any other scheme
• disadvantages– hardest scheme to balance
![Page 37: ECA 228](https://reader033.fdocuments.us/reader033/viewer/2022051821/5681584e550346895dc5a8df/html5/thumbnails/37.jpg)
Web graphics
• web graphics– simply grids of colored pixels– appearance of image depends upon varying
the colors in the pixels