Understanding Concepts And Terminology
-
Upload
nattaya-chamt -
Category
Documents
-
view
221 -
download
0
description
Transcript of Understanding Concepts And Terminology
![Page 1: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/1.jpg)
Color Theory For DesignersUnderstanding Concepts And Terminology
Ref: http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/
![Page 2: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/2.jpg)
“ If you’re going to use color effectively in your designs, you’ll need to know some color concepts and color theory terminology. “
Color Theory For DesignersUnderstanding Concepts And Terminology
![Page 3: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/3.jpg)
RGB ColorThe RGB color model is an additive color model in which red, green, and blue light is added together in various ways to reproduce a broad array of colors. The main purpose of the
RGB color model is for the sensing, representation, and display of images in
electronic systems, such as televisions and computers
http://en.wikipedia.org/wiki/RGB_color_model
![Page 4: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/4.jpg)
Color Theory
• Hue• Chroma• Saturation• Value• Tone• Shades• Tints http://en.wikipedia.org/wiki/Color_theory
![Page 5: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/5.jpg)
Hue• Hue is the most basic of
color terms and basically denotes an object’s color. When we say “blue” “green” or “red” we’re talking about hue.
“The hues you use in your designs convey important messages to your website’s visitors.”
http://www.uwgb.edu/heuerc/2D/ColorTerms.html
http://dba.med.sc.edu/price/irf/Adobe_tg/models/munsell.html
![Page 6: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/6.jpg)
The primary hue of the background and some of the typography on the Happy Twitmas website is bright red.
![Page 7: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/7.jpg)
Using a lot of pure hues together can add a fun and playful look to a design, as done in the header and elsewhere on this website.
![Page 8: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/8.jpg)
Pure red is a very popular hue in Web design.
![Page 9: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/9.jpg)
Mix uses a number of pure hues in its header and logo.
![Page 10: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/10.jpg)
Green in its purer forms is seen less often and so stands out more than some other colors.
![Page 11: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/11.jpg)
Chroma
• Chroma refers to the purity of a color. • A hue with high chroma has no black, white or gray in it.• Adding white, black or gray reduces its chroma. • It’s similar to saturation but not quite the same.
• Chroma can be thought of as the brightness of a color in comparison to white.
• In design, avoid using hues that have a very similar chroma.
• Opt instead for hues with chromas that are the same or a few steps away from each other.
![Page 12: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/12.jpg)
Adding white, black or gray reduces its chroma.
![Page 13: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/13.jpg)
Cyan has a high chroma and so really stands out against black and white.
![Page 14: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/14.jpg)
Another website with a high chroma blue, though it includes some tints and shades with somewhat lower chromas.
![Page 15: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/15.jpg)
Combining high and low saturation in the same hue can make for a sophisticated and elegant design.
![Page 16: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/16.jpg)
Colors with very high chroma are best used
in moderation, as done here.
![Page 17: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/17.jpg)
Differences in chroma can make for a
visually pleasing gradient.
![Page 18: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/18.jpg)
Saturation• Saturation refers to how a hue appears under
particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.
• In design, colors with similar saturation levels make for more cohesive-looking designs. As with chroma, colors with similar but not identical saturations can have a jarring effect on visitors.
![Page 19: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/19.jpg)
• Saturation refers to how a hue appears under particular lighting conditions
http://withfriendship.com/user/svaruna/saturation.php
![Page 20: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/20.jpg)
The saturation levels of many of the different hues used here are similar, adding a sense of unity to the overall design.
![Page 21: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/21.jpg)
Combining colors with similar muted saturation levels creates a soft design, which is emphasized by the watercolor effects.
![Page 22: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/22.jpg)
Hues with lower saturation levels aren’t necessarily lighter, as shown here.
![Page 23: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/23.jpg)
An excellent example of how using a hue with a high saturation against a background with low saturation can make the former really stand out.
![Page 24: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/24.jpg)
Another example of how low saturation colors make nearby high saturation colors really stand out.
![Page 25: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/25.jpg)
ValueValue could also be called “lightness.” It refers to how light or dark a color is.
Lighter colors have higher values. For example,
orange has a higher value than navy blue or dark purple. Black has the lowest value of any hue, and white the highest.
When applying color values to your designs, favor colors with different values, especially ones with high chroma. High contrast values generally result in more aesthetically pleasing designs.
![Page 26: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/26.jpg)
Value
http://www.comptonart.net/Instructionpage/inClassValMoo.html
http://facweb.cs.depaul.edu/sgrais/color_value.htm
![Page 27: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/27.jpg)
The high value of the yellow used here really stands out against the lower-value black and gray.
![Page 28: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/28.jpg)
This website combines blue hues with two different values. Because the different values have enough contrast, the overall look is visually appealing.
![Page 29: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/29.jpg)
Combining colors with similar values makes for an energetic and lively background
![Page 30: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/30.jpg)
The red here has a lower value than the light blue, which itself has a lower value than the white.
![Page 31: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/31.jpg)
The human eye can pick up differences in value even among such similar hues.
![Page 32: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/32.jpg)
Tones
Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues.
Tones are sometimes easier to use in designs. Tones with more gray can lend a certain vintage feel to websites. Depending on the hues, they can also add a sophisticated or elegant look.
![Page 33: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/33.jpg)
Tones
http://www.color-wheel-artist.com/hue.html
Skin Tone
![Page 34: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/34.jpg)
Tones can give websites a sophisticated look
while adding some vintage and antique flair.
![Page 35: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/35.jpg)
This website combines blues in a variety of tones, shades and tints.
![Page 36: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/36.jpg)
Tones can be intensified by adding gray around them, as done here.
![Page 37: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/37.jpg)
The tones used in the navigation and background design here give this website a vintage, hand-made feel.
![Page 38: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/38.jpg)
A great example of how a pure hue can really stand out against a background of tones.
![Page 39: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/39.jpg)
Some colors that we might consider gray are actually tones of other colors. In this case, the background is a blue tone but with a lot of gray added.
![Page 40: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/40.jpg)
Shades• A shade is created when black is
added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but shade only applies to hues made darker by the addition of black.
• In design, very dark shades are sometimes used instead of black and can serve as neutrals.
• Combining shades with tints is best to avoid too dark and heavy a look.
![Page 41: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/41.jpg)
Shades
http://www.furydesignconsultants.comhttp://www.olivier-ladeuix.com/blog/2006/12/01/colour-harmony/
![Page 42: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/42.jpg)
Jonathan Moore’s website has a variety of different shades of purple in the background (and a couple of tints in other parts).
![Page 43: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/43.jpg)
Using different shades together works well, as long as sufficient contrast between them is maintained.
![Page 44: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/44.jpg)
An effective combination of shades and tints, particularly in the header.
![Page 45: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/45.jpg)
Another background design that has shades (and a few tints) in a textured gradient.
![Page 46: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/46.jpg)
Combining shades within textures adds interest to this website.
![Page 47: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/47.jpg)
Tints• A tint is formed when white is added
to a hue, lightening it. Very light tints are sometimes called pastels, but any pure hue with white added to it is a tint.
• Tints are often used to create feminine or lighter designs. Pastel tints are especially used to make designs more feminine. They also work well in vintage designs and are popular on websites targeted at parents of babies and toddlers.
![Page 48: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/48.jpg)
Tints
![Page 49: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/49.jpg)
Caio Cardoso’s website has a variety of green tints in the background and in other elements.
![Page 50: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/50.jpg)
The blue tint on Fernando Silanes’s website creates a soft and sophisticated look.
![Page 51: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/51.jpg)
Blue tints are popular for sky and nature motifs.
![Page 52: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/52.jpg)
Tints are also popular in watercolor-based designs.
![Page 53: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/53.jpg)
Tints combined together make for a sophisticated gradient.
![Page 54: Understanding Concepts And Terminology](https://reader036.fdocuments.in/reader036/viewer/2022062410/568bbf3c1a28ab777e8c8f8a/html5/thumbnails/54.jpg)
Conclusion• Hue is color (blue, green, red, etc.).• Chroma is the purity of a color (a high chroma
has no added black, white or gray).• Saturation refers to how strong or weak a color is
(high saturation being strong).• Value refers to how light or dark a color is (light
having a high value).• Tones are created by adding gray to a color,
making it duller than the original.• Shades are created by adding black to a color,
making it darker than the original.• Tints are created by adding white to a color,
making it lighter than the original.