3. 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

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

7. 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

8. 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

9. 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

10. 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.

11. 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);}

12. 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

13. 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.

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

16. 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)

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

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

20. 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

21. 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

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

23. 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