Безопасные цвета для сайта

 15 января 2017      
 HTML & CSS / Вебмастеру / Дизайн      
 1 комментарий      
 390

На тему «правильных» и безопасных цветов написано много «трудов», которые в последствии были массово растиражированы в интернете.

Я начну с того, что любой цвет можно получить используя только три так называемых первичных цвета красный 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) везде будет отображаться правильным образом и без искажений.

Читайте также:  Простое и красивое горизонтальное выпадающее меню на CSS и HTML

Таблица безопасных цветов для сайта

Так как все градации первичных цветов кратны 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
Читайте также:  Блочная верстка плавающих блоков DIV Clear FIX

Как использовать таблицу безопасных цветов

Моя таблица состоит из 216 ячеек. Фон каждой из них записан в HEX формате и может использоваться в CSS стилях для графики, текста и фонов.

Существуют несколько основных способов представления цветов в вебе. Один из них в виде #123ABC. Это представление в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет: две первые цифры — красный, две в середине — зелёный, две последние цифры — синий. Также допускается краткое представление цвета в виде #ABC, что будет интерпретировано как #AABBCC.

Благодарности

При написании статьи были использованы следующие источники:

  1. http://www.artlebedev.ru/tools/colors/
  2. https://ru.wikipedia.org/wiki/Цвета_HTML
Поделись страницей с друзьями!

Обсуждение: есть 1 комментарий

  1. Сергей:

    Хорошая и доступная для понимания статья. Я раньше думал, что достаточно просто совпадения по парам, типа #ee33cc. Теперь знаю, что это не совсем так. Спасибо!

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить" я даю свое согласие на обработку введенной мной персональной информации в соответствии с Федеральным Законом от 27.07.2006 №152-ФЗ "О персональных данных", на условиях и для целей определенных политикой конфиденциальности.

2017 © Технический блог
SQL - 64 | 0,266 сек. | 10.82 МБ
доступность сайта