CHAPTER 13
COLORS & BACKGROUNDS
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:
<div class=“box> Here is some content that will
be in a box with blue text, darkgray background
and a red border </div>
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);
HEX
DECIMAL
F
15
E
14
D
13
C
12
B
11
A
10
9
HEXADECIMAL
color: #000
Min color (black)
color: #FFF
Max color (white)
9
color: #0F0
Max green
8
8
7
7
color: #00F
Max blue
6
6
color: #FF0
Max yellow
5
5
4
4
color: #CCC
Light gray
3
3
color: #003
Dark blue
2
2
color: #CCF
Light blue
1
1
0
0
COLOR DEPTH
• 16 values of red
X
• 16 values of green
X
• 16 values of blue
X
--------------------------------------• 4096 different colors
HEX
DECIMAL
F0
240
E0
224
D0
208
C0
192
B0
176
A0
160
90
HEXADECIMAL
color: #000000
Min color
color: #FFFFFF
Max color
144
color:
#00FF00
Max green
80
128
70
112
color:
#0000FF
Max blue
60
96
color:
#FFFF00
Max yellow
50
80
40
64
color:
#C0C0C0
Light gray
33
48
color:
#000030
Dark blue
20
32
color:
#C0C0F0
Light blue
10
16
00
0
COLOR DEPTH
• 256 values of red
X
• 256 values of green X
• 256 values of blue
X
--------------------------------------• 16,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.