Безопасные цвета для сайта
Раздел(ы): HTML & CSS, Вебмастеру, Дизайн
Просмотры: 3618
Комментарии: 1
На тему «правильных» и безопасных цветов написано много «трудов», которые в последствии были массово растиражированы в интернете.
Я начну с того, что любой цвет можно получить используя только три так называемых первичных цвета красный 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.
Благодарности
При написании статьи были использованы следующие источники:
Хорошая и доступная для понимания статья. Я раньше думал, что достаточно просто совпадения по парам, типа #ee33cc. Теперь знаю, что это не совсем так. Спасибо!