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

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

Понятие "безопасные веб-цвета" (Web Safe colors) вошло в обиход в середине 90-х годов прошлого века, когда предпринимались попытки стандартизации воспроизведения цвета для разных платформ и браузеров.

Что такое безопасные веб-цвета.

В девяностые годы подавляющее большинство компьютеров было способно вывести на экран одновременно не более 256 цветов. У данных ограничений было много причин, в первую очередь – это высокая стоимость видеопамяти, ранние видеокарты имели максимальный объем 512 КБ, достаточный для отображения 256 цветов одновременно (8 бит), воспроизведение же большего количества требовало увеличения графической памяти.

Помимо ограниченных возможностей ПК, в то время, существовала проблема цветопередачи, один и тот же цвет на различных типах компьютеров, мониторов и браузерах мог выглядеть по-разному вследствие замены его ближайшим или же дизеринга (имитации путем размещения растровых точек доступных цветов в шахматном порядке, что при значительном уменьшении создает иллюзию целостности цвета). Данные причины и послужили поводом для создания Линдой Вайнман "безопасной" палитры состоящей из 216 цветов – своего рода неформального стандарта для сети Интернет. Палитра была сформирована из равномерно распределенных цветов красного, зеленого, синего в диапазоне от 00 до FF с шагом в 20% (00, 33, 66, 99, CC, FF) для каждого канала. Почему 216, а не 256? Дело в том, что остальные сорок резервировались либо операционными системами (Windows, Mac OS), либо же браузерами (Internet Explorer, Netscape).

На протяжении 2000-х использование веб-безопасных цветов постепенно теряло свою актуальность. Видеокарты совершенствовались, а использование 8-битных дисплеев сокращалось в пользу 24-битных.

На сегодняшний день компьютеры поддерживают миллионы цветов. Мониторы, операционные системы, программное обеспечение не всегда отображают их одинаково точно, но представление цвета, как правило, достаточно схоже. Для сравнения: в данный момент компьютеры и мониторы способны отображать 24-битный или 32-битный цвет, что соответствует 16 777 216 возможных оттенков. Однако, не смотря на это Как говорилось выше, ограничения использования в вебе исключительно "безопасных" цветов считается неким анахронизмом, в палитрах продуктов Adobe (Фотошоп, Иллюстратор, Премьер) до сих пор присутствует опция "Only Web Colors" ("Только Web-цвета").

Таблица "безопасных" цветов.

Приведенная ниже таблица представляет двести шестнадцать "безопасных" цветов и их значения в шестнадцатеричном коде (HEX), HSL и RGB. Перейдя по ссылке в таблице можно ознакомится с другими параметрами, цветовыми схемами, использованием цвета в CSS и SVG.

ЦветH S LR G B
#0000000°, 0%, 0%0%, 0%, 0%
#000033240°, 100%, 10%0%, 0%, 20%
#000066240°, 100%, 20%0%, 0%, 40%
#000099240°, 100%, 30%0%, 0%, 60%
#0000CC240°, 100%, 40%0%, 0%, 80%
#0000FF240°, 100%, 50%0%, 0%, 100%
#003300120°, 100%, 10%0%, 20%, 0%
#003333180°, 100%, 10%0%, 20%, 20%
#003366210°, 100%, 20%0%, 20%, 40%
#003399220°, 100%, 30%0%, 20%, 60%
#0033CC225°, 100%, 40%0%, 20%, 80%
#0033FF228°, 100%, 50%0%, 20%, 100%
#006600120°, 100%, 20%0%, 40%, 0%
#006633150°, 100%, 20%0%, 40%, 20%
#006666180°, 100%, 20%0%, 40%, 40%
#006699200°, 100%, 30%0%, 40%, 60%
#0066CC210°, 100%, 40%0%, 40%, 80%
#0066FF216°, 100%, 50%0%, 40%, 100%
#009900120°, 100%, 30%0%, 60%, 0%
#009933140°, 100%, 30%0%, 60%, 20%
#009966160°, 100%, 30%0%, 60%, 40%
#009999180°, 100%, 30%0%, 60%, 60%
#0099CC195°, 100%, 40%0%, 60%, 80%
#0099FF204°, 100%, 50%0%, 60%, 100%
#00CC00120°, 100%, 40%0%, 80%, 0%
#00CC33135°, 100%, 40%0%, 80%, 20%
#00CC66150°, 100%, 40%0%, 80%, 40%
#00CC99165°, 100%, 40%0%, 80%, 60%
#00CCCC180°, 100%, 40%0%, 80%, 80%
#00CCFF0°, 0%, 0%%, %, %
#00FF00120°, 100%, 50%0%, 100%, 0%
#00FF33132°, 100%, 50%0%, 100%, 20%
#00FF66144°, 100%, 50%0%, 100%, 40%
#00FF99156°, 100%, 50%0%, 100%, 60%
#00FFCC168°, 100%, 50%0%, 100%, 80%
#00FFFF180°, 100%, 50%0%, 100%, 100%
#3300000°, 100%, 10%20%, 0%, 0%
#330033300°, 100%, 10%20%, 0%, 20%
#330066270°, 100%, 20%20%, 0%, 40%
#330099260°, 100%, 30%20%, 0%, 60%
#3300CC255°, 100%, 40%20%, 0%, 80%
#3300FF252°, 100%, 50%20%, 0%, 100%
#33330060°, 100%, 10%20%, 20%, 0%
#3333330°, 0%, 20%20%, 20%, 20%
#333366240°, 33%, 30%20%, 20%, 40%
#333399240°, 50%, 40%20%, 20%, 60%
#3333CC240°, 60%, 50%20%, 20%, 80%
#3333FF240°, 100%, 60%20%, 20%, 100%
#33660090°, 100%, 20%20%, 40%, 0%
#336633120°, 33%, 30%20%, 40%, 20%
#336666180°, 33%, 30%20%, 40%, 40%
#336699210°, 50%, 40%20%, 40%, 60%
#3366CC220°, 60%, 50%20%, 40%, 80%
#3366FF225°, 100%, 60%20%, 40%, 100%
#339900100°, 100%, 30%20%, 60%, 0%
#339933120°, 50%, 40%20%, 60%, 20%
#339966150°, 50%, 40%20%, 60%, 40%
#339999180°, 50%, 40%20%, 60%, 60%
#3399CC200°, 60%, 50%20%, 60%, 80%
#3399FF210°, 100%, 60%20%, 60%, 100%
#33CC00105°, 100%, 40%20%, 80%, 0%
#33CC33120°, 60%, 50%20%, 80%, 20%
#33CC66140°, 60%, 50%20%, 80%, 40%
#33CC99160°, 60%, 50%20%, 80%, 60%
#33CCCC180°, 60%, 50%20%, 80%, 80%
#33CCFF195°, 100%, 60%20%, 80%, 100%
#33FF00108°, 100%, 50%20%, 100%, 0%
#33FF33120°, 100%, 60%20%, 100%, 20%
#33FF66135°, 100%, 60%20%, 100%, 40%
#33FF99150°, 100%, 60%20%, 100%, 60%
#33FFCC165°, 100%, 60%20%, 100%, 80%
#33FFFF180°, 100%, 60%20%, 100%, 100%
#6600000°, 100%, 20%40%, 0%, 0%
#660033330°, 100%, 20%40%, 0%, 20%
#660066300°, 100%, 20%40%, 0%, 40%
#660099280°, 100%, 30%40%, 0%, 60%
#6600CC270°, 100%, 40%40%, 0%, 80%
#6600FF264°, 100%, 50%40%, 0%, 100%
#66330030°, 100%, 20%40%, 20%, 0%
#6633330°, 33%, 30%40%, 20%, 20%
#663366300°, 33%, 30%40%, 20%, 40%
#663399270°, 50%, 40%40%, 20%, 60%
#6633CC260°, 60%, 50%40%, 20%, 80%
#6633FF255°, 100%, 60%40%, 20%, 100%
#66660060°, 100%, 20%40%, 40%, 0%
#66663360°, 33%, 30%40%, 40%, 20%
#6666660°, 0%, 40%40%, 40%, 40%
#666699240°, 20%, 50%40%, 40%, 60%
#6666CC240°, 50%, 60%40%, 40%, 80%
#6666FF240°, 100%, 70%40%, 40%, 100%
#66990080°, 100%, 30%40%, 60%, 0%
#66993390°, 50%, 40%40%, 60%, 20%
#669966120°, 20%, 50%40%, 60%, 40%
#669999180°, 20%, 50%40%, 60%, 60%
#6699CC210°, 50%, 60%40%, 60%, 80%
#6699FF220°, 100%, 70%40%, 60%, 100%
#66CC0090°, 100%, 40%40%, 80%, 0%
#66CC33100°, 60%, 50%40%, 80%, 20%
#66CC66120°, 50%, 60%40%, 80%, 40%
#66CC99150°, 50%, 60%40%, 80%, 60%
#66CCCC180°, 50%, 60%40%, 80%, 80%
#66CCFF200°, 100%, 70%40%, 80%, 100%
#66FF0096°, 100%, 50%40%, 100%, 0%
#66FF33105°, 100%, 60%40%, 100%, 20%
#66FF66120°, 100%, 70%40%, 100%, 40%
#66FF99140°, 100%, 70%40%, 100%, 60%
#66FFCC160°, 100%, 70%40%, 100%, 80%
#66FFFF180°, 100%, 70%40%, 100%, 100%
#9900000°, 100%, 30%60%, 0%, 0%
#990033340°, 100%, 30%60%, 0%, 20%
#990066320°, 100%, 30%60%, 0%, 40%
#990099300°, 100%, 30%60%, 0%, 60%
#9900CC285°, 100%, 40%60%, 0%, 80%
#9900FF276°, 100%, 50%60%, 0%, 100%
#99330020°, 100%, 30%60%, 20%, 0%
#9933330°, 50%, 40%60%, 20%, 20%
#993366330°, 50%, 40%60%, 20%, 40%
#993399300°, 50%, 40%60%, 20%, 60%
#9933CC280°, 60%, 50%60%, 20%, 80%
#9933FF270°, 100%, 60%60%, 20%, 100%
#99660040°, 100%, 30%60%, 40%, 0%
#99663330°, 50%, 40%60%, 40%, 20%
#9966660°, 20%, 50%60%, 40%, 40%
#996699300°, 20%, 50%60%, 40%, 60%
#9966CC270°, 50%, 60%60%, 40%, 80%
#9966FF260°, 100%, 70%60%, 40%, 100%
#99990060°, 100%, 30%60%, 60%, 0%
#99993360°, 50%, 40%60%, 60%, 20%
#99996660°, 20%, 50%60%, 60%, 40%
#9999990°, 0%, 60%60%, 60%, 60%
#9999CC240°, 33%, 70%60%, 60%, 80%
#9999FF240°, 100%, 80%60%, 60%, 100%
#99CC0075°, 100%, 40%60%, 80%, 0%
#99CC3380°, 60%, 50%60%, 80%, 20%
#99CC6690°, 50%, 60%60%, 80%, 40%
#99CC99120°, 33%, 70%60%, 80%, 60%
#99CCCC180°, 33%, 70%60%, 80%, 80%
#99CCFF210°, 100%, 80%60%, 80%, 100%
#99FF0084°, 100%, 50%60%, 100%, 0%
#99FF3390°, 100%, 60%60%, 100%, 20%
#99FF66100°, 100%, 70%60%, 100%, 40%
#99FF99120°, 100%, 80%60%, 100%, 60%
#99FFCC150°, 100%, 80%60%, 100%, 80%
#99FFFF180°, 100%, 80%60%, 100%, 100%
#CC00000°, 100%, 40%80%, 0%, 0%
#CC0033345°, 100%, 40%80%, 0%, 20%
#CC0066330°, 100%, 40%80%, 0%, 40%
#CC0099315°, 100%, 40%80%, 0%, 60%
#CC00CC300°, 100%, 40%80%, 0%, 80%
#CC00FF288°, 100%, 50%80%, 0%, 100%
#CC330015°, 100%, 40%80%, 20%, 0%
#CC33330°, 60%, 50%80%, 20%, 20%
#CC3366340°, 60%, 50%80%, 20%, 40%
#CC3399320°, 60%, 50%80%, 20%, 60%
#CC33CC300°, 60%, 50%80%, 20%, 80%
#CC33FF285°, 100%, 60%80%, 20%, 100%
#CC660030°, 100%, 40%80%, 40%, 0%
#CC663320°, 60%, 50%80%, 40%, 20%
#CC66660°, 50%, 60%80%, 40%, 40%
#CC6699330°, 50%, 60%80%, 40%, 60%
#CC66CC300°, 50%, 60%80%, 40%, 80%
#CC66FF280°, 100%, 70%80%, 40%, 100%
#CC990045°, 100%, 40%80%, 60%, 0%
#CC993340°, 60%, 50%80%, 60%, 20%
#CC996630°, 50%, 60%80%, 60%, 40%
#CC99990°, 33%, 70%80%, 60%, 60%
#CC99CC300°, 33%, 70%80%, 60%, 80%
#CC99FF270°, 100%, 80%80%, 60%, 100%
#CCCC0060°, 100%, 40%80%, 80%, 0%
#CCCC3360°, 60%, 50%80%, 80%, 20%
#CCCC6660°, 50%, 60%80%, 80%, 40%
#CCCC9960°, 33%, 70%80%, 80%, 60%
#CCCCCC0°, 0%, 80%80%, 80%, 80%
#CCCCFF240°, 100%, 90%80%, 80%, 100%
#CCFF0072°, 100%, 50%80%, 100%, 0%
#CCFF3375°, 100%, 60%80%, 100%, 20%
#CCFF6680°, 100%, 70%80%, 100%, 40%
#CCFF9990°, 100%, 80%80%, 100%, 60%
#CCFFCC120°, 100%, 90%80%, 100%, 80%
#CCFFFF180°, 100%, 90%80%, 100%, 100%
#FF00000°, 100%, 50%100%, 0%, 0%
#FF0033348°, 100%, 50%100%, 0%, 20%
#FF0066336°, 100%, 50%100%, 0%, 40%
#FF0099324°, 100%, 50%100%, 0%, 60%
#FF00CC312°, 100%, 50%100%, 0%, 80%
#FF00FF300°, 100%, 50%100%, 0%, 100%
#FF330012°, 100%, 50%100%, 20%, 0%
#FF33330°, 100%, 60%100%, 20%, 20%
#FF3366345°, 100%, 60%100%, 20%, 40%
#FF3399330°, 100%, 60%100%, 20%, 60%
#FF33CC315°, 100%, 60%100%, 20%, 80%
#FF33FF300°, 100%, 60%100%, 20%, 100%
#FF660024°, 100%, 50%100%, 40%, 0%
#FF663315°, 100%, 60%100%, 40%, 20%
#FF66660°, 100%, 70%100%, 40%, 40%
#FF6699340°, 100%, 70%100%, 40%, 60%
#FF66CC320°, 100%, 70%100%, 40%, 80%
#FF66FF300°, 100%, 70%100%, 40%, 100%
#FF990036°, 100%, 50%100%, 60%, 0%
#FF993330°, 100%, 60%100%, 60%, 20%
#FF996620°, 100%, 70%100%, 60%, 40%
#FF99990°, 100%, 80%100%, 60%, 60%
#FF99CC330°, 100%, 80%100%, 60%, 80%
#FF99FF300°, 100%, 80%100%, 60%, 100%
#FFCC0048°, 100%, 50%100%, 80%, 0%
#FFCC3345°, 100%, 60%100%, 80%, 20%
#FFCC6640°, 100%, 70%100%, 80%, 40%
#FFCC9930°, 100%, 80%100%, 80%, 60%
#FFCCCC0°, 100%, 90%100%, 80%, 80%
#FFCCFF300°, 100%, 90%100%, 80%, 100%
#FFFF0060°, 100%, 50%100%, 100%, 0%
#FFFF3360°, 100%, 60%100%, 100%, 20%
#FFFF6660°, 100%, 70%100%, 100%, 40%
#FFFF9960°, 100%, 80%100%, 100%, 60%
#FFFFCC60°, 100%, 90%100%, 100%, 80%
#FFFFFF0°, 0%, 100%100%, 100%, 100%

Для получения информации о других цветах и их значениях в HEX, HEX8, RGB, RGB%, CMYK, HSL, HSV воспользуйтесь калькулятором цветов.