1.4. Кодирование цвета
Цвет используется для раскрашивания шрифтов, горизонтальных линий и фона, других элементов страницы. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами. Существует несколько атрибутов, значениями которых являются опции цвета. Самый простой способ определить цвет — написать название цвета на английском языке. Так, например, задается красный цвет шрифта в элементе:<FONT color="red"> Текст </FONT>
В общем случае цвет определяется так называемым RGB-кодом, шаблоны которого уже упоминались выше. Любой цвет представляется в этом случае как комбинация красного (R), зеленого (G) и синего (B) цветов, взятых в определенных пропорциях.
Доля каждой цветовой составляющей определяется интенсивностью цвета и выражается двухразрядным шестнадцатеричным числом. В десятичном исчислении эти числа соответствуют диапазону от 0 до 255. Легко подсчитать, что, комбинируя интенсивности трех базовых цветов, разработчик Web-страницы имеет возможность запрограммировать любой из 16777216 доступных оттенков (режим монитора True Color).
Например, атрибут фона Web-страницы, таблицы или ячейки таблице задается следующим шаблоном:
bgcolor=#RRGGBB
где RR, GG, BB — шестнадцатиразрядные числа в пределах от 00 до FF.
В таблице представлены основные названия цветов.
Русское название |
Английское название |
RGB-код |
Аквамарин |
aqua |
#00FFFF |
Белый |
white |
#FFFFFF |
Желтый |
yellow |
#FFFF00 |
Зеленый |
green |
#008000 |
Золотой |
gold |
#FFD700 |
Индиго |
indigo |
#4B0080 |
Каштановый |
maroon |
#800000 |
Красный |
red |
#FF0000 |
Оливковый |
olive |
#808000 |
Оранжевый |
orange |
#FFA500 |
Пурпурный |
purple |
#800080 |
Светло-зеленый |
lime |
#00FF00 |
Серебристый |
silver |
#C0C0C0 |
Серый |
gray |
#808080 |
Сизый |
teal |
#008080 |
Синий |
blue |
#0000FF |
Ультрамарин |
navy |
#000080 |
Фиолетовый |
violet |
#EE80EE |
Фуксиновый |
fuchsia |
#FF00FF |
Черный |
black |
#000000 |
Со временем набор стандартных оттенков был расширен. Если цвет задан числом, броузер всегда воспроизводит его правильно. Возможность использования буквенного кода из расширенного списка (см. ниже) необходимо тестировать. Например, для задания фона страницы можно попробовать такую конструкцию:
<BODY bgcolor="aliceblue">
В таблице приведены буквенные коды различных оттенков и их числовые соответствия.
Английское название |
RGB-код |
Английское название |
RGB-код |
aliceblue |
#F0F8FF |
lightgrey |
#D3D3D3 |
antiquewhite |
#FAEBD7 |
lightpink |
#FFB6C1 |
aquamarine |
#7FFFD4 |
lightsalmon |
#FFA07A |
azure |
#F0FFFF |
lightseagreen |
#20B2AA |
beige |
#F5F5DC |
lightskyblue |
#87CEFA |
bisque |
#FFE4C4 |
lightslategray |
#778899 |
blanchedalmond |
#FFEBCD |
lightsteelblue |
#B0C4DE |
blueviolet |
#8A2BE2 |
lightyellow |
#FFFFE0 |
brown |
#A52A2A |
limegreen |
#32CD32 |
burlywood |
#DEB887 |
linen |
#FAF0E6 |
cadetblue |
#5F9EA0 |
mediumaquamarine |
#66CDAA |
chartreuse |
#7FFF00 |
mediumblue |
#0000CD |
chocolate |
#D2691E |
mediumorchid |
#BA55D3 |
coral |
#FF7F50 |
mediumpurple |
#9370DB |
cornflowerblue |
#6495ED |
mediumseagreen |
#3CB371 |
cornsilk |
#FFF8DC |
mediumslateblue |
#7B68EE |
crimson |
#DC143C |
mediumspringgreen |
#00FA9A |
darkblue |
#00008B |
mediumturquoise |
#48D1CC |
darkcyan |
#008B8B |
mediumvioletred |
#C71585 |
darkgoldenrod |
#B8860B |
midnightblue |
#191970 |
darkgray |
#A9A9A9 |
mintcream |
#F5FFFA |
darkgreen |
#006400 |
mistyrose |
#FFE4E1 |
darkkhaki |
#BDB76B |
moccasin |
#FFE4B5 |
darkmagenta |
#8B008B |
navajowhite |
#FFDEAD |
darkolivegreen |
#556B2F |
oldlace |
#FDF5E6 |
darkorange |
#FF8C00 |
olivedrab |
#6B8E23 |
darkorchid |
#9932CC |
orangered |
#FF4500 |
darkred |
#8B0000 |
orchid |
#DA70D6 |
darksalmon |
#E9967A |
palegoldenrod |
#EEE8AA |
darkseagreen |
#8FBC8F |
palegreen |
#98FB98 |
darkslateblue |
#483D8B |
paleturquoise |
#AFEEEE |
darkslategray |
#2F4F4F |
palevioletred |
#DB7093 |
darkturquoise |
#00CED1 |
papayawhip |
#FFEFD5 |
darkviolet |
#9400D3 |
peachpuff |
#FFDAB9 |
deeppink |
#FF1493 |
peru |
#CD853F |
deepskyblue |
#00BFFF |
pink |
#FFC0CB |
dimgray |
#696969 |
plum |
#DDA0DD |
dodgerblue |
#1E90FF |
powderblue |
#B0E0E6 |
firebrick |
#B22222 |
rosybrown |
#BC8F8F |
floralwhite |
#FFFAF0 |
royalblue |
#4169E1 |
forestgreen |
#228B22 |
saddlebrown |
#8B4513 |
gainsboro |
#DCDCDC |
salmon |
#FA8072 |
ghostwhite |
#F8F8FF |
sandybrown |
#F4A460 |
goldenrod |
#DAA520 |
seagreen |
#2E8B57 |
greenyellow |
#ADFF2F |
seashell |
#FFF5EE |
honeydew |
#F0FFF0 |
sienna |
#A0522D |
hotpink |
#FF69B4 |
skyblue |
#87CEEB |
indianred |
#CD5C5C |
slateblue |
#6A5ACD |
ivory |
#FFFFF0 |
slategray |
#708090 |
khaki |
#F0E68C |
snow |
#FFFAFA |
lavender |
#E6E6FA |
springgreen |
#00FF7F |
lavenderblush |
#FFF0F5 |
steelblue |
#4682B4 |
lawngreen |
#7CFC00 |
tan |
#D2B48C |
lemonchiffon |
#FFFACD |
thistle |
#D8BFD8 |
lightblue |
#ADD8E6 |
tomato |
#FF6347 |
lightcoral |
#F08080 |
turquoise |
#40E0D0 |
lightcyan |
#E0FFFF |
wheat |
#F5DEB3 |
lightgoldenrodyellow |
#FAFAD2 |
whitesmoke |
#F5F5F5 |
lightgreen |
#90EE90 |
yellowgreen |
#9ACD32 |
Шестнадцатеричная система счисления с точки зрения математики ничем не отличается от любой другой, но имеет шестнадцать цифр: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Недостающие цифры заменяются латинскими буквами. Если в десятичной системе 9+1=10, то в шестнадцатеричной системе 9+1=A. Двухразрядные шестнадцатеричные числа от 00 до FF соответствуют десятичным числам от 0 до 255.
Поэтому для обозначения интенсивности каждого базового цвета предусмотрено 256 градаций.
Работая с палитрой цветов графического редактора Photoshop, можно видеть числовую характеристику выбранного цвета по системе RGB как в десятичном представлении, так и в шестнадцатеричном.
Для работы с нестандартной системой счисления удобно использовать программу Калькулятор. Если переключить его командой Вид → Инженерный, то можно получить инструмент для перевода чисел из одной системы счисления в другую. Например, для перевода числа A5 в десятичную форму надо выполнить следующие действия:
1. Установить переключатель в положение Hex (рис. 1.6);
2. Набрать число A5 (можно использовать как клавиатуру, так и кнопки калькулятора);
3. Установить переключатель в положение Dec.
На табло Калькулятора высветится то же число, но в десятичном представлении: 165.
Рис. 1.6. Программа Калькулятор в режиме работы с шестнадцатеричными числами
По аналогии производится и обратное преобразование.Середине шкалы яркости каждого базового цвета соответствует код 80. Если интенсивность цвета меньше этого предела, цвет можно считать темным, если выше — светлым. Если все три составляющие цветов равны, получается один из оттенков серого цвета.
В таблице ниже представлены все двухразрядные шестнадцатеричные числа.
dec |
hex |
dec |
hex |
dec |
hex |
dec |
hex |
dec |
hex |
dec |
hex |
dec |
hex |
dec |
hex |
0 |
00 |
32 |
20 |
64 |
40 |
96 |
60 |
128 |
80 |
160 |
A0 |
92 |
C0 |
224 |
E0 |
1 |
01 |
33 |
21 |
65 |
41 |
97 |
61 |
129 |
81 |
161 |
A1 |
193 |
C1 |
225 |
E1 |
2 |
02 |
34 |
22 |
66 |
42 |
98 |
62 |
130 |
82 |
162 |
A2 |
194 |
C2 |
226 |
E2 |
3 |
03 |
35 |
23 |
67 |
43 |
99 |
63 |
131 |
83 |
163 |
A3 |
195 |
C3 |
227 |
E3 |
4 |
04 |
36 |
24 |
68 |
44 |
100 |
64 |
132 |
84 |
164 |
A4 |
196 |
C4 |
228 |
E4 |
5 |
05 |
37 |
25 |
69 |
45 |
101 |
65 |
133 |
85 |
165 |
A5 |
197 |
C5 |
229 |
E5 |
6 |
06 |
38 |
26 |
70 |
46 |
102 |
66 |
134 |
86 |
166 |
A6 |
198 |
C6 |
230 |
E6 |
7 |
07 |
39 |
27 |
71 |
47 |
103 |
67 |
135 |
87 |
167 |
A7 |
199 |
C7 |
231 |
E7 |
8 |
08 |
40 |
28 |
72 |
48 |
104 |
68 |
136 |
88 |
168 |
A8 |
200 |
C8 |
232 |
E8 |
9 |
09 |
41 |
29 |
73 |
49 |
105 |
69 |
137 |
89 |
169 |
A9 |
201 |
C9 |
233 |
E9 |
10 |
0A |
42 |
2A |
74 |
4A |
106 |
6A |
138 |
8A |
170 |
AA |
202 |
CA |
234 |
EA |
11 |
0B |
43 |
2B |
75 |
4B |
107 |
6B |
139 |
8B |
171 |
AB |
203 |
CB |
235 |
EB |
12 |
0C |
44 |
2C |
76 |
4C |
108 |
6C |
140 |
8C |
172 |
AC |
204 |
CC |
236 |
EC |
13 |
0D |
45 |
2D |
77 |
4D |
109 |
6D |
141 |
8D |
173 |
AD |
205 |
CD |
237 |
ED |
14 |
0E |
46 |
2E |
78 |
4E |
110 |
6E |
142 |
8E |
174 |
AE |
206 |
CE |
238 |
EE |
15 |
0F |
47 |
2F |
79 |
4F |
111 |
6F |
143 |
8F |
175 |
AF |
207 |
CF |
239 |
EF |
16 |
10 |
48 |
30 |
80 |
50 |
112 |
70 |
144 |
90 |
176 |
B0 |
208 |
D0 |
240 |
F0 |
17 |
11 |
49 |
31 |
81 |
51 |
113 |
71 |
145 |
91 |
177 |
B1 |
209 |
D1 |
241 |
F1 |
18 |
12 |
50 |
32 |
82 |
52 |
114 |
72 |
146 |
92 |
178 |
B2 |
210 |
D2 |
242 |
F2 |
19 |
13 |
51 |
33 |
83 |
53 |
115 |
73 |
147 |
93 |
179 |
B3 |
211 |
D3 |
243 |
F3 |
20 |
14 |
52 |
34 |
84 |
54 |
116 |
74 |
148 |
94 |
180 |
B4 |
212 |
D4 |
244 |
F4 |
21 |
15 |
53 |
35 |
85 |
55 |
117 |
75 |
149 |
95 |
181 |
B5 |
213 |
D5 |
245 |
F5 |
22 |
16 |
54 |
36 |
86 |
56 |
118 |
76 |
150 |
96 |
182 |
B6 |
214 |
D6 |
246 |
F6 |
23 |
17 |
55 |
37 |
87 |
57 |
119 |
77 |
151 |
97 |
183 |
B7 |
215 |
D7 |
247 |
F7 |
24 |
18 |
56 |
38 |
88 |
58 |
120 |
78 |
152 |
98 |
184 |
B8 |
216 |
D8 |
248 |
F8 |
25 |
19 |
57 |
39 |
89 |
59 |
121 |
79 |
153 |
99 |
185 |
B9 |
217 |
D9 |
249 |
F9 |
26 |
1A |
58 |
3A |
90 |
5A |
122 |
7A |
154 |
9A |
186 |
BA |
218 |
DA |
250 |
FA |
27 |
1B |
59 |
3B |
91 |
5B |
123 |
7B |
155 |
9B |
187 |
BB |
219 |
DB |
251 |
FB |
28 |
1C |
60 |
3C |
92 |
5C |
124 |
7C |
156 |
9C |
188 |
BC |
220 |
DC |
252 |
FC |
29 |
1D |
61 |
3D |
93 |
5D |
125 |
7D |
157 |
9D |
189 |
BD |
221 |
DD |
253 |
FD |
30 |
1E |
62 |
3E |
94 |
5E |
126 |
7E |
158 |
9E |
190 |
BE |
222 |
DE |
254 |
FE |
31 |
1F |
63 |
3F |
95 |
5F |
127 |
7F |
159 |
9F |
191 |
BF |
223 |
DF |
255 |
FF |
© TEKCT.RU, А. Гончаров, 2007-2022
|
|