Chapter 16. Specifying Color in HTML
You can specify the color of certain page elements using HTML tags.
There are two methods for specifying colors in web documents: RGB
values and color name.
16.1. Specifying Color by RGB Values
The most common and precise way
to specify a color in HTML is by its numerical RGB (red, green, blue)
values. For an explanation of RGB color, see Section 3.3, "Color on the Web" in Chapter 3, "Web Design Principles for Print Designers".
Once you've identified the red, green, and blue values of your
chosen color (an image-editing tool helps with this task), you need
to translate them to their hexadecimal equivalents in
order to enter them into the HTML color tag. These values are written
in HTML with the following syntax:
"#RRGGBB"
RR stands for the hexadecimal red value,
GG stands for the hexadecimal green value, and
BB stands for the hexadecimal blue value. Using
these values, you can specify any color from the "true
color" space (millions of colors).
Let's look at an example to put this in context. To set the
background color of a document to dark olive green, first find the
RGB values of the color (85, 107, 47) and convert them into their
hexadecimal equivalents (55, 6B, 2F; explanation of conversion
follows). Then the values can be placed in an HTML tag, in this case
to change the background color of a page:
<BODY BGCOLOR="#556B2F">
16.1.1. The Hexadecimal System
The hexadecimal numbering system is base-16 (as compared to base-10
for decimal numbers). It uses the following 16 characters:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
A through F represent the decimal values 10 through 15.
16.1.2. Converting Decimal to Hexadecimal
You can calculate hex values in
the 0 to 255 range by dividing a number by 16 to get the first digit,
then using the remainder for the second digit. For example, dividing
the decimal number 203 by 16 yields 12 with a remainder of 11. The
hexadecimal value of 12 is C; the hex value of 11 is B. Therefore,
the hexadecimal equivalent of 203 is CB.
Fortunately, there are simpler methods for converting numbers to
hexadecimal:
-
Use Table 16-1, which translates decimal values
from 0 to 255.
-
Use a hexadecimal calculator. On the Macintosh, you can download a
copy of a utility called Calculator II (ftp://ftp.amug.org/pub/mirrors/info-mac/sci/calc/calculator-ii-15.hqx).
Windows users can find a hexadecimal calculator in the
"Scientific" view of the Windows standard calculator.
-
Use online resources. There are several resources online for
calculating hexadecimal equivalents. Some allow you to enter all
three values for red, green, and blue, and convert to hexadecimal
while showing you a sample of your chosen color immediately. Examples
of online calculations include:
- Mediarama's Color Page Builder
-
Plug in your decimal RGB values for page elements, and this page
automatically generates a sample page with your color selections and
the HTML code for the <body> tag. See
http://www.inquisitor.com/hex.html.
- URL Univox Internet: RGB 2 Hex
-
This is a stripped-down, no-frills tool for converting decimal RGB
values to their hex equivalents. See http://www.univox.com/rgb2hex.html.
Table 16-1. Decimal to hexadecimal equivalents
dec = hex
|
dec = hex
|
dec = hex
|
dec = hex
|
dec = hex
|
dec = hex
|
dec = hex
|
dec = hex
|
dec = hex
|
dec = hex
|
dec = hex
|
dec = hex
|
0 = 00
1 = 01
2 = 02
3 = 03
4 = 04
5 = 05
6 = 06
7 = 07
8 = 08
9 = 09
10 = 0A
11 = 0B
12 = 0C
13 = 0D
14 = 0E
15 = 0F
16 = 10
17 = 11
18 = 12
19 = 13
|
20 = 14
21 = 15
22 = 16
23 = 17
24 = 18
25 = 19
26 = 1A
27 = 1B
28 = 1C
29 = 1D
30 = 1E
31 = 1F
32 = 20
33 = 21
34 = 22
35 = 23
36 = 24
37 = 25
38 = 26
39 = 27
|
40 = 28
41 = 29
42 = 2A
43 = 2B
44 = 2C
45 = 2D
46 = 2E
47 = 2F
48 = 30
49 = 31
50 = 32
51 = 33
52 = 34
53 = 35
54 = 36
55 = 37
56 = 38
57 = 39
58 = 3A
59 = 3B
|
60 = 3C
61 = 3D
62 = 3E
63 = 3F
64 = 40
65 = 41
66 = 42
67 = 43
68 = 44
69 = 45
70 = 46
71 = 47
72 = 48
73 = 49
74 = 4A
75 = 4B
76 = 4C
77 = 4D
78 = 4E
79 = 4F
|
80 = 50
81 = 51
82 = 52
83 = 53
84 = 54
85 = 55
86 = 56
87 = 57
88 = 58
89 = 59
90 = 5A
91 = 5B
92 = 5C
93 = 5D
94 = 5E
95 = 5F
96 = 60
97 = 61
98 = 62
99 = 63
|
100 = 64
101 = 65
102 = 66
103 = 67
104 = 68
105 = 69
106 = 6A
107 = 6B
108 = 6C
109 = 6D
110 = 6E
111 = 6F
112 = 70
113 = 71
114 = 72
115 = 73
116 = 74
117 = 75
118 = 76
119 = 77
|
120 = 78
121 = 79
122 = 7A
123 = 7B
124 = 7C
125 = 7D
126 = 7E
127 = 7F
128 = 80
129 = 81
130 = 82
131 = 83
132 = 84
133 = 85
134 = 86
135 = 87
136 = 88
137 = 89
138 = 8A
139 = 8B
140 = 8C
141 = 8D
142 = 8E
|
143 = 8F
144 = 90
145 = 91
146 = 92
147 = 93
148 = 94
149 = 95
150 = 96
151 = 97
152 = 98
153 = 99
154 = 9A
155 = 9B
156 = 9C
157 = 9D
158 = 9E
159 = 9F
160 = A0
161 = A1
162 = A2
163 = A3
164 = A4
165 = A5
|
166 = A6
167 = A7
168 = A8
169 = A9
170 = AA
171 = AB
172 = AC
173 = AD
174 = AE
175 = AF
176 = B0
177 = B1
178 = B2
179 = B3
180 = B4
181 = B5
182 = B6
183 = B7
184 = B8
185 = B9
186 = BA
187 = BB
188 = BC
|
189 = BD
190 = BE
191 = BF
192 = C0
193 = C1
194 = C2
195 = C3
196 = C4
198 = C6
199 = C7
200 = C8
201 = C9
202 = CA
203 = CB
204 = CC
205 = CD
206 = CE
207 = CF
208 = D0
209 = D1
210 = D2
211 = D3
212 = D4
|
213 = D5
214 = D6
215 = D7
216 = D8
217 = D9
218 = DA
219 = DB
220 = DC
221 = DD
222 = DE
223 = DF
224 = E0
225 = E1
226 = E2
227 = E3
228 = E4
229 = E5
230 = E6
231 = E7
232 = E8
233 = E9
234 = EA
235 = EB
|
236 = EC
237 = ED
238 = EE
239 = EF
240 = F0
241 = F1
242 = F2
243 = F3
244 = F4
245 = F5
246 = F6
247 = F7
248 = F8
249 = F9
250 = FA
251 = FB
252 = FC
253 = FD
254 = FE
255 = FF
|
16.1.3. Hexadecimal Values for Web Palette Colors
The web palette is a set of 216 colors that will not shift or dither
when rendered in browsers on 8-bit monitors (for a thorough
explanation of the web palette, see Chapter 3, "Web Design Principles for Print Designers").
All colors in the
web palette are made up of
combinations of the following six hexadecimal values: 00, 33, 66, 99, CC,
and FF.
| | | 15.7. Demystifying CGI | | 16.2. Specifying Colors by Name |
Copyright © 2002 O'Reilly & Associates. All rights reserved.
|
|