FOREGROUND COLOR h1 { color: DarkCyan;} h2 { color: #ee4e80;} p { color: rgb(100, 100, 90);} The three traditional ways to specify colors: Color name Hex code RGB values

BACKGROUND COLOR body { background-color: rgb(200,200,200);} h1 { background-color: DarkCyan;} h2 { background-color: #ee3e80;} p { background-color: white;}

UNDERSTANDING COLOR Explain: how color on a screen is made by mixing red, green, and blue and how a screen is made up of pixels

UNDERSTANDING COLOR Click: RGB colors come in Explain: how color on a screen is made by mixing red, green, and blue how a screen is made up of pixels Click: color picker tool replaces colors

VALUES RGB VALUES rgb(102,205,170) HEX CODES #66cdaa COLOR NAMES mediumAquaMarine Explain: how the values work Click: RGB values comes in Click: Hex values comes in Click: Color names comes in Explain: terms Click: hue Click: saturation Click: brightness HUE SATURATION BRIGHTNESS

CONTRAST LOW CONTRAST HIGH CONTRAST MEDIUM CONTRAST Explain: contrast is important Load: low contrast Click: high contrast Click: medium contrast Click: reversed text If text is reversed out (a light color on a dark background) increase contrast and line height.

CSS3: OPACITY p.one { background-color: rgb(0,0,0); opacity: 0.5; padding: 10px;} p.two { background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5);}

CSS3: OPACITY p.one { background-color: rgb(0,0,0); opacity: 0.5; padding: 10px;} p.two { background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5);} Note: Will not be transparent in older browsers

CSS3: OPACITY p.one { background-color: rgb(0,0,0); opacity: 0.5; padding: 10px;} p.two { background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5);} Note: RGBA has a fallback of plain RGB values for older browsers that do not understand RGBA.

CSS3: HSL COLORS SATURATION LIGHTNESS Introducing these concepts for the hsl / hsla properties Click: introduces the hue wheel (represented as angle 0 - 360) similar to colloquial idea of color Click: saturation (% of gray in color) Click: lightness (amount of white/lightness or black/darkness in color)

CSS3: HSL & HSLA body { background-color: #C8C8C8; background-color: hsl(0,0.0%, 78%);} p { background-color: #ffffff; background-color: hsla(0,100%,100%,0.5);} Note: second rule uses alpha transparency value (between 0 and 1.0)

SUMMARY Color not only brings your site to life, but also helps convey the mood and evokes reactions. Clicks: Load individual bullets

SUMMARY There are three ways to specify colors in CSS: RGB values, hex codes, and color names. Clicks: Load individual bullets

Color pickers can help you find the color you want. SUMMARY Color pickers can help you find the color you want. Clicks: Load individual bullets

SUMMARY Ensure that there is enough contrast between any text and the background color (or people will not be able to read your content). Clicks: Load individual bullets

SUMMARY CSS3 has introduced an extra value for RGB colors to indicate opacity. It is known as RGBA. Clicks: Load individual bullets

SUMMARY CSS3 also allows you to specify colors as HSL values, with an optional opacity value. It is known as HSLA. Clicks: Load individual bullets