вторник, 10 июня 2014 г.

[вёрстка] Цвета в HTML

В этой статье я расскажу о том, как задаются цвета в HTML и CSS.

Как вы, вероятно, знаете, цвет каждой точки (пикселя) экрана формируется из трёх субпикселей: красного (R), зелёного (G) и синего (B). Яркость свечения каждого из субпикселей определяет итоговый цвет, который мы увидим на экране. Вот базовые цвета монитора:

ЦветОписание
 черный: все три субпикселя погашены
 красный: красный субпиксель (R) горит на полную яркость, другие два субпикселя погашены
 зеленый: зеленый субпиксель (G) горит на полную яркость, другие два субпикселя погашены
 синий: синий субпиксель (B) горит на полную яркость, другие два субпикселя погашены
 белый: все три субпикселя горят на полную яркость

Регулируя яркость субпикселей от минимальной до максимальной, можно получить все остальные цвета и оттенки.

256 оттенков каждого субпикселя

Каким способом задаётся яркость свечения субпикселей? Способы могут быть разными. Например, можно принять отсутствие свечения за 0, а самое яркое свечение за 1, и все промежуточные значения записывать как десятичнфе дроби. Или можно записывать яркость в процентах от 0% до 100%. Но в компьютерах чаще всего применяется другой способ: яркость каждого субпикселя записывается числом от 0 до 255. Всего получается 256 возможных значений (отенков).

В таблице ниже представлены все возможные значения яркости для каждого из трех субпикселей. Если вы наведете мышку на любой оттенок на шкале, то во всплывающей подсказке увидите значение яркости, которое этому оттенку соответствует:

Шкала яркости красного:
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
Шкала яркости зелёного:
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
Шкала яркости синего:
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255

Таким образом, любой цвет, который может быть отображён на экране монитора, можно записать при помощи трёх чисел, соответствующих яркости красного, зелёного и синего субпикселя. 5 цветов, которые мы упоминали выше, записываются так:

ЦветЗначение R (красного субпикселя)Значение G (красного субпикселя)Значение B (синего субпикселя)
 000
 25500
 02550
 00255
 255255255

Возьмём несколько произвольных чисел и посмотрим, какие цвета получатся:

ЦветЗначение R (красного субпикселя)Значение G (красного субпикселя)Значение B (синего субпикселя)
 2552550
 0255255
 2550255
 128128128
 2002500
 2052140
 15035110
 0200100
 25518045
...и так далее

Для получения оттенков серого, мы должны задать для всех трех пикселей одинаковые значения яркости. Смешиваясь в равной пропорции, 3 опорных цвета воспринимаются человеческим глазом как нейтральный серый цвет (во всяком случае, если у вас исправный и правильно настроенный монитор). Вот несколько серых оттенков между черным и белым, с шагом в 16 единиц яркости:

ЦветЗначение R (красного субпикселя)Значение G (красного субпикселя)Значение B (синего субпикселя)
 000
 161616
 323232
 484848
 646464
 808080
 969696
 112112112
 128128128
 144144144
 160160160
 176176176
 192192192
 208208208
 224224224
 240240240
 255255255

Сколько всего оттенков может отображать монитор

Три субпикселя, каждый из которых имеет 256 ступеней яркости, дают нам в совокупности 256 x 256 x 256 = 16777216 оттенков, т.е. более 16 миллионов. Однако, не все мониторы способны оторазить такое количество цветов.

Многие дешевые жидкокристаллические мониторы могут передавать всего лишь 262 тысячи тонов. Различие между близкими оттенками на таких мониторах терятся. ЖК-монитор с дешевой матрицей воспринимает не полный набор из 256-ти яркостей, а урезанный до 64-х возможных значений. Т.е. значения 0, 1, 2, 3 он воспринимает как 0, значения 4, 5, 6, 7 воспринимает как 4 и так далее.

Дорогие мониторы, оснащенные качественными матрицами, способны изобразить все 16.7 милилонов тонов.

ЭЛТ-мониторы могут отображать любое число оттенков.

Как правильно записывать цвета в HTML и CSS

Существует два основных варианта записи цветов в HTML и CSS. Первый вариант: вы пишете ключевое слово rgb а затем в скобках указываете значения яркости для красного, зелёного и синего. Например: rgb(0, 0, 0,), rgb(200, 250, 0), rgb(150, 35, 110) и так далее.

Второй способ – шестнадцатеричная запись. Первым идёт символ решетки (#), а затем без пробела 6 цифр: первые две цифры – значение красного в шестнадцатеричной форме, затем 2 цифры – яркость зелёного, и еще 2 цифры – яркость синего. Например:

ЦветДесятичная записьШестнадцатеричная запись
 rgb(0, 0, 0)#000000
 rgb(255, 0, 0)#FF0000
 rgb(0, 255, 0)#00FF00
 rgb(0, 0, 255)#0000FF
 rgb(255, 255, 255)#FFFFFF
 rgb(255, 255, 0)#FFFF00
 rgb(0, 255, 255)#00FFFF
 rgb(255, 0, 255)#FF00FF
 rgb(128, 128, 128)#808080
 rgb(200, 250, 0)#C8FA00
 rgb(20, 52, 140)#14348C
 rgb(150, 35, 110)#96236E
 rgb(0, 200, 100)#00C864
 rgb(255, 180, 45)#FFB42D

Чтобы перевести десятичную запись цвета в шестнадцатиричную или шестнадцатиричную в десятичную, вы можете использовать следующий калькулятор:

Десятичная запись: 
Шестнадцатиричная запись:

Сокращенная шестнадцатиричная запись

Существует сокращенный вариант шестнадцатиричной записи цвета. Если запись имеет вид #XXYYZZ, то её можно сократить до #XYZ. Например, вместо #FF0088 можно писать #F08, вместо #FFFF00 можно писать #FF0 и т.п. Еще несколько примеров:
Шестнадцатиричная записьСокращенная запись
#000000#000
#FF0000#F00
#00FF00#0F0
#00FF00#00F
#FFFFFF#FFF
#00FFFF#0FF
#888888#888
#11BB00#1B0
#33DD33#3D3

В такой записи может быть выражено 16 x 16 x 16 = 4096 оттенков. Сокращенная запись удобна, когда вы работаете над оформлением сайта вручную, без использования продвинутых инструментов. 4096 цветов – достаточно, чтобы среди них подобрать нужные тона, и при этом запись достаточно компактная, так что вы можете запомнить коды нужных цветов и держать из в уме, без необходимости обращаться к графическому редактору. Вот полный список этих тонов:

#000#001#002#003#004#005#006#007#008#009#00A#00B#00C#00D#00E#00F
#010#011#012#013#014#015#016#017#018#019#01A#01B#01C#01D#01E#01F
#020#021#022#023#024#025#026#027#028#029#02A#02B#02C#02D#02E#02F
#030#031#032#033#034#035#036#037#038#039#03A#03B#03C#03D#03E#03F
#040#041#042#043#044#045#046#047#048#049#04A#04B#04C#04D#04E#04F
#050#051#052#053#054#055#056#057#058#059#05A#05B#05C#05D#05E#05F
#060#061#062#063#064#065#066#067#068#069#06A#06B#06C#06D#06E#06F
#070#071#072#073#074#075#076#077#078#079#07A#07B#07C#07D#07E#07F
#080#081#082#083#084#085#086#087#088#089#08A#08B#08C#08D#08E#08F
#090#091#092#093#094#095#096#097#098#099#09A#09B#09C#09D#09E#09F
#0A0#0A1#0A2#0A3#0A4#0A5#0A6#0A7#0A8#0A9#0AA#0AB#0AC#0AD#0AE#0AF
#0B0#0B1#0B2#0B3#0B4#0B5#0B6#0B7#0B8#0B9#0BA#0BB#0BC#0BD#0BE#0BF
#0C0#0C1#0C2#0C3#0C4#0C5#0C6#0C7#0C8#0C9#0CA#0CB#0CC#0CD#0CE#0CF
#0D0#0D1#0D2#0D3#0D4#0D5#0D6#0D7#0D8#0D9#0DA#0DB#0DC#0DD#0DE#0DF
#0E0#0E1#0E2#0E3#0E4#0E5#0E6#0E7#0E8#0E9#0EA#0EB#0EC#0ED#0EE#0EF
#0F0#0F1#0F2#0F3#0F4#0F5#0F6#0F7#0F8#0F9#0FA#0FB#0FC#0FD#0FE#0FF
#100#101#102#103#104#105#106#107#108#109#10A#10B#10C#10D#10E#10F
#110#111#112#113#114#115#116#117#118#119#11A#11B#11C#11D#11E#11F
#120#121#122#123#124#125#126#127#128#129#12A#12B#12C#12D#12E#12F
#130#131#132#133#134#135#136#137#138#139#13A#13B#13C#13D#13E#13F
#140#141#142#143#144#145#146#147#148#149#14A#14B#14C#14D#14E#14F
#150#151#152#153#154#155#156#157#158#159#15A#15B#15C#15D#15E#15F
#160#161#162#163#164#165#166#167#168#169#16A#16B#16C#16D#16E#16F
#170#171#172#173#174#175#176#177#178#179#17A#17B#17C#17D#17E#17F
#180#181#182#183#184#185#186#187#188#189#18A#18B#18C#18D#18E#18F
#190#191#192#193#194#195#196#197#198#199#19A#19B#19C#19D#19E#19F
#1A0#1A1#1A2#1A3#1A4#1A5#1A6#1A7#1A8#1A9#1AA#1AB#1AC#1AD#1AE#1AF
#1B0#1B1#1B2#1B3#1B4#1B5#1B6#1B7#1B8#1B9#1BA#1BB#1BC#1BD#1BE#1BF
#1C0#1C1#1C2#1C3#1C4#1C5#1C6#1C7#1C8#1C9#1CA#1CB#1CC#1CD#1CE#1CF
#1D0#1D1#1D2#1D3#1D4#1D5#1D6#1D7#1D8#1D9#1DA#1DB#1DC#1DD#1DE#1DF
#1E0#1E1#1E2#1E3#1E4#1E5#1E6#1E7#1E8#1E9#1EA#1EB#1EC#1ED#1EE#1EF
#1F0#1F1#1F2#1F3#1F4#1F5#1F6#1F7#1F8#1F9#1FA#1FB#1FC#1FD#1FE#1FF
#200#201#202#203#204#205#206#207#208#209#20A#20B#20C#20D#20E#20F
#210#211#212#213#214#215#216#217#218#219#21A#21B#21C#21D#21E#21F
#220#221#222#223#224#225#226#227#228#229#22A#22B#22C#22D#22E#22F
#230#231#232#233#234#235#236#237#238#239#23A#23B#23C#23D#23E#23F
#240#241#242#243#244#245#246#247#248#249#24A#24B#24C#24D#24E#24F
#250#251#252#253#254#255#256#257#258#259#25A#25B#25C#25D#25E#25F
#260#261#262#263#264#265#266#267#268#269#26A#26B#26C#26D#26E#26F
#270#271#272#273#274#275#276#277#278#279#27A#27B#27C#27D#27E#27F
#280#281#282#283#284#285#286#287#288#289#28A#28B#28C#28D#28E#28F
#290#291#292#293#294#295#296#297#298#299#29A#29B#29C#29D#29E#29F
#2A0#2A1#2A2#2A3#2A4#2A5#2A6#2A7#2A8#2A9#2AA#2AB#2AC#2AD#2AE#2AF
#2B0#2B1#2B2#2B3#2B4#2B5#2B6#2B7#2B8#2B9#2BA#2BB#2BC#2BD#2BE#2BF
#2C0#2C1#2C2#2C3#2C4#2C5#2C6#2C7#2C8#2C9#2CA#2CB#2CC#2CD#2CE#2CF
#2D0#2D1#2D2#2D3#2D4#2D5#2D6#2D7#2D8#2D9#2DA#2DB#2DC#2DD#2DE#2DF
#2E0#2E1#2E2#2E3#2E4#2E5#2E6#2E7#2E8#2E9#2EA#2EB#2EC#2ED#2EE#2EF
#2F0#2F1#2F2#2F3#2F4#2F5#2F6#2F7#2F8#2F9#2FA#2FB#2FC#2FD#2FE#2FF
#300#301#302#303#304#305#306#307#308#309#30A#30B#30C#30D#30E#30F
#310#311#312#313#314#315#316#317#318#319#31A#31B#31C#31D#31E#31F
#320#321#322#323#324#325#326#327#328#329#32A#32B#32C#32D#32E#32F
#330#331#332#333#334#335#336#337#338#339#33A#33B#33C#33D#33E#33F
#340#341#342#343#344#345#346#347#348#349#34A#34B#34C#34D#34E#34F
#350#351#352#353#354#355#356#357#358#359#35A#35B#35C#35D#35E#35F
#360#361#362#363#364#365#366#367#368#369#36A#36B#36C#36D#36E#36F
#370#371#372#373#374#375#376#377#378#379#37A#37B#37C#37D#37E#37F
#380#381#382#383#384#385#386#387#388#389#38A#38B#38C#38D#38E#38F
#390#391#392#393#394#395#396#397#398#399#39A#39B#39C#39D#39E#39F
#3A0#3A1#3A2#3A3#3A4#3A5#3A6#3A7#3A8#3A9#3AA#3AB#3AC#3AD#3AE#3AF
#3B0#3B1#3B2#3B3#3B4#3B5#3B6#3B7#3B8#3B9#3BA#3BB#3BC#3BD#3BE#3BF
#3C0#3C1#3C2#3C3#3C4#3C5#3C6#3C7#3C8#3C9#3CA#3CB#3CC#3CD#3CE#3CF
#3D0#3D1#3D2#3D3#3D4#3D5#3D6#3D7#3D8#3D9#3DA#3DB#3DC#3DD#3DE#3DF
#3E0#3E1#3E2#3E3#3E4#3E5#3E6#3E7#3E8#3E9#3EA#3EB#3EC#3ED#3EE#3EF
#3F0#3F1#3F2#3F3#3F4#3F5#3F6#3F7#3F8#3F9#3FA#3FB#3FC#3FD#3FE#3FF
#400#401#402#403#404#405#406#407#408#409#40A#40B#40C#40D#40E#40F
#410#411#412#413#414#415#416#417#418#419#41A#41B#41C#41D#41E#41F
#420#421#422#423#424#425#426#427#428#429#42A#42B#42C#42D#42E#42F
#430#431#432#433#434#435#436#437#438#439#43A#43B#43C#43D#43E#43F
#440#441#442#443#444#445#446#447#448#449#44A#44B#44C#44D#44E#44F
#450#451#452#453#454#455#456#457#458#459#45A#45B#45C#45D#45E#45F
#460#461#462#463#464#465#466#467#468#469#46A#46B#46C#46D#46E#46F
#470#471#472#473#474#475#476#477#478#479#47A#47B#47C#47D#47E#47F
#480#481#482#483#484#485#486#487#488#489#48A#48B#48C#48D#48E#48F
#490#491#492#493#494#495#496#497#498#499#49A#49B#49C#49D#49E#49F
#4A0#4A1#4A2#4A3#4A4#4A5#4A6#4A7#4A8#4A9#4AA#4AB#4AC#4AD#4AE#4AF
#4B0#4B1#4B2#4B3#4B4#4B5#4B6#4B7#4B8#4B9#4BA#4BB#4BC#4BD#4BE#4BF
#4C0#4C1#4C2#4C3#4C4#4C5#4C6#4C7#4C8#4C9#4CA#4CB#4CC#4CD#4CE#4CF
#4D0#4D1#4D2#4D3#4D4#4D5#4D6#4D7#4D8#4D9#4DA#4DB#4DC#4DD#4DE#4DF
#4E0#4E1#4E2#4E3#4E4#4E5#4E6#4E7#4E8#4E9#4EA#4EB#4EC#4ED#4EE#4EF
#4F0#4F1#4F2#4F3#4F4#4F5#4F6#4F7#4F8#4F9#4FA#4FB#4FC#4FD#4FE#4FF
#500#501#502#503#504#505#506#507#508#509#50A#50B#50C#50D#50E#50F
#510#511#512#513#514#515#516#517#518#519#51A#51B#51C#51D#51E#51F
#520#521#522#523#524#525#526#527#528#529#52A#52B#52C#52D#52E#52F
#530#531#532#533#534#535#536#537#538#539#53A#53B#53C#53D#53E#53F
#540#541#542#543#544#545#546#547#548#549#54A#54B#54C#54D#54E#54F
#550#551#552#553#554#555#556#557#558#559#55A#55B#55C#55D#55E#55F
#560#561#562#563#564#565#566#567#568#569#56A#56B#56C#56D#56E#56F
#570#571#572#573#574#575#576#577#578#579#57A#57B#57C#57D#57E#57F
#580#581#582#583#584#585#586#587#588#589#58A#58B#58C#58D#58E#58F
#590#591#592#593#594#595#596#597#598#599#59A#59B#59C#59D#59E#59F
#5A0#5A1#5A2#5A3#5A4#5A5#5A6#5A7#5A8#5A9#5AA#5AB#5AC#5AD#5AE#5AF
#5B0#5B1#5B2#5B3#5B4#5B5#5B6#5B7#5B8#5B9#5BA#5BB#5BC#5BD#5BE#5BF
#5C0#5C1#5C2#5C3#5C4#5C5#5C6#5C7#5C8#5C9#5CA#5CB#5CC#5CD#5CE#5CF
#5D0#5D1#5D2#5D3#5D4#5D5#5D6#5D7#5D8#5D9#5DA#5DB#5DC#5DD#5DE#5DF
#5E0#5E1#5E2#5E3#5E4#5E5#5E6#5E7#5E8#5E9#5EA#5EB#5EC#5ED#5EE#5EF
#5F0#5F1#5F2#5F3#5F4#5F5#5F6#5F7#5F8#5F9#5FA#5FB#5FC#5FD#5FE#5FF
#600#601#602#603#604#605#606#607#608#609#60A#60B#60C#60D#60E#60F
#610#611#612#613#614#615#616#617#618#619#61A#61B#61C#61D#61E#61F
#620#621#622#623#624#625#626#627#628#629#62A#62B#62C#62D#62E#62F
#630#631#632#633#634#635#636#637#638#639#63A#63B#63C#63D#63E#63F
#640#641#642#643#644#645#646#647#648#649#64A#64B#64C#64D#64E#64F
#650#651#652#653#654#655#656#657#658#659#65A#65B#65C#65D#65E#65F
#660#661#662#663#664#665#666#667#668#669#66A#66B#66C#66D#66E#66F
#670#671#672#673#674#675#676#677#678#679#67A#67B#67C#67D#67E#67F
#680#681#682#683#684#685#686#687#688#689#68A#68B#68C#68D#68E#68F
#690#691#692#693#694#695#696#697#698#699#69A#69B#69C#69D#69E#69F
#6A0#6A1#6A2#6A3#6A4#6A5#6A6#6A7#6A8#6A9#6AA#6AB#6AC#6AD#6AE#6AF
#6B0#6B1#6B2#6B3#6B4#6B5#6B6#6B7#6B8#6B9#6BA#6BB#6BC#6BD#6BE#6BF
#6C0#6C1#6C2#6C3#6C4#6C5#6C6#6C7#6C8#6C9#6CA#6CB#6CC#6CD#6CE#6CF
#6D0#6D1#6D2#6D3#6D4#6D5#6D6#6D7#6D8#6D9#6DA#6DB#6DC#6DD#6DE#6DF
#6E0#6E1#6E2#6E3#6E4#6E5#6E6#6E7#6E8#6E9#6EA#6EB#6EC#6ED#6EE#6EF
#6F0#6F1#6F2#6F3#6F4#6F5#6F6#6F7#6F8#6F9#6FA#6FB#6FC#6FD#6FE#6FF
#700#701#702#703#704#705#706#707#708#709#70A#70B#70C#70D#70E#70F
#710#711#712#713#714#715#716#717#718#719#71A#71B#71C#71D#71E#71F
#720#721#722#723#724#725#726#727#728#729#72A#72B#72C#72D#72E#72F
#730#731#732#733#734#735#736#737#738#739#73A#73B#73C#73D#73E#73F
#740#741#742#743#744#745#746#747#748#749#74A#74B#74C#74D#74E#74F
#750#751#752#753#754#755#756#757#758#759#75A#75B#75C#75D#75E#75F
#760#761#762#763#764#765#766#767#768#769#76A#76B#76C#76D#76E#76F
#770#771#772#773#774#775#776#777#778#779#77A#77B#77C#77D#77E#77F
#780#781#782#783#784#785#786#787#788#789#78A#78B#78C#78D#78E#78F
#790#791#792#793#794#795#796#797#798#799#79A#79B#79C#79D#79E#79F
#7A0#7A1#7A2#7A3#7A4#7A5#7A6#7A7#7A8#7A9#7AA#7AB#7AC#7AD#7AE#7AF
#7B0#7B1#7B2#7B3#7B4#7B5#7B6#7B7#7B8#7B9#7BA#7BB#7BC#7BD#7BE#7BF
#7C0#7C1#7C2#7C3#7C4#7C5#7C6#7C7#7C8#7C9#7CA#7CB#7CC#7CD#7CE#7CF
#7D0#7D1#7D2#7D3#7D4#7D5#7D6#7D7#7D8#7D9#7DA#7DB#7DC#7DD#7DE#7DF
#7E0#7E1#7E2#7E3#7E4#7E5#7E6#7E7#7E8#7E9#7EA#7EB#7EC#7ED#7EE#7EF
#7F0#7F1#7F2#7F3#7F4#7F5#7F6#7F7#7F8#7F9#7FA#7FB#7FC#7FD#7FE#7FF
#800#801#802#803#804#805#806#807#808#809#80A#80B#80C#80D#80E#80F
#810#811#812#813#814#815#816#817#818#819#81A#81B#81C#81D#81E#81F
#820#821#822#823#824#825#826#827#828#829#82A#82B#82C#82D#82E#82F
#830#831#832#833#834#835#836#837#838#839#83A#83B#83C#83D#83E#83F
#840#841#842#843#844#845#846#847#848#849#84A#84B#84C#84D#84E#84F
#850#851#852#853#854#855#856#857#858#859#85A#85B#85C#85D#85E#85F
#860#861#862#863#864#865#866#867#868#869#86A#86B#86C#86D#86E#86F
#870#871#872#873#874#875#876#877#878#879#87A#87B#87C#87D#87E#87F
#880#881#882#883#884#885#886#887#888#889#88A#88B#88C#88D#88E#88F
#890#891#892#893#894#895#896#897#898#899#89A#89B#89C#89D#89E#89F
#8A0#8A1#8A2#8A3#8A4#8A5#8A6#8A7#8A8#8A9#8AA#8AB#8AC#8AD#8AE#8AF
#8B0#8B1#8B2#8B3#8B4#8B5#8B6#8B7#8B8#8B9#8BA#8BB#8BC#8BD#8BE#8BF
#8C0#8C1#8C2#8C3#8C4#8C5#8C6#8C7#8C8#8C9#8CA#8CB#8CC#8CD#8CE#8CF
#8D0#8D1#8D2#8D3#8D4#8D5#8D6#8D7#8D8#8D9#8DA#8DB#8DC#8DD#8DE#8DF
#8E0#8E1#8E2#8E3#8E4#8E5#8E6#8E7#8E8#8E9#8EA#8EB#8EC#8ED#8EE#8EF
#8F0#8F1#8F2#8F3#8F4#8F5#8F6#8F7#8F8#8F9#8FA#8FB#8FC#8FD#8FE#8FF
#900#901#902#903#904#905#906#907#908#909#90A#90B#90C#90D#90E#90F
#910#911#912#913#914#915#916#917#918#919#91A#91B#91C#91D#91E#91F
#920#921#922#923#924#925#926#927#928#929#92A#92B#92C#92D#92E#92F
#930#931#932#933#934#935#936#937#938#939#93A#93B#93C#93D#93E#93F
#940#941#942#943#944#945#946#947#948#949#94A#94B#94C#94D#94E#94F
#950#951#952#953#954#955#956#957#958#959#95A#95B#95C#95D#95E#95F
#960#961#962#963#964#965#966#967#968#969#96A#96B#96C#96D#96E#96F
#970#971#972#973#974#975#976#977#978#979#97A#97B#97C#97D#97E#97F
#980#981#982#983#984#985#986#987#988#989#98A#98B#98C#98D#98E#98F
#990#991#992#993#994#995#996#997#998#999#99A#99B#99C#99D#99E#99F
#9A0#9A1#9A2#9A3#9A4#9A5#9A6#9A7#9A8#9A9#9AA#9AB#9AC#9AD#9AE#9AF
#9B0#9B1#9B2#9B3#9B4#9B5#9B6#9B7#9B8#9B9#9BA#9BB#9BC#9BD#9BE#9BF
#9C0#9C1#9C2#9C3#9C4#9C5#9C6#9C7#9C8#9C9#9CA#9CB#9CC#9CD#9CE#9CF
#9D0#9D1#9D2#9D3#9D4#9D5#9D6#9D7#9D8#9D9#9DA#9DB#9DC#9DD#9DE#9DF
#9E0#9E1#9E2#9E3#9E4#9E5#9E6#9E7#9E8#9E9#9EA#9EB#9EC#9ED#9EE#9EF
#9F0#9F1#9F2#9F3#9F4#9F5#9F6#9F7#9F8#9F9#9FA#9FB#9FC#9FD#9FE#9FF
#A00#A01#A02#A03#A04#A05#A06#A07#A08#A09#A0A#A0B#A0C#A0D#A0E#A0F
#A10#A11#A12#A13#A14#A15#A16#A17#A18#A19#A1A#A1B#A1C#A1D#A1E#A1F
#A20#A21#A22#A23#A24#A25#A26#A27#A28#A29#A2A#A2B#A2C#A2D#A2E#A2F
#A30#A31#A32#A33#A34#A35#A36#A37#A38#A39#A3A#A3B#A3C#A3D#A3E#A3F
#A40#A41#A42#A43#A44#A45#A46#A47#A48#A49#A4A#A4B#A4C#A4D#A4E#A4F
#A50#A51#A52#A53#A54#A55#A56#A57#A58#A59#A5A#A5B#A5C#A5D#A5E#A5F
#A60#A61#A62#A63#A64#A65#A66#A67#A68#A69#A6A#A6B#A6C#A6D#A6E#A6F
#A70#A71#A72#A73#A74#A75#A76#A77#A78#A79#A7A#A7B#A7C#A7D#A7E#A7F
#A80#A81#A82#A83#A84#A85#A86#A87#A88#A89#A8A#A8B#A8C#A8D#A8E#A8F
#A90#A91#A92#A93#A94#A95#A96#A97#A98#A99#A9A#A9B#A9C#A9D#A9E#A9F
#AA0#AA1#AA2#AA3#AA4#AA5#AA6#AA7#AA8#AA9#AAA#AAB#AAC#AAD#AAE#AAF
#AB0#AB1#AB2#AB3#AB4#AB5#AB6#AB7#AB8#AB9#ABA#ABB#ABC#ABD#ABE#ABF
#AC0#AC1#AC2#AC3#AC4#AC5#AC6#AC7#AC8#AC9#ACA#ACB#ACC#ACD#ACE#ACF
#AD0#AD1#AD2#AD3#AD4#AD5#AD6#AD7#AD8#AD9#ADA#ADB#ADC#ADD#ADE#ADF
#AE0#AE1#AE2#AE3#AE4#AE5#AE6#AE7#AE8#AE9#AEA#AEB#AEC#AED#AEE#AEF
#AF0#AF1#AF2#AF3#AF4#AF5#AF6#AF7#AF8#AF9#AFA#AFB#AFC#AFD#AFE#AFF
#B00#B01#B02#B03#B04#B05#B06#B07#B08#B09#B0A#B0B#B0C#B0D#B0E#B0F
#B10#B11#B12#B13#B14#B15#B16#B17#B18#B19#B1A#B1B#B1C#B1D#B1E#B1F
#B20#B21#B22#B23#B24#B25#B26#B27#B28#B29#B2A#B2B#B2C#B2D#B2E#B2F
#B30#B31#B32#B33#B34#B35#B36#B37#B38#B39#B3A#B3B#B3C#B3D#B3E#B3F
#B40#B41#B42#B43#B44#B45#B46#B47#B48#B49#B4A#B4B#B4C#B4D#B4E#B4F
#B50#B51#B52#B53#B54#B55#B56#B57#B58#B59#B5A#B5B#B5C#B5D#B5E#B5F
#B60#B61#B62#B63#B64#B65#B66#B67#B68#B69#B6A#B6B#B6C#B6D#B6E#B6F
#B70#B71#B72#B73#B74#B75#B76#B77#B78#B79#B7A#B7B#B7C#B7D#B7E#B7F
#B80#B81#B82#B83#B84#B85#B86#B87#B88#B89#B8A#B8B#B8C#B8D#B8E#B8F
#B90#B91#B92#B93#B94#B95#B96#B97#B98#B99#B9A#B9B#B9C#B9D#B9E#B9F
#BA0#BA1#BA2#BA3#BA4#BA5#BA6#BA7#BA8#BA9#BAA#BAB#BAC#BAD#BAE#BAF
#BB0#BB1#BB2#BB3#BB4#BB5#BB6#BB7#BB8#BB9#BBA#BBB#BBC#BBD#BBE#BBF
#BC0#BC1#BC2#BC3#BC4#BC5#BC6#BC7#BC8#BC9#BCA#BCB#BCC#BCD#BCE#BCF
#BD0#BD1#BD2#BD3#BD4#BD5#BD6#BD7#BD8#BD9#BDA#BDB#BDC#BDD#BDE#BDF
#BE0#BE1#BE2#BE3#BE4#BE5#BE6#BE7#BE8#BE9#BEA#BEB#BEC#BED#BEE#BEF
#BF0#BF1#BF2#BF3#BF4#BF5#BF6#BF7#BF8#BF9#BFA#BFB#BFC#BFD#BFE#BFF
#C00#C01#C02#C03#C04#C05#C06#C07#C08#C09#C0A#C0B#C0C#C0D#C0E#C0F
#C10#C11#C12#C13#C14#C15#C16#C17#C18#C19#C1A#C1B#C1C#C1D#C1E#C1F
#C20#C21#C22#C23#C24#C25#C26#C27#C28#C29#C2A#C2B#C2C#C2D#C2E#C2F
#C30#C31#C32#C33#C34#C35#C36#C37#C38#C39#C3A#C3B#C3C#C3D#C3E#C3F
#C40#C41#C42#C43#C44#C45#C46#C47#C48#C49#C4A#C4B#C4C#C4D#C4E#C4F
#C50#C51#C52#C53#C54#C55#C56#C57#C58#C59#C5A#C5B#C5C#C5D#C5E#C5F
#C60#C61#C62#C63#C64#C65#C66#C67#C68#C69#C6A#C6B#C6C#C6D#C6E#C6F
#C70#C71#C72#C73#C74#C75#C76#C77#C78#C79#C7A#C7B#C7C#C7D#C7E#C7F
#C80#C81#C82#C83#C84#C85#C86#C87#C88#C89#C8A#C8B#C8C#C8D#C8E#C8F
#C90#C91#C92#C93#C94#C95#C96#C97#C98#C99#C9A#C9B#C9C#C9D#C9E#C9F
#CA0#CA1#CA2#CA3#CA4#CA5#CA6#CA7#CA8#CA9#CAA#CAB#CAC#CAD#CAE#CAF
#CB0#CB1#CB2#CB3#CB4#CB5#CB6#CB7#CB8#CB9#CBA#CBB#CBC#CBD#CBE#CBF
#CC0#CC1#CC2#CC3#CC4#CC5#CC6#CC7#CC8#CC9#CCA#CCB#CCC#CCD#CCE#CCF
#CD0#CD1#CD2#CD3#CD4#CD5#CD6#CD7#CD8#CD9#CDA#CDB#CDC#CDD#CDE#CDF
#CE0#CE1#CE2#CE3#CE4#CE5#CE6#CE7#CE8#CE9#CEA#CEB#CEC#CED#CEE#CEF
#CF0#CF1#CF2#CF3#CF4#CF5#CF6#CF7#CF8#CF9#CFA#CFB#CFC#CFD#CFE#CFF
#D00#D01#D02#D03#D04#D05#D06#D07#D08#D09#D0A#D0B#D0C#D0D#D0E#D0F
#D10#D11#D12#D13#D14#D15#D16#D17#D18#D19#D1A#D1B#D1C#D1D#D1E#D1F
#D20#D21#D22#D23#D24#D25#D26#D27#D28#D29#D2A#D2B#D2C#D2D#D2E#D2F
#D30#D31#D32#D33#D34#D35#D36#D37#D38#D39#D3A#D3B#D3C#D3D#D3E#D3F
#D40#D41#D42#D43#D44#D45#D46#D47#D48#D49#D4A#D4B#D4C#D4D#D4E#D4F
#D50#D51#D52#D53#D54#D55#D56#D57#D58#D59#D5A#D5B#D5C#D5D#D5E#D5F
#D60#D61#D62#D63#D64#D65#D66#D67#D68#D69#D6A#D6B#D6C#D6D#D6E#D6F
#D70#D71#D72#D73#D74#D75#D76#D77#D78#D79#D7A#D7B#D7C#D7D#D7E#D7F
#D80#D81#D82#D83#D84#D85#D86#D87#D88#D89#D8A#D8B#D8C#D8D#D8E#D8F
#D90#D91#D92#D93#D94#D95#D96#D97#D98#D99#D9A#D9B#D9C#D9D#D9E#D9F
#DA0#DA1#DA2#DA3#DA4#DA5#DA6#DA7#DA8#DA9#DAA#DAB#DAC#DAD#DAE#DAF
#DB0#DB1#DB2#DB3#DB4#DB5#DB6#DB7#DB8#DB9#DBA#DBB#DBC#DBD#DBE#DBF
#DC0#DC1#DC2#DC3#DC4#DC5#DC6#DC7#DC8#DC9#DCA#DCB#DCC#DCD#DCE#DCF
#DD0#DD1#DD2#DD3#DD4#DD5#DD6#DD7#DD8#DD9#DDA#DDB#DDC#DDD#DDE#DDF
#DE0#DE1#DE2#DE3#DE4#DE5#DE6#DE7#DE8#DE9#DEA#DEB#DEC#DED#DEE#DEF
#DF0#DF1#DF2#DF3#DF4#DF5#DF6#DF7#DF8#DF9#DFA#DFB#DFC#DFD#DFE#DFF
#E00#E01#E02#E03#E04#E05#E06#E07#E08#E09#E0A#E0B#E0C#E0D#E0E#E0F
#E10#E11#E12#E13#E14#E15#E16#E17#E18#E19#E1A#E1B#E1C#E1D#E1E#E1F
#E20#E21#E22#E23#E24#E25#E26#E27#E28#E29#E2A#E2B#E2C#E2D#E2E#E2F
#E30#E31#E32#E33#E34#E35#E36#E37#E38#E39#E3A#E3B#E3C#E3D#E3E#E3F
#E40#E41#E42#E43#E44#E45#E46#E47#E48#E49#E4A#E4B#E4C#E4D#E4E#E4F
#E50#E51#E52#E53#E54#E55#E56#E57#E58#E59#E5A#E5B#E5C#E5D#E5E#E5F
#E60#E61#E62#E63#E64#E65#E66#E67#E68#E69#E6A#E6B#E6C#E6D#E6E#E6F
#E70#E71#E72#E73#E74#E75#E76#E77#E78#E79#E7A#E7B#E7C#E7D#E7E#E7F
#E80#E81#E82#E83#E84#E85#E86#E87#E88#E89#E8A#E8B#E8C#E8D#E8E#E8F
#E90#E91#E92#E93#E94#E95#E96#E97#E98#E99#E9A#E9B#E9C#E9D#E9E#E9F
#EA0#EA1#EA2#EA3#EA4#EA5#EA6#EA7#EA8#EA9#EAA#EAB#EAC#EAD#EAE#EAF
#EB0#EB1#EB2#EB3#EB4#EB5#EB6#EB7#EB8#EB9#EBA#EBB#EBC#EBD#EBE#EBF
#EC0#EC1#EC2#EC3#EC4#EC5#EC6#EC7#EC8#EC9#ECA#ECB#ECC#ECD#ECE#ECF
#ED0#ED1#ED2#ED3#ED4#ED5#ED6#ED7#ED8#ED9#EDA#EDB#EDC#EDD#EDE#EDF
#EE0#EE1#EE2#EE3#EE4#EE5#EE6#EE7#EE8#EE9#EEA#EEB#EEC#EED#EEE#EEF
#EF0#EF1#EF2#EF3#EF4#EF5#EF6#EF7#EF8#EF9#EFA#EFB#EFC#EFD#EFE#EFF
#F00#F01#F02#F03#F04#F05#F06#F07#F08#F09#F0A#F0B#F0C#F0D#F0E#F0F
#F10#F11#F12#F13#F14#F15#F16#F17#F18#F19#F1A#F1B#F1C#F1D#F1E#F1F
#F20#F21#F22#F23#F24#F25#F26#F27#F28#F29#F2A#F2B#F2C#F2D#F2E#F2F
#F30#F31#F32#F33#F34#F35#F36#F37#F38#F39#F3A#F3B#F3C#F3D#F3E#F3F
#F40#F41#F42#F43#F44#F45#F46#F47#F48#F49#F4A#F4B#F4C#F4D#F4E#F4F
#F50#F51#F52#F53#F54#F55#F56#F57#F58#F59#F5A#F5B#F5C#F5D#F5E#F5F
#F60#F61#F62#F63#F64#F65#F66#F67#F68#F69#F6A#F6B#F6C#F6D#F6E#F6F
#F70#F71#F72#F73#F74#F75#F76#F77#F78#F79#F7A#F7B#F7C#F7D#F7E#F7F
#F80#F81#F82#F83#F84#F85#F86#F87#F88#F89#F8A#F8B#F8C#F8D#F8E#F8F
#F90#F91#F92#F93#F94#F95#F96#F97#F98#F99#F9A#F9B#F9C#F9D#F9E#F9F
#FA0#FA1#FA2#FA3#FA4#FA5#FA6#FA7#FA8#FA9#FAA#FAB#FAC#FAD#FAE#FAF
#FB0#FB1#FB2#FB3#FB4#FB5#FB6#FB7#FB8#FB9#FBA#FBB#FBC#FBD#FBE#FBF
#FC0#FC1#FC2#FC3#FC4#FC5#FC6#FC7#FC8#FC9#FCA#FCB#FCC#FCD#FCE#FCF
#FD0#FD1#FD2#FD3#FD4#FD5#FD6#FD7#FD8#FD9#FDA#FDB#FDC#FDD#FDE#FDF
#FE0#FE1#FE2#FE3#FE4#FE5#FE6#FE7#FE8#FE9#FEA#FEB#FEC#FED#FEE#FEF
#FF0#FF1#FF2#FF3#FF4#FF5#FF6#FF7#FF8#FF9#FFA#FFB#FFC#FFD#FFE#FFF

Имена цветов

Вы также можете указывать цвета по их именам. Существует 150 названий цветов, поддерживаемых всеми браузерами. Нажмите, чтобы увидеть список имён цветов.

Безопасные цвета

В 90-е годы поддержка цветов на многих видеокартах была ограничена. Хотя HTML позволял описать более 16 миллионов оттенков, многие компьютеры были способны отобразить не более 256-ти цветов. Тогда был предложен список из 216 «безопасных» цветов. Эти цвета безопасные в том плане, что они могут быть правильно отображены на любом компьютере того времени.

Современные компьютеры давно научились работать с миллионами оттенков, потому список безопасных цветов сейчас не актуален. В любом случае, вот он, если кому-нибудь он потребуется:

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Отправить комментарий