Статьи и справочные
материалы

Согласно спецификации W3C, цвет в CSS можно задавать несколькими способами. В этой статье я приведу примеры всех этих способов.

Ключевое слово

Ключевые слова определяют цвет напрямую своим значением. Как правило это разные цветы на английском языке. Выбор цвета таким способом достаточно невелик - HTML4 допускает всего 16 таких обозначений:

W3C сообщает, что в спецификацию CSS2 включен и другой цвет:

В дополнение к цветам, перечисленным выше, существует палитра, которую иногда называют "Netscape Named Colors" по имени первого браузера, начавшего использовать обозначения цветов словами. Консорциум W3C называет ее "SVG Color Keywords":

Все эти цвета browser-safe, то есть отображаются во всех браузерах одинаково. Однако будьте внимательны с ИЕ - тестируйте перед использованием (глюки с gray/grey).

CSS 2 предоставляет два способа задания цвета с помощью цифр:

RGB

Формат записи цвета в виде rgb такой:

rgb(red,green,blue);

Здесь записываются три составляющие цвета - красный, зеленый и синий. Значения можно указывать в виде числа от 0 до 255 или в процентах от 0% до 100%. Таким образом красный цвет в RGB записывается:

rgb(255,0,0)
rgb(100%,0%,0%)

Шестнадцатеричная запись

Цвета указанные с помощью шестнадцатеричной записи - тоже RGB, только по-другому записанные:

#RRGGBB

Где RR, GG и BB - это сконвертированные в формат base-16 соответствующие значения красного, зеленого и синего цветов RGB. Красный цвет в такой записи будет выглядеть так:

#ff0000

Численное обозначение цвета CSS 3

CSS3 дополняет приведенные способы новыми возможностями:

• • прямое указание прозрачности
• • запись RGBA
• • запись HSL

Области действия прозрачности значительно расширены в третьей версии CSS: CSS1 позволяла применять прозрачность к цвету фона, CSS2 расширила действие на цвета границ (border-color), а CSS3 включает возможность применения alfa к любой сущности, к которой применимо свойство цвета - включая даже цвет текста.

Запись RGBA позволяет указывать значение прозрачности вместе с указанием цвета в RGB. Значение opacity может варьироваться от 0.0 (полностью прозрачный цвет) до 1.0 (непрозрачный). Если агент не поддеживает RGBA, согласно спецификации, он должен понять эту запись как RGB - то есть без прозрачности. Но, как показывает практика, такого не происходит и эта запись игнорируется полностью.

rgba(red,green,blue,opacity);

Значения HSL обозначают численные коды hue-saturation-lightness цвета. Этот формат записи цвета был внедрен, чтобы решить несколько проблем формата RGB:

• • Формат RGB - аппаратно-ориентированный. Он применяется в CRT - предоставляет цветовую модель для отображения цветов.
• • RGB не интуитивен. Другими словами, большинство людей думают о цвете через оттенок (красный - желтый), насыщенность (серый - красный) и светлость (темно-красный - красный - розовый). Однако RGB вынуждает записывать цвет в аппаратном стиле.

Красный цвет в HSL записывается:

hsl(0,100%,50%);

HSL также можно записать вместе со значением прозрачности - HSLA. Запись идентична RGBA.

К сожалению, HSL не поддерживается большинством браузеров, но на всякий случай помнить об этой возможности будет хорошей идеей.

Оригинал Color and CSS
Перевод 3hrek