Colors and Backgrounds

1. Colors and Backgrounds Learning Web Design: Chapter 13 Beautiful Web Design: Chapter 2

2. Lesson Overview • Understand basic color theory • Learn how to specify color in CSS • Understand how to use foreground and background colors • Manage link colors with Pseudo-classes • Add and tile background images • Intro to External Style Sheets

3. The Psychology of Colors • Color can have an impact on a viewer • Color has long been the subject of study for advertisers, print designers and artists • How do we feel about the use of one color over another? • Consider the following…

4. Blue • Blue is the most sedate of all colors • Blue is used to represent ice and minty freshness • Blue symbolizes heaven and divinity • Blue is the color of choice for business suitsand logos

5. Red • Red is the most arrogant, attention grabbing, energetic color • Red is often associated with love and passion • Advertisers use red to catch our attention: • Red tag specials • Fast sports cars • Lipstick on beautiful women

6. Yellow • Yellow is a warm, bright and vibrant color • Yellow is the color of the sun, and gold • Yellow representsgoodness and joy • Also represents caution • Yellow roses are the symbol of friendship

7. Orange • Orange is the marriage of red and yellow • Orange is considered happy and lively • Orange is used in autumnal landscapes and fire’s flame • Orange captures our attention: ex. Signs on roads and highways

8. Green • Green is the color of the natural world, represents freshness and growing things • Green represents life and hope • Its cool quality sooths, calms, and has healing powers

9. Violet/Purple • Purple is the most exotic color • Purple is represents royalty, and wealth • Purple is a deep, mysterious hue,mystical and meditative

10. White • White represents perfect balance and perfection • White symbolizes purity, truth and goodness • Good guys wear white • White also suggests cleanliness

11. Black • Black is the absence of white light • Black is the antithesis of white, bad guys wear black • Black represents funerals, death and mourning • Black can bring feelings of despair and loneliness • Black is mysterious, evil, and intriguing

12. The Practical Side of Color • Knowing that colors affect us emotionally can aid us in choosing how and where to place color on our pages • Use the symbolic meanings of colors to add a subtle, deeper meaning for your Web pages • Use bright colors to grab attention • Use calm colors to encourage the viewer to stay around and relax

13. The Color Wheel • The color wheel is based on the three primary colors ( Red, Yellow and Blue ) placed evenly around a circle • The secondarycolors (Green, Orange and Violet) are mixtures of the two primaries they sit between • The tertiarycolors fall between each primary and secondary. Between yellow and orange, for example, is yellow orange, between blue and violet is blue violet and so on

14. More Color Terminology • Complimentary colors are opposite each other on the color wheel • Saturated colors contain no black, no white and none of their complimentary color • Compound colors contain a mixture of the three primaries, for example: the browns, khakis and earth colors • Tints are made by adding white to a color • Shades are made by adding black This illustration shows the compound mixtures between red and green, as are tints and shades of the color wheel

15. Color in terms of HSV • In HSV, any color is decomposed along three axes • Hue: a pure rainbow color from the color wheel • Saturation: the proportion of this pure color vs. colorless gray • Value (also called luminance): the overall brightness of the color

16. Web Site Color Schemes • Choosing an aesthetically pleasing set of colors for a Web site may be challenging for non-designers • Using what we know about the color wheel, you can use different color combinations or schemes that are harmonious and pleasing to the eye • These schemes are used in other disciplines but also have their place in web design

17. Color Scheme Tools • There are several online tools that can help you with choosing a color scheme for a Web site • One is Color Scheme Designer: • http://colorschemedesigner.com/ • This tool helps you view different schemes and then choose the one you like and transform the information into usable Web format

18. Monochromatic Scheme • Monochromatic color schemes use a single color as the basis of the scheme • Differing values of the chosen color can be used to create the feel of different colors • Monochromatic color schemes are usually seen as harmonious and peaceful • Using a single color creates unity and can help to create or tie things together

19. Monochromatic Scheme

20. A Monochromatic Web Site http://newark1.com/chocolate/index.htm

21. Analogous Scheme • Analogous color combinations use colors that are adjacent on the color wheel • A selection of blues and purples, or reds and oranges creates an analogous color scheme • Two or more colors can be used in an analogous color scheme however, one color is often used as a dominant color while others are used as accents

22. Analogous Color Scheme

23. Analogous Web Site http://www.regines.new.au/

24. Complementary Scheme • Complementary colors are opposite from each other on the color wheel • These contrasting colors are pleasing to the eye • This scheme usually combines a warm color and a cool together • Probably should not be used in a foreground and background relationship • Can be discordant if the colors are not true opposites on the color wheel.

25. Complementary Scheme

26. Complementary Web Site

27. Triadic Color Scheme • The three colors in a triadic color scheme are evenly spaced on the color wheel • This scheme combines primary or secondary colors together • Using highly saturated colors can make your site look amateurish • A more subdued value of one or more color can help to create greater subtlety, harmony and readability for your site

28. Triadic Color Scheme

29. Tetradic Color Scheme • The tetradic scheme combines four colors evenly spaced on the color wheel • Can be seen as combining two sets of complementary color schemes • May appear too busy if all colors are given equal footing on a Web site • Consider choosing one dominant color and use others as accents

30. Tetradic Color Scheme

31. Displaying Color on the Web • Web color is grouped by its Red, Green, and Blue elements (RGB) • Newer monitors use 24 bit color: sometimes called true color • 8 bits for Red, 8 bits for Green and 8 bits for Blue • Can display millions of colors using this combination

32. Bit Depth 1 - bit 2 colors 2 - bits 4 colors 3 -bits 8 colors 4 – bits 16 colors 5 – bits 32 colors 6 – bits 64 colors 7 – bits 128 colors 8 – bits 256 colors 16 – bits 65,536 colors 24 – bits16, 777, 216 colors (Usually referred to as “millions of colors”)

33. Color Name or Number • A color can have a name • These are names recognized by the browser • User-friendly way of giving a color attribute value • Ex: “forestgreen”, “aquamarine”, “indianred” • A color can have a number • Uses a hexadecimal value to represent the RGB color • The # symbol designates this as a hexadecimal number to the browser • Ex: aqua = “#00FFFF”, darkviolet=“#9400D3”

34. Web-Safe Colors • Choosing only web-safe colors is no longer critical because most monitors can now handle millions of colors • A color is web-safe if all pairs of digits are the same • Examples: • #00CCFF – is web-safe • #9400D3- is not web-safe • #FFF – shorthand notation for #FFFFFF • #FF – even shorter notation for #FFFFFF

35. Foreground Text Color • The color property is used to set the foreground text color • Values include: color name or hexadeimal number • Setting the text color in the body selector will set the default text foreground color for the entire page or site • body { color: black;} • body { color: #000000;}

36. Background Color • The background-color property is used to set the background color on any element • Values include: color name or hexadecimal number • Again, adding the background-color property to the body selector will color the background of the entire page • body { background-color: white;} • body { background-color: #FFFFFF;}

37. Anchor Pseudo-Classes in CSS • An anchor pseudo-class defines styles for anchor state changes • You can determine a pseudo-class style because it contains the : character • Links exist in multiple states: • a:link – the unvisited state • a:visited – the link has been visited • a:active – the link is active • a:hover – the mouse is hovering over the link

38. Anchor Pseudo Classes • Using CSS you can change the color and appearance of a link in these states • Ex. a: link { color: blue;}a: active { color: red; }a: visited { color: green; }a: hover { color: yellow; } • Descendent selectors may include a pseudo-class • Ex. ol a:link { color: blue;}

39. Watch Backgrounds and Link Colors • Poor choice of background colors and background images can make your text or links unreadable • Make sure you have enough contrast between background and foreground • Often, increasing font size can make a world of difference • Subtle background patterns and colors are best

40. Creating a Web Color Palette • A color scheme may provide you with only three or four colors to work with • Shades and tints of the main colors from a scheme that can be used to create a more complex color palette as needed for a Web site • Hexadecimal values of colors are needed to translate the color palette to CSS code • The Color Scheme tool can aid us in putting together a more complete palette

41. What Colors are Needed ??? • The two most important colors for a palette are the text color and the background color • These two colors must have enough contrast to make the text readable • Heading colors may be an accent color • Link, visited link, hover link, and active link colors must be readable on background and differ from text colors • Key graphics may echo accent or dominant color

42. Additional Tool Features • The Color Scheme tool can generate an HTML file with embedded CSS that shows the color palette as hexadecimal values • A light background with dark text Web page can be viewed • A dark background with light text Web page can be viewed

43. Export Palette as HTML + CSS

44. HTML Page for TetradicColor Palette

45. <style type="text/css"> /* Palette color codes */ /* Feel free to copy&paste color codes to your application */ .primary-1 { background-color: #7109AA } .primary-2 { background-color: #5F2580 } .primary-3 { background-color: #48036F } .primary-4 { background-color: #9F3ED5 } .primary-5 { background-color: #AD66D5 } .secondary-a-1 { background-color: #CD0074 } .secondary-a-2 { background-color: #992667 } .secondary-a-3 { background-color: #85004B } .secondary-a-4 { background-color: #E6399B } .secondary-a-5 { background-color: #E667AF } .secondary-b-1 { background-color: #9FEE00 } .secondary-b-2 { background-color: #86B32D } .secondary-b-3 { background-color: #679B00 } .secondary-b-4 { background-color: #B9F73E } .secondary-b-5 { background-color: #C9F76F } .complement-1 { background-color: #FFFF00 } .complement-2 { background-color: #BFBF30 } .complement-3 { background-color: #A6A600 } .complement-4 { background-color: #FFFF40 } .complement-5 { background-color: #FFFF73 } Color Palette CSS Code

46. Tetradic Light Page Example

47. Tetradic Dark Page Example

48. Background-Image • The HTML background attribute of the <body> tag has been deprecated in favor of the background-image CSS property • A background image can be applied to the entire body of the page or any element • Use the body selector in a style sheet to set the background-image for a page • Examples: • body {background-image: url (path/filename);} • body { background-image: url (Images/chart.jpg) ;}

49. Background-Repeat in CSS • A background image will automatically try to cover the entire browser window • If it is a small image, it will repeat or tile to cover the window • This repeating is called tiling • The background-repeat property can help you to control the tiling of an image

50. Background-Repeat Values • background-repeat values include: • background-repeat: repeat-x; will tile an image in the horizontal direction • background-repeat: repeat-y; will tile an image in a vertical direction • background-repeat: no-repeat;will not tile an image, it will only appear once • background-repeat: repeat; will tile the image in both directions, this is the default