COLORS & BACKGROUNDS CHAPTER 13

SPECIFYING COLORS Three common places where you specify color 1.Text color.box { color: blue; } 2.Background color.box { background-color: darkgray; } 3.Borders color.box { border: 1px solid red; } Context: Here is some content that will be in a box with blue text, darkgray background and a red border

SPECIFYING COLORS Five ways to specify color 1. Color name color: purple; 2. Hexadecimal 3 digit (#RGB) color: #F08; 3. Hexadecimal 6 digit (#RRGGBB) color: #F3008d 4. rgb function color: rgb(255, 0, 128); 5. rgba function color: rgb(255, 0, 128, 0.4);

HEXADECIMAL HEXDECIMAL F15 E14 D13 C12 B11 A color: #000Min color (black) color: #FFFMax color (white) color: #0F0Max green color: #00FMax blue color: #FF0Max yellow color: #CCCLight gray color: #003Dark blue color: #CCFLight blue

COLOR DEPTH 16 values of red X 16 values of greenX 16 values of blueX different colors

HEXADECIMAL HEXDECIMAL F0240 E0224 D0208 C0192 B0176 A color: #000000Min color color: #FFFFFFMax color color: #00FF00Max green color: #0000FFMax blue color: #FFFF00Max yellow color: #C0C0C0Light gray color: #000030Dark blue color: #C0C0F0Light blue

COLOR DEPTH 256 values of red X 256 values of greenX 256 values of blueX ,777,216 different colors

BEST WAY TO SPECIFY COLOR* *Dr. B’s opinion Use rgb with percentages: rgb(0%, 50%, 25%) Why? Intuitive and minimal memorization needed Don’t need to remember hexadecimal scale Don’t need to remember 0 – 255 scale Q: Why do you still need to study the other methods?

TRANSPARENCY 101 Opacity 1.0 indicates 100% opaque, i.e., cannot see through it at all. 0.0 indicates that it is completely transparent, i.e., invisible. rgba The a stands for alpha, which specifies transparency. Impacts only the thing that is being colored Values have the same meaning as opacity.