Hex and RGB

The hexadecimal and rgb color system can represent many more colors than the small set of CSS named colors. We can use this new set of colors to refine our web page’s style.

In both hex and RGB, we have three values, one for each color. Each can be one of 256 values. Specifically, 256 * 256 * 256 = 16,777,216. That is the amount of colors we can now represent. Compare that to the roughly 140 named CSS colors!

Recall that we started with named colors, converted them to hex, and then converted some of the hex colors to rgb. Unless we made a mistake, all of the colors should still be the same, visually. Let’s use our broadened palette to make some more refined color choices.

Instructions

1.In the .green rule in style.css, change the background color to #9EB599.

Run the code. Can you tell the difference?

2. In the .light rule in style.css, change the background color to #683C2C. 

3. In the .city rule in style.css, change the background color to #4C352D. 

4. In the .vienna rule in style.css, change the background color to #352926. 

5. In the .italian rule in style.css, change the background color to #141212.

Run the code one more time. These new colors are a lot closer to the real-life color of each type of coffee. How does the subtle difference feel?