Когда было время 256-цветных мониторов применялась «безопасная палитра», конечно она применяется и сейчас. У безопасной палитры всего три главных цвета для смешивания — R G B и соответствуют значениям: 00, 33, 66, 99, CC, FF. Вообще, цветовая палитра 6x6x6 является приоритетной при выборе цвета для фона или цвета шрифта. Вашему вниманию представляется палитра «безопасных веб цветов», которые одинаково хорошо будут отображаться во всех браузерах и во всех оперативных системах.
Имя цвета для HTML
Код для HTML
R G B
Красные
IndianRed
CD 5C 5C
205 92 92
LightCoral
F0 80 80
240 128 128
Salmon
FA 80 72
250 128 114
DarkSalmon
E9 96 7A
233 150 122
LightSalmon
FF A0 7A
255 160 122
Crimson
DC 14 3C
220 20 60
Red
FF 00 00
255 0 0
FireBrick
B2 22 22
178 34 34
DarkRed
8B 00 00
139 0 0
Розовые
Pink
FF C0 CB
255 192 203
LightPink
FF B6 C1
255 182 193
HotPink
FF 69 B4
255 105 180
DeepPink
FF 14 93
255 20 147
MediumVioletRed
C7 15 85
199 21 133
PaleVioletRed
DB 70 93
219 112 147
Оранжевые
LightSalmon
FF A0 7A
255 160 122
Coral
FF 7F 50
255 127 80
Tomato
FF 63 47
255 99 71
OrangeRed
FF 45 00
255 69 0
DarkOrange
FF 8C 00
255 140 0
Orange
FF A5 00
255 165 0
Жёлтые
Gold
FF D7 00
255 215 0
Yellow
FF FF 00
255 255 0
LightYellow
FF FF E0
255 255 224
LemonChiffon
FF FA CD
255 250 205
LightGoldenrodYellow
FA FA D2
250 250 210
PapayaWhip
FF EF D5
255 239 213
Moccasin
FF E4 B5
255 228 181
PeachPuff
FF DA B9
255 218 185
PaleGoldenrod
EE E8 AA
238 232 170
Khaki
F0 E6 8C
240 230 140
DarkKhaki
BD B7 6B
189 183 107
Фиолетовые
Lavender
E6 E6 FA
230 230 250
Thistle
D8 BF D8
216 191 216
Plum
DD A0 DD
221 160 221
Violet
EE 82 EE
238 130 238
Orchid
DA 70 D6
218 112 214
Fuchsia
FF 00 FF
255 0 255
Magenta
FF 00 FF
255 0 255
MediumOrchid
BA 55 D3
186 85 211
MediumPurple
93 70 DB
147 112 219
BlueViolet
8A 2B E2
138 43 226
DarkViolet
94 00 D3
148 0 211
DarkOrchid
99 32 CC
153 50 204
DarkMagenta
8B 00 8B
139 0 139
Purple
80 00 80
128 0 128
Indigo
4B 00 82
75 0 130
SlateBlue
6A 5A CD
106 90 205
DarkSlateBlue
48 3D 8B
72 61 139
Зелёные
GreenYellow
AD FF 2F
173 255 47
Chartreuse
7F FF 00
127 255 0
LawnGreen
7C FC 00
124 252 0
Lime
00 FF 00
0 255 0
LimeGreen
32 CD 32
50 205 50
PaleGreen
98 FB 98
152 251 152
LightGreen
90 EE 90
144 238 144
MediumSpringGreen
00 FA 9A
0 250 154
SpringGreen
00 FF 7F
0 255 127
MediumSeaGreen
3C B3 71
60 179 113
SeaGreen
2E 8B 57
46 139 87
ForestGreen
22 8B 22
34 139 34
Green
00 80 00
0 128 0
DarkGreen
00 64 00
0 100 0
YellowGreen
9A CD 32
154 205 50
OliveDrab
6B 8E 23
107 142 35
Olive
80 80 00
128 128 0
DarkOliveGreen
55 6B 2F
85 107 47
MediumAquamarine
66 CD AA
102 205 170
DarkSeaGreen
8F BC 8F
143 188 143
LightSeaGreen
20 B2 AA
32 178 170
DarkCyan
00 8B 8B
0 139 139
Teal
00 80 80
0 128 128
Синие
Aqua
00 FF FF
0 255 255
Cyan
00 FF FF
0 255 255
LightCyan
E0 FF FF
224 255 255
PaleTurquoise
AF EE EE
175 238 238
Aquamarine
7F FF D4
127 255 212
Turquoise
40 E0 D0
64 224 208
MediumTurquoise
48 D1 CC
72 209 204
DarkTurquoise
00 CE D1
0 206 209
CadetBlue
5F 9E A0
95 158 160
SteelBlue
46 82 B4
70 130 180
LightSteelBlue
B0 C4 DE
176 196 222
PowderBlue
B0 E0 E6
176 224 230
LightBlue
AD D8 E6
173 216 230
SkyBlue
87 CE EB
135 206 235
LightSkyBlue
87 CE FA
135 206 250
DeepSkyBlue
00 BF FF
0 191 255
DodgerBlue
1E 90 FF
30 144 255
CornflowerBlue
64 95 ED
100 149 237
MediumSlateBlue
7B 68 EE
123 104 238
RoyalBlue
41 69 E1
65 105 225
Blue
00 00 FF
0 0 255
MediumBlue
00 00 CD
0 0 205
DarkBlue
00 00 8B
0 0 139
Navy
00 00 80
0 0 128
MidnightBlue
19 19 70
25 25 112
Коричневые
Cornsilk
FF F8 DC
255 248 220
BlanchedAlmond
FF EB CD
255 235 205
Bisque
FF E4 C4
255 228 196
NavajoWhite
FF DE AD
255 222 173
Wheat
F5 DE B3
245 222 179
BurlyWood
DE B8 87
222 184 135
Tan
D2 B4 8C
210 180 140
RosyBrown
BC 8F 8F
188 143 143
SandyBrown
F4 A4 60
244 164 96
Goldenrod
DA A5 20
218 165 32
DarkGoldenrod
B8 86 0B
184 134 11
Peru
CD 85 3F
205 133 63
Chocolate
D2 69 1E
210 105 30
SaddleBrown
8B 45 13
139 69 19
Sienna
A0 52 2D
160 82 45
Brown
A5 2A 2A
165 42 42
Maroon
80 00 00
128 0 0
Белые
White
FF FF FF
255 255 255
Snow
FF FA FA
255 250 250
Honeydew
F0 FF F0
240 255 240
MintCream
F5 FF FA
245 255 250
Azure
F0 FF FF
240 255 255
AliceBlue
F0 F8 FF
240 248 255
GhostWhite
F8 F8 FF
248 248 255
WhiteSmoke
F5 F5 F5
245 245 245
Seashell
FF F5 EE
255 245 238
Beige
F5 F5 DC
245 245 220
OldLace
FD F5 E6
253 245 230
FloralWhite
FF FA F0
255 250 240
Ivory
FF FF F0
255 255 240
AntiqueWhite
FA EB D7
250 235 215
Linen
FA F0 E6
250 240 230
LavenderBlush
FF F0 F5
255 240 245
MistyRose
FF E4 E1
255 228 225
Серые
Gainsboro
DC DC DC
220 220 220
LightGrey
D3 D3 D3
211 211 211
Silver
C0 C0 C0
192 192 192
DarkGray
A9 A9 A9
169 169 169
Gray
80 80 80
128 128 128
DimGray
69 69 69
105 105 105
LightSlateGray
77 88 99
119 136 153
SlateGray
70 80 90
112 128 144
DarkSlateGray
2F 4F 4F
47 79 79
Black
00 00 00
0 0 0
Безопасные цвета для сайта — Технический блог
На тему «правильных» и безопасных цветов написано много «трудов», которые в последствии были массово растиражированы в интернете.
Я начну с того, что любой цвет можно получить используя только три так называемых первичных цвета красный R, зеленый G и синий B. Такая система принята в цветном телевидении и интернете.
При этом в WEB принято, что градация каждого первичного цвета состоит из 256 оттенков от нуля до 255 или от 00 до FF в шестнадцатеричном исчислении. В итоге мы получим более 16 миллионов цветов (256*256*256) и считается, что это предел для человеческого глаза.
Однако несовершенство мониторов, особенности зрения каждого человека и желание некоторых индивидуумов «подкрутить» настройки устройства отображения (теплота цвета, яркость, контрастность) приводят к тому, что на экране мы зачастую видим совсем не ту картинку, которую задумал автор (дизайнер).
Кроме того в некоторых системах браузер по неизвестной мне причине почему-то не может правильно отобразить определенные цвета и тогда он подбирает ближайший похожий. И получается, что светло-серый #eeeeee как бы превращается в #ffffff, то есть не отличается от него на экране монитора. Что согласитесь не одно и тоже, ведь тогда вы не видите фон, рамки и прочее. Я наблюдал это лично в Linux системах в браузере FireFox. Допускаю, что нужно было донастроить операционную систему, драйверы или еще чего, но факт имеет место быть, некоторые цвета искажаются, что портит цветовое оформление сайта. А вот с безопасным цветом, например #cccccc такие неприятности не происходят.
Исходя из вышеописанного при определении цветовой палитры сайтов принято ограничивать палитру загрубив градацию каждого из первичных цветом до 6 уровней (00, 33, 66, 99, CC, FF в шестнадцатеричном исчислении). Считается, что любой из полученных 216 цветов (6*6*6) везде будет отображаться правильным образом и без искажений.
Таблица безопасных цветов для сайта
Так как все градации первичных цветов кратны 33 (тридцать три в шестнадцатеричном исчислении) и имеют одинаковые цифры в значениях единиц и десятков, то их значения можно записать в сокращенном формате, то есть вместо #FFFFFF, я буду использовать #FFF.
#FFF
#FFC
#FF9
#FF6
#FF3
#FF0
#FCF
#FCC
#FC9
#FC6
#FC3
#FC0
#F9F
#F9C
#F99
#F96
#F93
#F90
#F6F
#F6C
#F69
#F66
#F63
#F60
#F3F
#F3C
#F39
#F36
#F33
#F30
#F0F
#F0C
#F09
#F06
#F03
#F00
#CFF
#CFC
#CF9
#CF6
#CF3
#CF0
#CCF
#CCC
#CC9
#CC6
#CC3
#CC0
#C9F
#C9C
#C99
#C96
#C93
#C90
#C6F
#C6C
#C69
#C66
#C63
#C60
#C3F
#C3C
#C39
#C36
#C33
#C30
#C0F
#C0C
#C09
#C06
#C03
#C00
#9FF
#9FC
#9F9
#9F6
#9F3
#9F0
#9CF
#9CC
#9C9
#9C6
#9C3
#9C0
#99F
#99C
#999
#996
#993
#990
#96F
#96C
#969
#966
#963
#960
#93F
#93C
#939
#936
#933
#930
#90F
#90C
#909
#906
#903
#900
#6FF
#6FC
#6F9
#6F6
#6F3
#6F0
#6CF
#6CC
#6C9
#6C6
#6C3
#6C0
#69F
#69C
#699
#696
#693
#690
#66F
#66C
#669
#666
#663
#660
#63F
#63C
#639
#636
#633
#630
#60F
#60C
#609
#606
#603
#600
#3FF
#3FC
#3F9
#3F6
#3F3
#3F0
#3CF
#3CC
#3C9
#3C6
#3C3
#3C0
#39F
#39C
#399
#396
#393
#390
#36F
#36C
#369
#366
#363
#360
#33F
#33C
#339
#336
#333
#330
#30F
#30C
#309
#306
#303
#300
#0FF
#0FC
#0F9
#0F6
#0F3
#0F0
#0CF
#0CC
#0C9
#0C6
#0C3
#0C0
#09F
#09C
#099
#096
#093
#090
#06F
#06C
#069
#066
#063
#060
#03F
#03C
#039
#036
#033
#030
#00F
#00C
#009
#006
#003
#000
Как использовать таблицу безопасных цветов
Моя таблица состоит из 216 ячеек. Фон каждой из них записан в HEX формате и может использоваться в CSS стилях для графики, текста и фонов.
Существуют несколько основных способов представления цветов в вебе. Один из них в виде #123ABC. Это представление в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет: две первые цифры — красный, две в середине — зелёный, две последние цифры — синий. Также допускается краткое представление цвета в виде #ABC, что будет интерпретировано как #AABBCC.
Благодарности
При написании статьи были использованы следующие источники:
http://www.artlebedev.ru/tools/colors/
https://ru.wikipedia.org/wiki/Цвета_HTML
seodon.ru | Цвета HTML — Безопасные цвета HTML
Опубликовано: 05.03.2011 Последняя правка: 16.12.2015
На этой странице представлена таблица безопасных цветов HTML в формате RGB (для CSS и разных приложений) и HEX (для HTML и CSS). Используя эти цвета, вы можете быть уверены, что они будут одинаково отображены любыми старыми и новыми устройствами, на которых будут просматривать ваш сайт (мониторы, мобильные телефоны и т.д.) и всеми браузерами. При указании кода цвета в HTML перед ним необходимо поставить знак решетка (#). Все представленные ниже цвета допускается задавать в сокращенном виде, например #F3C вместо #FF33CC или #333 вместо #333333, а некоторые из них указывать по имени цвета.
255,204,102
255,204,51
255,204,0
204,153,0
153,102,0
FFCC66
FFCC33
FFCC00
CC9900
996600
255,204,153
204,153,102
204,153,51
153,102,51
102,51,0
FFCC99
CC9966
CC9933
996633
663300
255,153,102
255,153,51
255,153,0
204,102,51
204,102,0
FF9966
FF9933
FF9900
CC6633
CC6600
255,102,51
255,102,0
255,51,0
204,51,0
153,51,0
FF6633
FF6600
FF3300
CC3300
993300
255,204,204
204,153,153
153,102,102
102,51,51
51,0,0
FFCCCC
CC9999
996666
663333
330000
255,153,153
204,102,102
204,51,51
153,51,51
102,0,0
FF9999
CC6666
CC3333
993333
660000
255,102,102
255,51,51
255,0,0
204,0,0
153,0,0
FF6666
FF3333
FF0000
CC0000
990000
255,102,153
255,51,102
255,0,51
204,0,51
153,0,51
FF6699
FF3366
FF0033
CC0033
990033
255,153,204
204,102,153
204,51,102
153,51,102
102,0,51
FF99CC
CC6699
CC3366
993366
660033
255,51,153
255,0,153
255,0,102
204,0,102
153,0,102
FF3399
FF0099
FF0066
CC0066
990066
255,102,204
255,51,204
255,0,204
204,51,153
204,0,153
FF66CC
FF33CC
FF00CC
CC3399
CC0099
255,204,255
204,153,204
153,102,153
102,51,102
51,0,51
FFCCFF
CC99CC
996699
663366
330033
255,153,255
204,102,204
204,51,204
153,51,153
102,0,102
FF99FF
CC66CC
CC33CC
993399
660066
255,102,255
255,51,255
255,0,255
204,0,204
153,0,153
FF66FF
FF33FF
FF00FF
CC00CC
990099
204,102,255
204,51,255
204,0,255
153,0,204
102,0,153
CC66FF
CC33FF
CC00FF
9900CC
660099
204,153,255
153,102,204
153,51,204
102,51,153
51,0,102
CC99FF
9966CC
9933CC
663399
330066
153,102,255
153,51,255
153,0,255
102,51,204
102,0,204
9966FF
9933FF
9900FF
6633CC
6600CC
102,51,255
102,0,255
51,0,255
51,0,204
51,0,153
6633FF
6600FF
3300FF
3300CC
330099
204,204,255
153,153,204
102,102,153
51,51,102
0,0,51
CCCCFF
9999CC
666699
333366
000033
153,153,255
102,102,204
51,51,204
51,51,153
9999FF
6666CC
3333CC
333399
000066
102,102,255
51,51,255
0,0,255
0,0,204
0,0,153
6666FF
3333FF
0000FF
0000CC
000099
102,153,255
51,102,255
0,51,255
0,51,204
0,51,153
6699FF
3366FF
0033FF
0033CC
003399
153,204,255
102,153,204
51,102,204
51,102,153
0,51,102
99CCFF
6699CC
3366CC
336699
003366
51,153,255
0,153,255
0,102,255
0,102,204
0,102,153
3399FF
0099FF
0066FF
0066CC
006699
102,204,255
51,204,255
0,204,255
51,153,204
0,153,204
66CCFF
33CCFF
00CCFF
3399CC
0099CC
204,255,255
153,204,204
102,153,153
51,102,102
0,51,51
CCFFFF
99CCCC
669999
336666
003333
153,255,255
102,204,204
51,204,204
51,153,153
0,102,102
99FFFF
66CCCC
33CCCC
339999
006666
102,255,255
51,255,255
0,255,255
0,204,204
0,153,153
66FFFF
33FFFF
00FFFF
00CCCC
009999
102,255,204
51,255,204
0,255,204
0,204,153
0,153,102
66FFCC
33FFCC
00FFCC
00CC99
009966
153,255,204
102,204,153
51,204,153
51,153,102
0,102,51
99FFCC
66CC99
33CC99
339966
006633
102,255,153
51,255,153
0,255,153
51,204,102
0,104,102
66FF99
33FF99
00FF99
33CC66
00CC66
51,255,102
0,255,102
0,255,51
0,204,51
0,153,51
33FF66
00FF66
00FF33
00CC33
009933
153,255,153
153,204,153
102,153,102
51,102,51
0,51,0
99FF99
99CC99
669966
336633
003300
204,255,204
102,204,102
51,204,51
51,153,51
0,102,0
CCFFCC
66CC66
33CC33
339933
006600
102,255,102
51,255,51
0,255,0
0,204,0
0,153,0
66FF66
33FF33
00FF00
00CC00
009900
153,255,102
102,255,51
51,255,0
51,204,0
51,153,0
99FF66
66FF33
33FF00
33CC00
339900
204,255,153
153,204,102
102,204,51
102,153,51
51,102,0
CCFF99
99CC66
66CC33
669933
336600
153,255,51
153,255,0
102,255,0
102,204,0
102,153,0
99FF33
99FF00
66FF00
66CC00
669900
204,255,102
204,255,51
204,255,0
153,204,51
153,204,0
CCFF66
CCFF33
CCFF00
99CC33
99CC00
255,255,204
204,204,153
153,153,102
102,102,51
51,51,0
FFFFCC
CCCC99
999966
666633
333300
255,255,153
204,204,102
204,204,51
153,153,51
102,102,0
FFFF99
CCCC66
CCCC33
999933
666600
255,255,102
255,255,51
255,255,0
204,204,0
153,153,0
FFFF66
FFFF33
FFFF00
CCCC00
999900
255,255,255
204,204,204
153,153,153
102,102,102
51,51,51
0,0,0
FFFFFF
CCCCCC
999999
666666
333333
000000
Каждый HEX-код состоит из трех пар шестнадцатеричных значений: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий. Коды безопасной палитры могут состоять только из пар — 00, 33, 66, 99, СС и FF. Если код цвета содержит какое-либо другое значение, то этот цвет не из безопасной палитры.
Вообще, на сегодняшний день при создании сайта уже совсем не обязательно ограничиваться только безопасными цветами. Все современные браузеры и мониторы поддерживают гораздо больше цветов. Ну, разве что вы создаете сайт ориентированный на мобильные телефоны, некоторые из которых до сих пор могут отобразить только ограниченную палитру цветов.
«Безопасные» или Web Safe цвета для веб-дизайна
4.9
из 5
на основе 8 оценок
18.12.2015
«Безопасные», Web Safe или Browser Safe цвета – это палитра, состоящая из 216 оттенков, которые отображаются максимально точно независимо от монитора компьютера или выбранного браузера, способного отображать, по крайней мере, 8-ми битный цвет (256 цветов). Причина наличия в палитре только 216 вместо максимальных 256-ти цветов заключена в том, что именно эти основные цвета отображаются на всех компьютерах одинаково.
Более десяти лет назад, большинство компьютеров способно было отображать максимум 256 цветов одновременно. Причин было достаточно много, однако самой главной была высокая стоимость видеопамяти.
Определяли 256 цветов согласно математической формуле, а не по их эстетическим характеристикам, так как описывались они всего 8-мью битами компьютерной информации. Эта базовая палитра и включает в себя 216 цветов, которые сегодня мы называем «безопасными».
Web Safe цвета определяются таким градациями RGB: 0, 51, 102, 153, 204 и 255 (0, 33, 66, 99, СС, FF), которые указывают на процентное присутствие того или иного цвета: 0, 20, 40, 60, 80 и 100%.
Когда необходимо использовать «безопасные» цвета?
Если ваш веб-сайт имеет какой-либо цветной фон, то лучше всего для этой цели использовать именно Web Safe цвета. Таким образом, это гарантирует вам, что цвет не будет смущать пользователя при отображении на разных компьютерных платформах. Не стоит забывать и о том, что даже старые компьютеры, которых еще сохранилось достаточно большое количество и все еще активно используются, будут представлять ресурс точно, без колебаний и различий в цветах.
Если вы создаете картинки, текст или любые другие элементы, стоит обращаться к Web Safe палитре, так как это позволит получать более чистое изображение, отображаемое и для вас, и для пользователя всегда одинаково.
К сожалению, точной инструкции по подбору правильной цветовой палитры, которая бы привлекала, а не отталкивала пользователя, нет. Это субъективное понятие. Однако обратившись к основной «безопасной» палитре вы сможете не сомневаться в том, что каждый точно воспринимает представленный на сайте цвет.
Предлагаем вам ознакомиться с перечнем цветов HTML, который содержит в себе всю «безопасную» палитру и из которого вы сможете выбрать свои варианты оттенков для оформления дизайна.
По материалам http://www.htmlgoodies.com/
Безопасные цвета и html
Безопасные цвета или, по-другому, web-палитра были созданы для согласования браузеров. Раньше, когда компьютеры и мониторы не могли отображать необходимое количество оттенков, разработчики очень беспокоились о несоответствии. Они волновались, что их странички будут неодинаково хорошо смотреться в разных браузерах и мониторах. Старые устройства вывода ограничивали деятельность разработчиков. Поэтому для безопасности и сохранности исходного вида интернет-страниц и были придуманы веб-цвета.
Создание
Как известно, html и css используют несколько способов для определения значения цвета. Большинство веб-разработчиков используют специальные RGB-коды, в которых указывается индивидуальный номер оттенка. Например, такая запись: «#223366» означает, чтобы было взято 22 – красного, 33 – зеленного и 66 – синего. Последнее значение находится в преобладающем количестве. И если смешать в таких пропорциях краски, то получится темно синий цвет. RGB является сокращением от английских слов Red, Green и Blue. И именно эти цвета были выбраны для аддитивной цветовой модели, с помощью которой и происходит синтез красок. Некоторые предполагают, что безопасные цвета html были назначены наугад. Но это не так. Выбор происходил при помощи сухого математического расчета. Были выбраны только те значения, которые делятся на 3 и которые имеют пару одинаковых цифр. Например: «# 663366» или «#cc0099» (где с означает 13). А такие цвета, как «#ff66d6» или «#9999AA» уже не относятся к безопасным цветам, так как нарушают основные правила. Если монитор встречал неизвестный ему оттенок, то он пытался заменить его или создать новую краску. Чаще всего использовалась система дитеринг, в которой происходило смешивание цветов с целью создания другого. Иногда такой способ помогал избежать необратимых последствий неправильного отображения, но бывали случаи, когда картина сайта полностью менялась. Именно поэтому была создана отдельная палитра цветов, которая имела полное согласование с устройствами и браузерами того времени.
Использование
Как вы, наверное, уже поняли, безопасные цвета для сайта выглядят очень скудно, так как нет большого многообразия оттенков и переливов. Но во времена использования старых мониторов такая палитра была единственным выходом для получения одинакового отображения картинки на разных устройствах. Сейчас использовать безопасные цвета нет необходимости, ведь практически у каждого пользователя интернета стоит современное оборудование, которое с легкостью производит уже все известные оттенки. Сайты выглядят очень скудно, если использовать только веб-палитру. Некоторые графические редакторы (например Adobe Photoshop) до сих пор оставляют возможность подбора только безопасного цвета. Но прогресс не стоит на месте, и каждый год в сфере программирования появляется что-нибудь новое.
Заключение
Использовать безопасные цвета сегодня уже не имеет смысла. Практически все старые мониторы заменены на новые. Поэтому безопасные цвета уже уходят в историю и вскоре полностью исчезнут из всех программ и интернет-страничек.
