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

Здесь вашему вниманию предлагаются две очень полезные таблицы цветов в помощь вэб-мастеру.

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

Вэб-мастер иногда сталкивается с такой проблемой, когда у него в компьютере сайт выглядит очень хорошо и красиво, а вот в компьютерах других людей цвета имеют какие-то другие оттенки. Дело может дойти до того, что оттенки цветов могут выглядеть очень даже неприятно и отталкивающе.

Причина в том, что у людей стоят разные браузеры, разные мониторы и разные видеокарты. Это всё приводит к тому, что цветопередача цветовых оттенков Вашего сайта будет отличаться от того, что видите Вы на своем оборудовании и в тех браузерах, в которых Вы проверяете, как выглядит Ваш сайт. Допустим, Вы используете на своем сайте такой цвет, который не поддерживает видеокарта и установки монитора пользователя. В этом случае браузер пользователя, при выводе страницы на экран, заменяет Ваш оригинальный цвет на другой.

В разных браузерах работают разные алгоритмы такой замены. Например, бывает, что браузер просто находит ближайший цвет по его шестизначному номеру в 16-ричной кодировке HTML. Причем, бывают разные алгоритмы поиска ближайшего номера. Или бывает, что браузер переводит номер цвета HTML в номер цвета RGB и ищет ближайший номер по кодировке RGB. А есть и еще более сложные алгоритмы. Например, браузер может найти не один ближайший цвет, а несколько ближайших цветов с "разных" сторон цветовой шкалы и вывести на экран смесь этих цветов в пропорциях зависящих от расстояния до нужного цвета по осям измерения в цветовом пространстве.

Такие алгоритмы не всегда дают хороший результат. Иногда на экране получается совсем не то, что было задумано. Поэтому при выборе цвета в вэб-дизайне нужно проявлять очень большую осторожность.

К счастью существует список безопасных базовых цветов. Это те базовые цвета, которые присутствуют даже в самых стареньких мониторах и видеокартах. Поэтому, если Вы используете эти цвета на своем сайте, то Вы имеете 100% гарантию, что точно такая же цветовая гамма будет у всех других пользователей Интернета, которые зайдут на Ваш сайт. Их браузерам не придется заниматься подбором цветов через свои алгоритмы.

Здесь можно посмотреть эту таблицу безопасных цветов Интернета. Таблица позаимствована с сайта дизайн-студии Артемия Лебедева. Всего 216 базовых цветов, которые всегда и везде отображаются одинаково и без искажений.

В таблице над каждым цветом указаны два значения. Первое значение (три числа от 0 до 255, разделенные точкой) это номер цвета в шкале RGB, для того, чтобы Вы могли создавать эти цвета в каком-нибудь графическом редакторе, типа PhotoShop или CorelDRAW и HEX (для обозначения цвета в HTML). Второе значение (6-значное число в 16-ричной системе исчисления) это номера цветов в HTML, для того, чтобы Вы могли использовать эти цвета в атрибутах типа "color" в html-тэгах.

Таблица названий цветов

Конечно же, изучая html-коды каких-нибудь сайтов, Вы иногда видели, что цвета не всегда задаются числовым кодом. Иногда цвета задаются английскими словами. Например, вместо атрибута color="#ff0000" можно написать color="red". И результат будет одинаковый.

Действительно, очень многие цвета в HTML имеют свои английские названия. Но в русскоязычных учебниках по HTML очень редко приводится полный список таких цветов. На самом деле, чем больше Вы дружите с английским языком, тем более удобно для Вас знать названия цветов и удобнее употреблять в html-коде не 16-ричные числа, которые очень трудно запомнить, а имена цветов.

Попробуйте, например, запомнить номера 100 оттенков серого цвета в порядке уменьшения доли черного и возрастания доли белого цвета. Причем, запомнить их так, чтобы соседние цвета в списке отличались на один процент. Это просто невозможно. Поэтому Вам придется каждый раз лазить смотреть какие-нибудь таблицы цветов, откуда брать номера нужного серого цвета.

Гораздо проще запомнить, что серый цвет называется словом gray, после которого идет целое число, которое показывает долю белого цвета. Например, атрибут color="gray8" означает, что будет выводиться серый цвет, в котором 8% белого (и 92% черного). И это запомнить проще, чем color="#141414". Или если, например, надо вывести серый цвет с 63% белого (и 37% черного), то проще написать в атрибуте тэга gray63, а не #a1a1a1.

Здесь можно посмотреть эту таблицу соответствия цветов и их имен. Не факт, что Вы запомните все эти имена, но Вы ощутите огромное удобство, если будете писать не 16-иричные числа, а слова. Особенно, если Вам придется разбираться с Вашими старыми html-кодами, написанными несколько месяцев или даже несколько лет назад. Да и словарный запас английских слов у Вас также повысится.

В этой таблице также даны коды RGB и коды HTML данных цветов.

------------------

Автор статьи: Евгений Миронов.

[0] Создание сайта
[1] Пять правил применения изображений на сайте
[2] Так нужно ли все таки знать HTML или обойдемся конструктором и CMS?
[3] Еще один пинок по Flash на сайте!
[4] Лучшее расположение графики и текста на вэб-странице
[5] Восприятие цвета и элементов сайта
[6] Дурной тон вэб-дизайна
[7] Как сделать самый плохой сайт
[8] Мнение посетителей сайта о юзабилити
[9] Влияние цели создания сайта на жизнь сайта
[10] Простота и избыточность в юзабилити
[11] Таблица безопасных цветов и таблица имен цветов
   [11a] Таблица безопасных цветов на сайте
   [11b] Таблица имен цветов в HTML
   [11c] Генератор цветовых схем
   [11d] Инструкция генератора цветовых схем