Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Цвета в HTML. Таблица «безопасных» цветов

В дизайне сайтов могут быть использованы различные цвета для графических элементов, шрифтов, фонов (как монотонных, так и градиентных). Сегодня мы рассмотрим, в каком формате записываются цвета в HTML и что такое «безопасные» цвета.

Цвета в HTML. Таблица «безопасных» цветов
Содержание статьи

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

В качестве примера, можно рассмотреть главное меню сайта, фон которого имеет неоднородный цвет, а градиент с углом 90 градусов (сверху вниз). В данном случае совершенно необязательно использовать фоновое изображение в формате GIF, которое будет повторяться по горизонтали при помощи примерно такой записи:

background: url(/i/main-menu-bg.gif) 0 0 repeat-x;

Нет никакой необходимости пополнять список графических файлов, используемых в дизайне сайта таким образом. Гораздо более изящным и простым решением будет использование следующей конструкции:

background: linear-gradient(90deg, #54b1ff, #1c7ccd);

Результат будет тот же, но нагрузка на сервер уменьшится, а скорость загрузки сайта во втором случае увеличится. Если применить подобный прием ко всем элементам сайта, где это возможно, то эффект от этого будет очевиден.

Формат записи цвета в HTML

Таким образом мы плавно подошли к главной теме нашей сегодняшней статьи о цветах в HTML — к формату их записи. Существует 3 основных способа записи цвета в каскадных таблицах стилей (CSS), которые мы сейчас и рассмотрим.

HEX формат

HEX формат записи цвета представляет собой 6 символов, которые условно делятся на 3 пары шестнадцатеричных цифр, каждая из которых означает свой цвет. При смешении этих цветов между собой получается результирующий цвет.

#123ABC

В данной конструкции, при разбиении ее на три части (по 2 символа в каждой), каждая отвечает за оттенок своего цвета:

  • первые две цифры означают красный цвет;
  • две цифры в середине — зеленый;
  • две последние — синий.

В случае повторяющихся символов, запись можно сокращать до 3 символов вместо 6, но только когда это возможно:

#AABBCC
#FFFFFF

В первом примере, как видите, в каждой из трех пар символы повторяются, а во втором — вообще все одинаковые (белый цвет). Сокращенная запись этих цветов будет выглядеть следующим образом:

#ABC
#FFF

RGB формат

photoshop-color-pickerRGB формат записи цвета получил свое название от трех основных цветов спектра, при смешении которых в различных комбинациях можно получить совершенно любой цвет и оттенок. Речь идет о красном, зеленом и голубом цветах (RGB — Red Greeb Blue).

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

На скриншоте видно, что Photoshop предлагает на выбор несколько форматов записи цвета, но основными двумя являются именно рассматриваемые нами форматы, которые можно использовать в HTML — RGB и HEX.

На данный момент существует возможность записи кода цвета в формате RGB и RGBA. Последний формат при помощи параметра A описывает степень прозрачности элемента.

background: rgb(74, 201, 89);
background: rgba(74, 201, 89, 0.5);

Первые три параметра формата RGB и RGBA могут принимать целые значения в диапазоне от 0 до 255, а параметр A (4-ый в формате RGBA) принимает дробные значения от нуля до единицы. При этом, если A = 0.5, то непрозрачность элемента составит 50%, 0.75 — 75%, 1 — 100% (по умолчанию).

Текстовый формат

Морально устаревшим форматом записи цветов в HTML является текстовый. Этот формат используется реже остальных, т.к. сильно ограничивает возможности и требует изучения слишком большого количества названий цветов.

Вот несколько примеров цветов, которые можно описать в текстовом формате:

  • aqua (морская волна, cyan)
  • gray (серый)
  • navy (тёмно-синий)
  • silver (серебряный)
  • black (чёрный)
  • green (зелёный)
  • olive (оливковый)
  • teal (сине-зелёный)
  • blue (синий)
  • lime (лайм, lightgreen)
  • purple (пурпурный)
  • white (белый)
  • fuchsia (фуксия, magenta)
  • maroon (тёмно-бордовый)
  • red (красный)
  • yellow (жёлтый)

Какой формат записи выбрать

На вкус и цвет, как известно, товарищей нет, поэтому каждый использует тот формат записи, который ему более по душе. Мы лишь приведем несколько примеров, описав один и тот же цвет разными способами, а то, какой формат удобней для вас, решать вам:

Черный цвет

background: #000;
background: rgb(0,0,0);
background: black;

Белый цвет

background: #fff;
background: rgb(255,255,255);
background: white;

Для рассмотренных цветов все 3 варианта приведут к одному и тому же результату. В случае с черным цветом мы использовали сокращенную запись в формате HEX, уменьшив количество символов после # с шести до трех. То же самое мы сделали и для описания белого цвета. На наш взгляд, использование формата HEX является самым оптимальным и используется в большинстве случаев, однако для использования канала прозрачности, нужно будет использовать формат RGBA, в котором четвертый параметр отвечает за это. Текстовый же формат записи цветов в HTML и CSS используется реже всего, хотя для описания базовых цветов можно воспользоваться и им, почему бы и нет.

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

photoshop-only-web-colorsТаблица «безопасных» цветов была актуальная несколько лет назад, когда нужно было добиться стабильности отображения нестандартных цветов, используемых в дизайне для разных устройств и мониторов. Иногда, когда браузер не был способен отобразить цвет, используемый дизайнером в качестве фона или цвета шрифта, он подбирал близкий цвет путем смешения других. Для того, чтобы этого не происходило, была придумана специальная таблица «безопасных» цветов, которые всегда и везде отображались одинаково.

В Photoshop по-прежнему есть возможность перевести палитру цветов в безопасный режим, нажав галочку рядом с пунктом «Только Web-цвета» (Only Web-colors).

Сейчас использование «безопасных» цветов уже не оправдано, но данная опция по привычке так и остается в современных версиях Фотошопа, поэтому мы приведем таблицу, которая содержит 216 цветов «безопасной» палитры:

255.255.204 255.255.153 255.255.102 255.255.51 255.255.0 204.204.0
FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00
           
255.204.102 255.204.0 255.204.51 204.153.0 204.153.51 153.102.0
FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600
           
255.153.0 255.153.51 204.153.102 204.102.0 153.102.51 102.51.0
FF9900 FF9933 CC9966 CC6600 996633 663300
           
255.204.153 255.153.102 255.102.0 204.102.51 153.51.0 102.0.0
FFCC99 FF9966 FF6600 CC6633 993300 660000
           
255.102.51 204.51.0 255.51.0 255.0.0 204.0.0 153.0.0
FF6633 CC3300 FF3300 FF0000 CC0000 990000
           
255.204.204 255.153.153 255.102.102 255.51.51 255.0.51 204.0.51
FFCCCC FF9999 FF6666 FF3333 FF0033 CC0033
           
204.153.153 204.102.102 204.51.51 153.51.51 153.0.51 51.0.0
CC9999 CC6666 CC3333 993333 990033 330000
           
255.102.153 255.51.102 255.0.102 204.51.102 153.102.102 102.51.51
FF6699 FF3366 FF0066 CC3366 996666 663333
           
255.153.204 255.51.153 255.0.153 204.0.102 153.51.102 102.0.51
FF99CC FF3399 FF0099 CC0066 993366 660033
           
255.102.204 255.0.204 255.51.204 204.102.153 204.0.153 153.0.102
FF66CC FF00CC FF33CC CC6699 CC0099 990066
           
255.204.255 255.153.255 255.102.255 255.51.255 255.0.255 204.51.153
FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399
           
204.153.204 204.102.204 204.0.204 204.51.204 153.0.153 153.51.153
CC99CC CC66CC CC00CC CC33CC 990099 993399
           
204.102.255 204.51.255 204.0.255 153.0.204 153.102.153 102.0.102
CC66FF CC33FF CC00FF 9900CC 996699 660066
           
204.153.255 153.51.204 153.51.255 153.0.255 102.0.153 102.51.102
CC99FF 9933CC 9933FF 9900FF 660099 663366
           
153.102.204 153.102.255 102.0.204 102.51.204 102.51.153 51.0.51
9966CC 9966FF 6600CC 6633CC 663399 330033
           
204.204.255 153.153.255 102.51.255 102.0.255 51.0.153 51.0.102
CCCCFF 9999FF 6633FF 6600FF 330099 330066
           
153.153.204 102.102.255 102.102.204 102.102.153 51.51.153 51.51.102
9999CC 6666FF 6666CC 666699 333399 333366
           
51.51.255 51.0.255 51.0.204 51.51.204 0.0.153 0.0.102
3333FF 3300FF 3300CC 3333CC 000099 000066
           
102.153.255 51.102.255 0.0.255 0.0.204 0.51.204 0.0.51
6699FF 3366FF 0000FF 0000CC 0033CC 000033
           
0.102.255 0.102.204 51.102.204 0.51.255 0.51.153 0.51.102
0066FF 0066CC 3366CC 0033FF 003399 003366
           
153.204.255 51.153.255 0.153.255 102.153.204 51.102.153 0.102.153
99CCFF 3399FF 0099FF 6699CC 336699 006699
           
102.204.255 51.204.255 0.204.255 51.153.204 0.153.204 0.51.51
66CCFF 33CCFF 00CCFF 3399CC 0099CC 003333
           
153.204.204 102.204.204 51.153.153 102.153.153 0.102.102 51.102.102
99CCCC 66CCCC 339999 669999 006666 336666
           
204.255.255 153.255.255 102.255.255 51.255.255 0.255.255 0.204.204
CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC
           
153.255.204 102.255.204 51.255.204 0.255.204 51.204.204 0.153.153
99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999
           
102.204.153 51.204.153 0.204.153 51.153.102 0.153.102 0.102.51
66CC99 33CC99 00CC99 339966 009966 006633
           
102.255.153 51.255.153 0.255.153 51.204.102 0.204.102 0.153.51
66FF99 33FF99 00FF99 33CC66 00CC66 009933
           
153.255.153 102.255.102 51.255.102 0.255.102 51.153.51 0.102.0
99FF99 66FF66 33FF66 00FF66 339933 006600
           
204.255.204 153.204.153 102.204.102 102.153.102 51.102.51 0.51.0
CCFFCC 99CC99 66CC66 669966 336633 003300
           
51.255.51 0.255.51 0.255.0 0.204.0 51.204.51 0.204.51
33FF33 00FF33 00FF00 00CC00 33CC33 00CC33
           
102.255.0 102.255.51 51.255.0 51.204.0 51.153.0 0.153.0
66FF00 66FF33 33FF00 33CC00 339900 009900
           
204.255.153 153.255.102 102.204.0 102.204.51 102.153.51 51.102.0
CCFF99 99FF66 66CC00 66CC33 669933 336600
           
153.255.0 153.255.51 153.204.102 153.204.0 153.204.51 102.153.0
99FF00 99FF33 99CC66 99CC00 99CC33 669900
           
204.255.102 204.255.0 204.255.51 204.204.153 102.102.51 51.51.0
CCFF66 CCFF00 CCFF33 CCCC99 666633 333300
           
204.204.102 204.204.51 153.153.102 153.153.51 153.153.0 102.102.0
CCCC66 CCCC33 999966 999933 999900 666600
           
255.255.255 204.204.204 153.153.153 102.102.102 51.51.51 0.0.0
FFFFFF CCCCCC 999999 666666 333333 000000
           

Предыдущая статья:
Джино.Спектр – сервис для создания блогов на WordPress

Читайте также:
Способы получения качественных бесплатных ссылок на сайт


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»