Что такое безопасная палитра
Безопасные цвета для вашего сайта: все, что нужно знать о Web Safe Colors
«Безопасные», 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, который содержит в себе всю «безопасную» палитру и из которого вы сможете выбрать свои варианты оттенков для оформления дизайна.
Безопасные веб-цвета.
Понятие «безопасные веб-цвета» (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 L | R G B |
|---|---|---|
| #000000 | 0°, 0%, 0% | 0%, 0%, 0% |
| #000033 | 240°, 100%, 10% | 0%, 0%, 20% |
| #000066 | 240°, 100%, 20% | 0%, 0%, 40% |
| #000099 | 240°, 100%, 30% | 0%, 0%, 60% |
| #0000CC | 240°, 100%, 40% | 0%, 0%, 80% |
| #0000FF | 240°, 100%, 50% | 0%, 0%, 100% |
| #003300 | 120°, 100%, 10% | 0%, 20%, 0% |
| #003333 | 180°, 100%, 10% | 0%, 20%, 20% |
| #003366 | 210°, 100%, 20% | 0%, 20%, 40% |
| #003399 | 220°, 100%, 30% | 0%, 20%, 60% |
| #0033CC | 225°, 100%, 40% | 0%, 20%, 80% |
| #0033FF | 228°, 100%, 50% | 0%, 20%, 100% |
| #006600 | 120°, 100%, 20% | 0%, 40%, 0% |
| #006633 | 150°, 100%, 20% | 0%, 40%, 20% |
| #006666 | 180°, 100%, 20% | 0%, 40%, 40% |
| #006699 | 200°, 100%, 30% | 0%, 40%, 60% |
| #0066CC | 210°, 100%, 40% | 0%, 40%, 80% |
| #0066FF | 216°, 100%, 50% | 0%, 40%, 100% |
| #009900 | 120°, 100%, 30% | 0%, 60%, 0% |
| #009933 | 140°, 100%, 30% | 0%, 60%, 20% |
| #009966 | 160°, 100%, 30% | 0%, 60%, 40% |
| #009999 | 180°, 100%, 30% | 0%, 60%, 60% |
| #0099CC | 195°, 100%, 40% | 0%, 60%, 80% |
| #0099FF | 204°, 100%, 50% | 0%, 60%, 100% |
| #00CC00 | 120°, 100%, 40% | 0%, 80%, 0% |
| #00CC33 | 135°, 100%, 40% | 0%, 80%, 20% |
| #00CC66 | 150°, 100%, 40% | 0%, 80%, 40% |
| #00CC99 | 165°, 100%, 40% | 0%, 80%, 60% |
| #00CCCC | 180°, 100%, 40% | 0%, 80%, 80% |
| #00CCFF | 0°, 0%, 0% | %, %, % |
| #00FF00 | 120°, 100%, 50% | 0%, 100%, 0% |
| #00FF33 | 132°, 100%, 50% | 0%, 100%, 20% |
| #00FF66 | 144°, 100%, 50% | 0%, 100%, 40% |
| #00FF99 | 156°, 100%, 50% | 0%, 100%, 60% |
| #00FFCC | 168°, 100%, 50% | 0%, 100%, 80% |
| #00FFFF | 180°, 100%, 50% | 0%, 100%, 100% |
| #330000 | 0°, 100%, 10% | 20%, 0%, 0% |
| #330033 | 300°, 100%, 10% | 20%, 0%, 20% |
| #330066 | 270°, 100%, 20% | 20%, 0%, 40% |
| #330099 | 260°, 100%, 30% | 20%, 0%, 60% |
| #3300CC | 255°, 100%, 40% | 20%, 0%, 80% |
| #3300FF | 252°, 100%, 50% | 20%, 0%, 100% |
| #333300 | 60°, 100%, 10% | 20%, 20%, 0% |
| #333333 | 0°, 0%, 20% | 20%, 20%, 20% |
| #333366 | 240°, 33%, 30% | 20%, 20%, 40% |
| #333399 | 240°, 50%, 40% | 20%, 20%, 60% |
| #3333CC | 240°, 60%, 50% | 20%, 20%, 80% |
| #3333FF | 240°, 100%, 60% | 20%, 20%, 100% |
| #336600 | 90°, 100%, 20% | 20%, 40%, 0% |
| #336633 | 120°, 33%, 30% | 20%, 40%, 20% |
| #336666 | 180°, 33%, 30% | 20%, 40%, 40% |
| #336699 | 210°, 50%, 40% | 20%, 40%, 60% |
| #3366CC | 220°, 60%, 50% | 20%, 40%, 80% |
| #3366FF | 225°, 100%, 60% | 20%, 40%, 100% |
| #339900 | 100°, 100%, 30% | 20%, 60%, 0% |
| #339933 | 120°, 50%, 40% | 20%, 60%, 20% |
| #339966 | 150°, 50%, 40% | 20%, 60%, 40% |
| #339999 | 180°, 50%, 40% | 20%, 60%, 60% |
| #3399CC | 200°, 60%, 50% | 20%, 60%, 80% |
| #3399FF | 210°, 100%, 60% | 20%, 60%, 100% |
| #33CC00 | 105°, 100%, 40% | 20%, 80%, 0% |
| #33CC33 | 120°, 60%, 50% | 20%, 80%, 20% |
| #33CC66 | 140°, 60%, 50% | 20%, 80%, 40% |
| #33CC99 | 160°, 60%, 50% | 20%, 80%, 60% |
| #33CCCC | 180°, 60%, 50% | 20%, 80%, 80% |
| #33CCFF | 195°, 100%, 60% | 20%, 80%, 100% |
| #33FF00 | 108°, 100%, 50% | 20%, 100%, 0% |
| #33FF33 | 120°, 100%, 60% | 20%, 100%, 20% |
| #33FF66 | 135°, 100%, 60% | 20%, 100%, 40% |
| #33FF99 | 150°, 100%, 60% | 20%, 100%, 60% |
| #33FFCC | 165°, 100%, 60% | 20%, 100%, 80% |
| #33FFFF | 180°, 100%, 60% | 20%, 100%, 100% |
| #660000 | 0°, 100%, 20% | 40%, 0%, 0% |
| #660033 | 330°, 100%, 20% | 40%, 0%, 20% |
| #660066 | 300°, 100%, 20% | 40%, 0%, 40% |
| #660099 | 280°, 100%, 30% | 40%, 0%, 60% |
| #6600CC | 270°, 100%, 40% | 40%, 0%, 80% |
| #6600FF | 264°, 100%, 50% | 40%, 0%, 100% |
| #663300 | 30°, 100%, 20% | 40%, 20%, 0% |
| #663333 | 0°, 33%, 30% | 40%, 20%, 20% |
| #663366 | 300°, 33%, 30% | 40%, 20%, 40% |
| #663399 | 270°, 50%, 40% | 40%, 20%, 60% |
| #6633CC | 260°, 60%, 50% | 40%, 20%, 80% |
| #6633FF | 255°, 100%, 60% | 40%, 20%, 100% |
| #666600 | 60°, 100%, 20% | 40%, 40%, 0% |
| #666633 | 60°, 33%, 30% | 40%, 40%, 20% |
| #666666 | 0°, 0%, 40% | 40%, 40%, 40% |
| #666699 | 240°, 20%, 50% | 40%, 40%, 60% |
| #6666CC | 240°, 50%, 60% | 40%, 40%, 80% |
| #6666FF | 240°, 100%, 70% | 40%, 40%, 100% |
| #669900 | 80°, 100%, 30% | 40%, 60%, 0% |
| #669933 | 90°, 50%, 40% | 40%, 60%, 20% |
| #669966 | 120°, 20%, 50% | 40%, 60%, 40% |
| #669999 | 180°, 20%, 50% | 40%, 60%, 60% |
| #6699CC | 210°, 50%, 60% | 40%, 60%, 80% |
| #6699FF | 220°, 100%, 70% | 40%, 60%, 100% |
| #66CC00 | 90°, 100%, 40% | 40%, 80%, 0% |
| #66CC33 | 100°, 60%, 50% | 40%, 80%, 20% |
| #66CC66 | 120°, 50%, 60% | 40%, 80%, 40% |
| #66CC99 | 150°, 50%, 60% | 40%, 80%, 60% |
| #66CCCC | 180°, 50%, 60% | 40%, 80%, 80% |
| #66CCFF | 200°, 100%, 70% | 40%, 80%, 100% |
| #66FF00 | 96°, 100%, 50% | 40%, 100%, 0% |
| #66FF33 | 105°, 100%, 60% | 40%, 100%, 20% |
| #66FF66 | 120°, 100%, 70% | 40%, 100%, 40% |
| #66FF99 | 140°, 100%, 70% | 40%, 100%, 60% |
| #66FFCC | 160°, 100%, 70% | 40%, 100%, 80% |
| #66FFFF | 180°, 100%, 70% | 40%, 100%, 100% |
| #990000 | 0°, 100%, 30% | 60%, 0%, 0% |
| #990033 | 340°, 100%, 30% | 60%, 0%, 20% |
| #990066 | 320°, 100%, 30% | 60%, 0%, 40% |
| #990099 | 300°, 100%, 30% | 60%, 0%, 60% |
| #9900CC | 285°, 100%, 40% | 60%, 0%, 80% |
| #9900FF | 276°, 100%, 50% | 60%, 0%, 100% |
| #993300 | 20°, 100%, 30% | 60%, 20%, 0% |
| #993333 | 0°, 50%, 40% | 60%, 20%, 20% |
| #993366 | 330°, 50%, 40% | 60%, 20%, 40% |
| #993399 | 300°, 50%, 40% | 60%, 20%, 60% |
| #9933CC | 280°, 60%, 50% | 60%, 20%, 80% |
| #9933FF | 270°, 100%, 60% | 60%, 20%, 100% |
| #996600 | 40°, 100%, 30% | 60%, 40%, 0% |
| #996633 | 30°, 50%, 40% | 60%, 40%, 20% |
| #996666 | 0°, 20%, 50% | 60%, 40%, 40% |
| #996699 | 300°, 20%, 50% | 60%, 40%, 60% |
| #9966CC | 270°, 50%, 60% | 60%, 40%, 80% |
| #9966FF | 260°, 100%, 70% | 60%, 40%, 100% |
| #999900 | 60°, 100%, 30% | 60%, 60%, 0% |
| #999933 | 60°, 50%, 40% | 60%, 60%, 20% |
| #999966 | 60°, 20%, 50% | 60%, 60%, 40% |
| #999999 | 0°, 0%, 60% | 60%, 60%, 60% |
| #9999CC | 240°, 33%, 70% | 60%, 60%, 80% |
| #9999FF | 240°, 100%, 80% | 60%, 60%, 100% |
| #99CC00 | 75°, 100%, 40% | 60%, 80%, 0% |
| #99CC33 | 80°, 60%, 50% | 60%, 80%, 20% |
| #99CC66 | 90°, 50%, 60% | 60%, 80%, 40% |
| #99CC99 | 120°, 33%, 70% | 60%, 80%, 60% |
| #99CCCC | 180°, 33%, 70% | 60%, 80%, 80% |
| #99CCFF | 210°, 100%, 80% | 60%, 80%, 100% |
| #99FF00 | 84°, 100%, 50% | 60%, 100%, 0% |
| #99FF33 | 90°, 100%, 60% | 60%, 100%, 20% |
| #99FF66 | 100°, 100%, 70% | 60%, 100%, 40% |
| #99FF99 | 120°, 100%, 80% | 60%, 100%, 60% |
| #99FFCC | 150°, 100%, 80% | 60%, 100%, 80% |
| #99FFFF | 180°, 100%, 80% | 60%, 100%, 100% |
| #CC0000 | 0°, 100%, 40% | 80%, 0%, 0% |
| #CC0033 | 345°, 100%, 40% | 80%, 0%, 20% |
| #CC0066 | 330°, 100%, 40% | 80%, 0%, 40% |
| #CC0099 | 315°, 100%, 40% | 80%, 0%, 60% |
| #CC00CC | 300°, 100%, 40% | 80%, 0%, 80% |
| #CC00FF | 288°, 100%, 50% | 80%, 0%, 100% |
| #CC3300 | 15°, 100%, 40% | 80%, 20%, 0% |
| #CC3333 | 0°, 60%, 50% | 80%, 20%, 20% |
| #CC3366 | 340°, 60%, 50% | 80%, 20%, 40% |
| #CC3399 | 320°, 60%, 50% | 80%, 20%, 60% |
| #CC33CC | 300°, 60%, 50% | 80%, 20%, 80% |
| #CC33FF | 285°, 100%, 60% | 80%, 20%, 100% |
| #CC6600 | 30°, 100%, 40% | 80%, 40%, 0% |
| #CC6633 | 20°, 60%, 50% | 80%, 40%, 20% |
| #CC6666 | 0°, 50%, 60% | 80%, 40%, 40% |
| #CC6699 | 330°, 50%, 60% | 80%, 40%, 60% |
| #CC66CC | 300°, 50%, 60% | 80%, 40%, 80% |
| #CC66FF | 280°, 100%, 70% | 80%, 40%, 100% |
| #CC9900 | 45°, 100%, 40% | 80%, 60%, 0% |
| #CC9933 | 40°, 60%, 50% | 80%, 60%, 20% |
| #CC9966 | 30°, 50%, 60% | 80%, 60%, 40% |
| #CC9999 | 0°, 33%, 70% | 80%, 60%, 60% |
| #CC99CC | 300°, 33%, 70% | 80%, 60%, 80% |
| #CC99FF | 270°, 100%, 80% | 80%, 60%, 100% |
| #CCCC00 | 60°, 100%, 40% | 80%, 80%, 0% |
| #CCCC33 | 60°, 60%, 50% | 80%, 80%, 20% |
| #CCCC66 | 60°, 50%, 60% | 80%, 80%, 40% |
| #CCCC99 | 60°, 33%, 70% | 80%, 80%, 60% |
| #CCCCCC | 0°, 0%, 80% | 80%, 80%, 80% |
| #CCCCFF | 240°, 100%, 90% | 80%, 80%, 100% |
| #CCFF00 | 72°, 100%, 50% | 80%, 100%, 0% |
| #CCFF33 | 75°, 100%, 60% | 80%, 100%, 20% |
| #CCFF66 | 80°, 100%, 70% | 80%, 100%, 40% |
| #CCFF99 | 90°, 100%, 80% | 80%, 100%, 60% |
| #CCFFCC | 120°, 100%, 90% | 80%, 100%, 80% |
| #CCFFFF | 180°, 100%, 90% | 80%, 100%, 100% |
| #FF0000 | 0°, 100%, 50% | 100%, 0%, 0% |
| #FF0033 | 348°, 100%, 50% | 100%, 0%, 20% |
| #FF0066 | 336°, 100%, 50% | 100%, 0%, 40% |
| #FF0099 | 324°, 100%, 50% | 100%, 0%, 60% |
| #FF00CC | 312°, 100%, 50% | 100%, 0%, 80% |
| #FF00FF | 300°, 100%, 50% | 100%, 0%, 100% |
| #FF3300 | 12°, 100%, 50% | 100%, 20%, 0% |
| #FF3333 | 0°, 100%, 60% | 100%, 20%, 20% |
| #FF3366 | 345°, 100%, 60% | 100%, 20%, 40% |
| #FF3399 | 330°, 100%, 60% | 100%, 20%, 60% |
| #FF33CC | 315°, 100%, 60% | 100%, 20%, 80% |
| #FF33FF | 300°, 100%, 60% | 100%, 20%, 100% |
| #FF6600 | 24°, 100%, 50% | 100%, 40%, 0% |
| #FF6633 | 15°, 100%, 60% | 100%, 40%, 20% |
| #FF6666 | 0°, 100%, 70% | 100%, 40%, 40% |
| #FF6699 | 340°, 100%, 70% | 100%, 40%, 60% |
| #FF66CC | 320°, 100%, 70% | 100%, 40%, 80% |
| #FF66FF | 300°, 100%, 70% | 100%, 40%, 100% |
| #FF9900 | 36°, 100%, 50% | 100%, 60%, 0% |
| #FF9933 | 30°, 100%, 60% | 100%, 60%, 20% |
| #FF9966 | 20°, 100%, 70% | 100%, 60%, 40% |
| #FF9999 | 0°, 100%, 80% | 100%, 60%, 60% |
| #FF99CC | 330°, 100%, 80% | 100%, 60%, 80% |
| #FF99FF | 300°, 100%, 80% | 100%, 60%, 100% |
| #FFCC00 | 48°, 100%, 50% | 100%, 80%, 0% |
| #FFCC33 | 45°, 100%, 60% | 100%, 80%, 20% |
| #FFCC66 | 40°, 100%, 70% | 100%, 80%, 40% |
| #FFCC99 | 30°, 100%, 80% | 100%, 80%, 60% |
| #FFCCCC | 0°, 100%, 90% | 100%, 80%, 80% |
| #FFCCFF | 300°, 100%, 90% | 100%, 80%, 100% |
| #FFFF00 | 60°, 100%, 50% | 100%, 100%, 0% |
| #FFFF33 | 60°, 100%, 60% | 100%, 100%, 20% |
| #FFFF66 | 60°, 100%, 70% | 100%, 100%, 40% |
| #FFFF99 | 60°, 100%, 80% | 100%, 100%, 60% |
| #FFFFCC | 60°, 100%, 90% | 100%, 100%, 80% |
| #FFFFFF | 0°, 0%, 100% | 100%, 100%, 100% |
Для получения информации о других цветах и их значениях в HEX, HEX8, RGB, RGB%, CMYK, HSL, HSV воспользуйтесь калькулятором цветов.