Веб-цвета

Веб-цвета, ещё их называют - безопасные цвета - вообще веб-цветом принято называть цвета, которые одинаково отображаются в различных браузерах. Но сильно обращать внимание на эту тему не стоит. Я вообще сомневаюсь в целесообразности их использования. Так что вообще не понимаю, почему столько слов разведено вокруг данной темы. Ну будет один браузер отображать какой то цвет чуть темнее, или чуть светлее, или ещё как. На глаз это практически не заметно, так что не надо и с ума сходить :) Делайте цвета, какие нравятся, а если сомневаетесь, используйте фоновые изображения. И красивее намного и точно будет одинаковый цвет в разных браузерах, при просмотре на разных мониторах.

Возможно некоторые путают веб-цвета с цветами, которые отображает браузер по умолчанию. Тут не спорю, разница огромная. Например IE отображает горизонтальную линию серой, а Опера чёрной. Но в этой ситуации надо просто прописать цвет горизонтальной линии в таблице CSS и все браузеры начнут отображать всё одинаково.

В общем веб-цвета нужны, если ваш сайт просматривают на мониторе с глубиной цвета - 8 бит (256 цветов). Тогда да, будет заметна некоторая разница в разных браузерах. Во всех остальных случаях не парьтесь на данную тему :) Так, непонятки разрулили, теперь и о веб-цветах вспомнить надо :)


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

Название Цвет Эквивалент Красный (R) Зеленый (G) Синий (B)
aqua   #00FFFF 00 255 255
black   #000000 00 00 00
blue   #0000FF 00 00 255
fuchsia   #FF00FF 255 00 255
gray   #808080 128 128 128
green   #008000 00 128 00
lime   #00FF00 00 255 00
maroon   #800000 128 00 00
navy   #000080 00 00 128
olive   #808000 128 128 00
purple   #800080 128 00 128
red   #FF0000 255 00 00
silver   #C0C0C0 192 192 192
teal   #008080 00 128 128
white   #FFFFFF 255 255 255
yellow   #FFFF00 255 255 00

Прописывать можете как захотите. Можете цифрами, можете названиями, можете вперемешку. Для правильного отображения цветов в браузере, это ни какой роли не играет.


Это был самый простой вариант, перейдём к посложнее :) Вообще для задания цветов используют три способа. Первый способ - названия, его мы уже прошли. Второй и третий способы - задают цвет в десятеричном и в шестнадцатеричном коде. В основном используется шестнадцатеричный код (16* - для удобства). Только не пугайтесь, хоть название и такое страшное, но выглядит он довольно вменяемо :) Пример в верхней таблице. Видите смесь букв и цифр - к примеру #FF00FF - это и есть 16* цвет.

А страшное название получилось, потому что в коде используется 16 символов - 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Десять цифрами, и шесть буквами, они заменяют цифры от 10 до 15. Цифры больше пятнадцати отображают путём объединения двух букв, или цифр в одно целое. Возьмём к примеру серебристый цвет.

silver #C0C0C0 он состоит из C0 C0 C0

Здесь по 192 единицы красного, зелёного и синего. Так же можно разложить любой цвет, только значения будут разные.


Немного повторюсь о браузерах. При маленькой глубине цвета, браузеры начинают отображать один и тот же цвет по разному. А возникает это из за того, что когда браузер использует собственную палитру цветов и не может найти определённый цвет, то просто подбирает близкий по значению. Вот и возникает разница в отображении цветовой гаммы. И что бы этого избежать ввели цветовую палитру, обязательную для всех браузеров. Там для каждого цвета (красного, зелёного, синего) установлено по шесть значений. Перемножаем эти значения и получается, что всего в нашем распоряжении 216 безопасных, или веб-цветов. Далее приведу таблицу с этими веб-цветами. Откуда скопировал уже не помню, давно это было. Когда ещё хотел пользоваться этой таблицей, но так и не стал.

255.255.204255.255.153255.255.102255.255.51255.255.0204.204.0
#FFFFCC#FFFF99#FFFF66#FFFF33#FFFF00#CCCC00
 
255.204.102255.204.0255.204.51204.153.0204.153.51153.102.0
#FFCC66#FFCC00#FFCC33#CC9900#CC9933#996600
 
255.153.0255.153.51204.153.102204.102.0153.102.51102.51.0
#FF9900#FF9933#CC9966#CC6600#996633#663300
 
255.204.153255.153.102255.102.0204.102.51153.51.0102.0.0
#FFCC99#FF9966#FF6600#CC6633#993300#660000
 
255.102.51204.51.0255.51.0255.0.0204.0.0153.0.0
#FF6633#CC3300#FF3300#FF0000#CC0000#990000
 
255.204.204255.153.153255.102.102255.51.51255.0.51204.0.51
#FFCCCC#FF9999#FF6666#FF3333#FF0033#CC0033
 
204.153.153204.102.102204.51.51153.51.51153.0.5151.0.0
#CC9999#CC6666#CC3333#993333#990033#330000
 
255.102.153255.51.102255.0.102204.51.102153.102.102102.51.51
#FF6699#FF3366#FF0066#CC3366#996666#663333
 
255.153.204255.51.153255.0.153204.0.102153.51.102102.0.51
#FF99CC#FF3399#FF0099#CC0066#993366#660033
 
255.102.204255.0.204255.51.204204.102.153204.0.153153.0.102
#FF66CC#FF00CC#FF33CC#CC6699#CC0099#990066
 
255.204.255255.153.255255.102.255255.51.255255.0.255204.51.153
#FFCCFF#FF99FF#FF66FF#FF33FF#FF00FF#CC3399
 
204.153.204204.102.204204.0.204204.51.204153.0.153153.51.153
#CC99CC#CC66CC#CC00CC#CC33CC#990099#993399
 
204.102.255204.51.255204.0.255153.0.204153.102.153102.0.102
#CC66FF#CC33FF#CC00FF#9900CC#996699#660066
 
204.153.255153.51.204153.51.255153.0.255102.0.153102.51.102
#CC99FF#9933CC#9933FF#9900FF#660099#663366
 
153.102.204153.102.255102.0.204102.51.204102.51.15351.0.51
#9966CC#9966FF#6600CC#6633CC#663399#330033
 
204.204.255153.153.255102.51.255102.0.25551.0.15351.0.102
#CCCCFF#9999FF#6633FF#6600FF#330099#330066
 
153.153.204102.102.255102.102.204102.102.15351.51.15351.51.102
#9999CC#6666FF#6666CC#666699#333399#333366
 
51.51.25551.0.25551.0.20451.51.2040.0.1530.0.102
#3333FF#3300FF#3300CC#3333CC#000099#000066
 
102.153.25551.102.2550.0.2550.0.2040.51.2040.0.51
#6699FF#3366FF#0000FF#0000CC#0033CC#000033
 
0.102.2550.102.20451.102.2040.51.2550.51.1530.51.102
#0066FF#0066CC#3366CC#0033FF#003399#003366
 
153.204.25551.153.2550.153.255102.153.20451.102.1530.102.153
#99CCFF#3399FF#0099FF#6699CC#336699#006699
 
102.204.25551.204.2550.204.25551.153.2040.153.2040.51.51
#66CCFF#33CCFF#00CCFF#3399CC#0099CC#003333
 
153.204.204102.204.20451.153.153102.153.1530.102.10251.102.102
#99CCCC#66CCCC#339999#669999#006666#336666
 
204.255.255153.255.255102.255.25551.255.2550.255.2550.204.204
#CCFFFF#99FFFF#66FFFF#33FFFF#00FFFF#00CCCC
 
153.255.204102.255.20451.255.2040.255.20451.204.2040.153.153
#99FFCC#66FFCC#33FFCC#00FFCC#33CCCC#009999
 
102.204.15351.204.1530.204.15351.153.1020.153.1020.102.51
#66CC99#33CC99#00CC99#339966#009966#006633
 
102.255.15351.255.1530.255.15351.204.1020.204.1020.153.51
#66FF99#33FF99#00FF99#33CC66#00CC66#009933
 
153.255.153102.255.10251.255.1020.255.10251.153.510.102.0
#99FF99#66FF66#33FF66#00FF66#339933#006600
 
204.255.204153.204.153102.204.102102.153.10251.102.510.51.0
#CCFFCC#99CC99#66CC66#669966#336633#003300
 
51.255.510.255.510.255.00.204.051.204.510.204.51
#33FF33#00FF33#00FF00#00CC00#33CC33#00CC33
 
102.255.0102.255.5151.255.051.204.051.153.00.153.0
#66FF00#66FF33#33FF00#33CC00#339900#009900
 
204.255.153153.255.102102.204.0102.204.51102.153.5151.102.0
#CCFF99#99FF66#66CC00#66CC33#669933#336600
 
153.255.0153.255.51153.204.102153.204.0153.204.51102.153.0
#99FF00#99FF33#99CC66#99CC00#99CC33#669900
 
204.255.102204.255.0204.255.51204.204.153102.102.5151.51.0
#CCFF66#CCFF00#CCFF33#CCCC99#666633#333300
 
204.204.102204.204.51153.153.51153.153.102153.153.0102.102.0
#CCCC66#CCCC33#999966#999933#999900#666600
 
255.255.255204.204.204153.153.153102.102.10251.51.510.0.0
#FFFFFF#CCCCCC#999999#666666#333333#000000
 
Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP