Данный документ является неофициальным переводом английской версии CSS Color Module Level 3, W3C Recommendation, 07 June 2011. Оригинальная версия документа существует только на английском языке. Данный перевод может содержать ошибки и неточности.

Русский перевод:
http://www.cssdot.ru/w3c/rec-css3-color.html
Переводчик:
Бычков Кирилл <>

W3C

Модуль CSS Цвет Уровень 3

Рекомендация W3C, 07 Июня 2011

Текущая версия:
http://www.w3.org/TR/2011/REC-css3-color-20110607
Последняя версия:
http://www.w3.org/TR/css3-color
Предыдущая версия:
http://www.w3.org/TR/2010/PR-css3-color-20101028
Редакторы:
Tantek Çelik (приглашенный эксперт, а ранее сотрудник Microsoft Corporation) <>
Chris Lilley (W3C) <>
L. David Baron (Mozilla Corporation) <>
Соавторы:
Steven Pemberton (CWI) <>
Brad Pettit (Microsoft Corporation) <>

Пожалуйста, обратите внимание на список опечаток для данного документа, который может включать некоторые нормативные исправления.

Смотрите так же переводы.


Аннотация

CSS (Каскадные Таблицы Стилей) является языком описания отображения HTML и XML документов на экране, бумаге, с помощью речи и т.д. В нем используются свойства, связанные с цветом и позволяющие задавать цвета текста, фона, границ и других элементов документа. Данная спецификация описывает значения цветов, свойство цвета переднего плана и свойство непрозрачности. В нее входят, как новые свойства и их значения, так и свойства из спецификации CSS, Уровень 2.

Статус данного документа

Данный раздел описывает статус данного документа на момент его публикации. Другие документы могут заменить этот документ. Список текущих публикаций W3C и последние редакции данного технического проекта могут быть найдены в указателе технических проектов W3C по адресу http://www.w3.org/TR/.

Общедоступный список рассылки www-style@w3.org  (архивная версия) предназначен и является предпочтительным местом для обсуждения данной спецификации (см. инструкции). При отправке сообщения, указывайте в теме письма текст “css3-color”, желательно, следующего вида: “[css3-color] …резюме комментария…

Данный документ создан рабочей группой по CSS (CSS Working Group) (являющейся частью Style Activity).

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

В списке комментариев к последнему рабочему черновику данного документа описаны сделанные изменения. Комментарии, полученный для версии со статусом Кандидата в Рекомендации (черновик от 14 мая 2003), и то, как они были учтены в этом проекте могут быть найдены в комментариях. Комментарии, получены для версии со статусом Последний отзыв (черновик от 14 февраля 2003), и то, как они были учтены в этом проекте могут быть найдены в комментариях.

Доступен полный список изменений для данного документа.

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

Этот документ был разработан группой, работающей в соответствии с патентной политикой W3C от 5 февраля 2004. W3C поддерживает публичный список открытых патентов, полученных в результате деятельности группы; данная страница также включает инструкции по раскрытию патента. Основные претензии должны предоставляться в соответствии с разделом 6 Патентной Политики W3C.

Содержание


1. Вступление

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

Данный модуль описывает CSS свойства, которые позволяют указывать цвета переднего плана и непрозрачность элементов. Так же в данном модуле детально описывается тип значения <цвет>.

Здесь описаны не только цветовые свойства и их значения, уже определенные в спецификациях CSS1 и CSS2, а также новые свойства и значения.

Рабочая группа не ожидает, что во всех реализациях CSS3 будет обеспечено выполнение всех свойств и значений. Вместо этого, скорее всего, будет небольшое количество вариаций стандарта CSS3, так называемые "профили". Например, может быть, что только профиль для пользовательских агентов с 32-битной цветностью будет включать в себя все предлагаемые цветовые свойства и значения.

Данная спецификация является результатом объединения соответствующих частей из следующих Рекомендаций и Рабочих Черновиков, с добавлением некоторых новых функций:

2. Зависимости

Дополнительная терминология дана в разделе Определения [CSS21]. Примеры фрагментов и исходного кода документов даны с использованием синтаксиса языков разметки XML [XML10] или HTML [HTML401].

3. Цветовые свойства

3.1. Цвет: свойство ‘color

Название: color
Значение: <цвет> | inherit
Значение по-умолчанию: в зависимости от пользовательского агента
Применяется к: все элементы
Наследование: да
Процентные значения: недоступно
Устройства: визуальные
Вычисленное значение:
  • Вычисленное значение для базовых названий цветов, шестнадцатеричных значений цвета в формате RGB и расширенных названий цветов эквивалентно триплету RGB с численными значениями, т.е. шесть шестнадцатеричных цифр или функциональное значение rgb(...), со значением альфа-канала равным 1.
  • Вычисленное значение для  ключевого слова ‘transparent’ тождественно четырем значением в форма RGBA равными нулю, то есть rgba(0,0,0,0).
  • См. определение ‘currentColor’ для того, как определяется его вычисленное значение.
  • Для всех остальных значений, вычисленное значение равняется указанному.

Это свойство определяет цвет текста элемента. Дополнительно, это свойство используется чтобы косвенно установить значение ключевого слова (currentColor) для любых других свойств, которые принимают цветовые значения. Если ключевое слово ‘currentColor’ используется, чтобы установить цвет непосредственно для свойства ‘color’, то оно трактуется как наследование цвета ‘color: inherit’.

 Есть различные способы назначить цвет лайм:

Пример(ы):

em { color: lime }               /* ключевое слово */
em { color: rgb(0,255,0) }       /* RGB в диапазоне 0-255   */
<цвет>
Единицы значения цвета определены в следующем разделе.

3.2. Непрозрачность: свойство ‘opacity

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

Название: opacity
Значение: <альфа-значение> | inherit
Значение по-умолчанию: 1
Применяется к: все элементы
Наследование: нет
Процентные значения: недоступно
Устройства: визуальные
Вычисленное значение: Такое же как указанное, после того как <альфа-значение> значение приведено к диапазону [0.0,1.0].
<альфа-значение>
Синтаксически является значением типа <целое число>. Параметр непрозрачности равномерно применяется ко всему объекту. Любые значения вне диапазона от 0.0 (полностью прозрачно) до 1.0 (полностью непрозрачно) будут ужаты до данного диапазона. Если объект является контейнером для других элементов, тогда эффект будет таким же, как если бы содержимое элемента было совмещено с текущим фоном, используя маску, каждый пиксель который принимает значение <альфа-значение>.

Поскольку элемент с непрозрачностью меньше чем 1 состоит из единого закадрового изображения, содержание вне этого элемента не может быть помещено между слоев внутри данного элемента (с учетом порядка вдоль оси z). По этим причинам, реализации должны создавать новый последовательный контекст для любого элемента с прозрачностью меньшей чем 1. Если элемент с непрозрачностью меньшей чем 1 не позиционирован по оси z, реализация должна нарисовать слой, который создается, в родительском контексте, в том же порядок размещения, который использовался бы, если элемент был расположен с параметрами ‘z-index: 0’ и ‘opacity: 1’. Если элемент с непрозрачностью меньшей чем 1 позиционирован по оси z, то свойство ‘z-index’ применяется как описано в [CSS21], за исключением того, что значение ‘auto’ трактуется как ‘0’, поскольку всегда создается новый контекст. См. раздел 9.9 и Приложение E [CSS21] для более детальной информации по многослойному выводу и упорядоваченью в контексте. К SVG элементам, правила описанные в данном параграфе, не применяются, поскольку SVG имеют свою собственную модель отображения ([SVG11], Глава 3).

4. Единицы определения цвета

Тип <Цвет> может быть представлен как ключевым словом, так и численным значением.

4.1. Базовые названия цветов

Список основных ключевых слов, используемых для определения цвета включает следующие названия: aqua (морская волна), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (лайм), maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (фиолетовый), red (красный), silver (серебряный), teal (зеленовато-голубой), white (белый), и yellow (желтый). Написание названий цветов регистронезависимо.

Названия цветов и sRGB значения
По названию
цвета
По числовому
значению
Название цвета Шестнадцатеричный
формат
Десятичный
формат
    black
(черный)
#000000 0,0,0
    silver
(серебряный)
#C0C0C0 192,192,192
    gray
(серый)
#808080 128,128,128
    white
(белый)
#FFFFFF 255,255,255
    maroon
(темно-бордовый)
#800000 128,0,0
    red
(красный)
#FF0000 255,0,0
    purple
(фиолетовый)
#800080 128,0,128
    fuchsia
(фуксия)
#FF00FF 255,0,255
    green
(зеленый)
#008000 0,128,0
    lime
(лайм)
#00FF00 0,255,0
    olive
(оливковый)
#808000 128,128,0
    yellow
(желтый)
#FFFF00 255,255,0
    navy
(темно-синий)
#000080 0,0,128
    blue
(синий)
#0000FF 0,0,255
    teal
(зеленовато-голубой)
#008080 0,128,128
    aqua
(цвет морской воды)
#00FFFF 0,255,255

Пример(ы):

body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

4.2. Численные значения для определения цвета

4.2.1. Значения цвета в формате RGB

При числовом задании цвета можеть использоваться цветовая модель RGB. Во всех следующих примерах указывается один и тот же цвет:

Пример(ы):

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }

Формат RGB значения в шестнадцатеричной записи начинается с символа ‘#’ непосредственно за которым следует три или шесть шестнадцатеричных цифр. Трех цифирная запись RGB (#rgb) преобразуется в последовательность из шести цифр (#rrggbb) путем дублирования цифр, а не добавления нулей. Например, #fb0 расширяется до #ffbb00. Это гарантирует то, что белый цвет (#ffffff) может быть представлен в сокращенной записи (#fff) и исчезает любая зависимость от глубины цвета дисплея.

Формат RGB значения в функциональной записи начинается с подстроки ‘rgb(’ непосредственно за которой следует список из трех, разделенных запятыми, вещественных значений (или целочисленных, или процентных) непосредственно за которым следует символ ‘)’. Целочисленное значение 255 соответствует 100%, и F или FF в шестнадцатеричной записи: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Допускается использование пробелов вокруг численных значений.

Все RGB цвета представлены в пространстве цвета sRGB (см. [SRGB]). Хотя пользовательские агенты могут представлять цвета с разной точностью, но использование пространства sRGB дает возможность однозначного определения цвета, соотносимого с международным стандартом (см. [COLORIMETRY]).

Значения вне цветовой гаммы устройства следует ужимать или преобразовывать до цветового диапазона устройства, когда оно известно: красный, зеленый и голубой должны быть изменены так, что бы результирующий цвет попал в цветовой диапазон устройства. Пользовательские агенты могу выполнять преобразования цветов из одной гаммы в другую более высокого качества. Эта спецификация не определяет точное поведение при преобразовании цветов. Для типичного CRT монитора, гамма которого соответствует пространству цвета sRGB, следующие четыре правила представляют один и тот же цвет:

Пример(ы):

em { color: rgb(255,0,0) }       /* целочисленный диапазон 0 - 255 */
em { color: rgb(300,0,0) }       /* урезанно до rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* урезанно до rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) }  /* урезанно до rgb(100%,0%,0%) */

Другие устройства, например, такие как принтеры, имеют гамму цветов отличную от пространства цвета sRGB; некоторые цвета, находящиеся за пределами диапазон 0..255 sRGB будут отображаться (в рамках цветового диапазона устройства), в то время как другие цвета из диапазона 0..255 sRGB будут лежать за пределами цветовой гаммы устройства, и поэтому будут усечены.

4.2.2. Значения цвета в формате RGBA

Цветовая модель RGB расширена в данной спецификации, так чтобы включать значение “альфа-канала”, чтобы позволить указывать непрозрачность цвета. Для пояснений смотри раздел простая альфа-композиция. Во всех следующих примерах указывается один и тот же цвет:

Пример(ы):

em { color: rgb(255,0,0) }      /* целочисленный диапазон 0 - 255 */
em { color: rgba(255,0,0,1)     /* тоже, но с явно указанной непрозрачностью 1 */
em { color: rgb(100%,0%,0%) }   /* процентный диапазон 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* тоже, но с явно указанной непрозрачностью 1 */

В отличии от значений в формате RGB, значение цвета в формате RGBA не имеет шестнадцатеричной записи.

Формат RGBA значения в функциональной записи начинается с подстроки ‘rgba(’ непосредственно за которой следует список из трех разделенных запятыми вещественных значений (или целочисленных, или процентных) , за которым следует <альфа-значение>, за которыми следует символ ‘)’. Целочисленное значение 255 соответствует 100%, rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8). Допускается использование пробелов вокруг численных значений.

Реализация должна сопоставлять красный, зеленый, голубой компоненты значения RGBA вне цветового диапазона устройства в соответствии с правилами для RGB значений.

Следующие примера показывают возможные эффекты, которые можно достичь с использованием rgba() записи:

Пример(ы):

p { color: rgba(0,0,255,0.5) }        /* полупрозрачный синий */
p { color: rgba(100%, 50%, 0%, 0.1) } /* почти прозрачный оранжевый */

Примечание. Если значения в формате RGBA не поддерживаются пользовательским агентами, то эти значения должны считаться неопознанными с учетом правил разбора CSS ([CSS21], Глава 4). RGBA значения не должны представляться просто как RGB значения, с проигнорированным значением непрозрачности.

4.2.3. Ключевое слово transparent

В CSS1 представлено значение ‘transparent’ для свойства background-color (цвет фона). В CSS2 возможно использовать значение ‘transparent’ так же и для определения свойства border-color (цвет рамки). Open eBook(tm) Publication Structure 1.0.1 [OEB101] расширяет свойство ‘color’ чтобы использовать ключевое слово ‘transparent’. В CSS3 расширено определение значение цвета так, чтобы включать ключевое слово ‘transparent’, чтобы позволить использовать его во всех свойствах, которые могут принимать значения <цвет>. Это упрощает определение этих свойств в CSS3.

transparent
Полностью прозрачный. Данное ключевое слово может быть использовано в качестве сокращенной записи для прозрачного черного, вычисленным значением которого является rgba(0,0,0,0).

4.2.4. Значение цвета в формате HSL

CSS3 добавляет численные оттенок-насыщенность-светлость (HSL) цвета в качестве дополнения к численным RGB цветам. Было отмечено, что RGB цвета имеют следующие ограничения:

Есть и другие возможные цветовые схемы. Некоторыми преимуществами формата HSL является то, что он симметричен относительно свойств светлоты и темноты, и существует тривиальный алгоритм перевода HSL в RGB.

HSL цвета кодируются как триплеты (оттенок, насыщенность, яркость). Оттенок представлен как угол в цветовом круге (представление радуги в качестве круга). Так как этот угол обычно измеряется в градусах, эта величина подразумевается в CSS; но синтаксически, дано только <число>. По определению, red(красный цвет)=0=360, и другие цвета распределены по кругу, поэтому зеленый=120, синий=240, и т.д. Так как данная величина угол, из этого вытекает что -120=240 и 480=120. Одна возможность для реализации - это нормализация значения угла x в диапазоне [0,360) (т.е. от 0 градусов, включительно, до 360 градусов, исключая само значение 360), которая вычисляется по формуле (((x mod 360) + 360) mod 360). Насыщенность и светлость представлена процентами. 100% это полная насыщенность, а 0% это оттенок серого. Светлость в 0% соответствует черному, светлость в 100% соответствует белому, и светлость в 50% - “нормальная”.

Так, например:

Пример(ы):

* { color: hsl(0, 100%, 50%) }   /* красный */
* { color: hsl(120, 100%, 50%) } /* лайм */
* { color: hsl(120, 100%, 25%) } /* темно-зеленый */
* { color: hsl(120, 100%, 75%) } /* светло-зеленый */
* { color: hsl(120, 75%, 75%) }  /* пастельный зеленый, и т.д. */

Преимущество модели цвета HSL над RGB это то, что она намного интуитивно понятнее: вы можете угадывать цвета, которые вы хотите использовать, а потом немного корректировать и подстраивать их. Кроме того, проще создавать наборы соответствующего цвета (путем варьирования светлости/темнотв и насыщенности при неизменяемом оттенке )

Если насыщенность меньше 0%, в реализации это значение должно обрезаться до 0%. Если итоговое значение находится вне цветового диапазона устройства, в реализации оно должно сжиматься до досутпной цветовой гаммы. Это урезание должно, по возможности, сохранять значение оттенока, если это возможно, а в остальном неопределенно. (Другими словами, данное отсечение отличается от применения правил отсечения для формата цветов RGB, после применение следующего алгоритма перевода HSL в RGB.)

Алгоритм конвертации HSL в RGB простой (здесь алгоритм представлен в формате ABC [ABC] и он использовался для генерации последующих таблиц.) В этих алгоритмах, предполагается что все три значения (H, S и L) нормализованны в диапазон 0..1:

    HOW TO RETURN hsl.to.rgb(h, s, l):
       SELECT:
	  l<=0.5: PUT l*(s+1) IN m2
	  ELSE: PUT l+s-l*s IN m2
       PUT l*2-m2 IN m1
       PUT hue.to.rgb(m1, m2, h+1/3) IN r
       PUT hue.to.rgb(m1, m2, h    ) IN g
       PUT hue.to.rgb(m1, m2, h-1/3) IN b
       RETURN (r, g, b)

    HOW TO RETURN hue.to.rgb(m1, m2, h):
       IF h<0: PUT h+1 IN h
       IF h>1: PUT h-1 IN h
       IF h*6<1: RETURN m1+(m2-m1)*h*6
       IF h*2<1: RETURN m2
       IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6
       RETURN m1
4.2.4.1. Примеры HSL

Далее для каждой таблицы установлено одно значение оттенка. Двенадцать цветов с одинаковым между ними расстоянием (т.е. с интервалом в 30°) выбраны из цветового круга: красный, желтый, зеленый, голубой, синий, пурпурный, со всеми промежуточными цветами (последний это цвет между пурпурным и красным).

Ось X в каждой таблице представлена насыщенностью (100%, 75%, 50%, 25%, 0%).

Ось Y представляет светлоту. где 50% - “нормальная”.


0° Красный

Насыщенность

100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

30° Красно-желтый

Насыщенность

100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

60° Желтый

Насыщенность

100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

90° Желто-зеленый

Насыщенность

100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

120° Зеленый

Насыщенность

100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

150° Зелено-голубой

Насыщенность

100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

180° Голубой

Насыщенность

100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

210° Голубо-синий

Насыщенность

100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

240° Синий

Насыщенность

100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

270° Сине-пурпурный

Насыщенность

100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

300° Пурпурный

Насыщенность

100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

330° Пурпурно-красный

Насыщенность

100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

4.2.5. Значение цвета в формате HSLA

Так же как для функциональной записи ‘rgb()’ существует копия с альфа-каналом ‘rgba()’, так и функциональная запись ‘hsl()’ имеет аналогичную запись ‘hsla()’ с альфа-каналом. Для пояснений смотри раздел простая альфа-композиция. Во всех следующих примерах указывается один и тот же цвет:

Пример(ы):

em { color: hsl(120, 100%, 50%) }     /* зеленый */
em { color: hsla(120, 100%, 50%, 1) } /* тоже с явно указанной непрозрачностью 1 */

Значения цвета в формате HSLA в функциональной записи начинается с подстроки ‘hsla(’ непосредственно за которой следуют значения оттенка в градусах, насыщенности и светлости в процентах, а так же значение альфа-канала <альфа-значение>, и завершающая скобка ‘)’. Допускается  использование символов пустого пространства вокруг числовых значений.

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

Следующие примеры показывают возможные эффекты, которые можно достичь с использованием hsla() нотации:

Пример(ы):

p { color: hsla(240, 100%, 50%, 0.5) } /* полу-прозрачный голубой цвет */
p { color: hsla(30, 100%, 50%, 0.1) }  /* практически полностью прозрачный оранжевый */

4.3. Расширенные названия цветов

В следующей таблице представлен список цветов X11 [X11COLORS],  поддерживающийся популярными браузерами с дополнением вариаций написания серого (gray/grey) из спецификации SVG 1.0. Итоговый список является точно таким же как и список ключевых слов названий цветов SVG 1.0. Эта спецификация расширяет свое определение за стандарт SVG. Два образца цветов слева иллюстрируют установки цвета фона в ячейки таблицы двумя путями: в первой колонке цвет установлен с использование имений цвета, а во второй колонке используется соответствующее значение в числовом формате.

По названию
цвета
По числовому
значению
Название цвета Шестнадцатеричный
формат
Десятичный
формат
    aliceblue
()
#f0f8ff 240,248,255
    antiquewhite
()
#faebd7 250,235,215
    aqua
(морской волны)
#00ffff 0,255,255
    aquamarine
(аквамариновый)
#7fffd4 127,255,212
    azure
(лазурный)
#f0ffff 240,255,255
    beige
(беж)
#f5f5dc 245,245,220
    bisque
(бисквитный)
#ffe4c4 255,228,196
    black
(черный)
#000000 0,0,0
    blanchedalmond
()
#ffebcd 255,235,205
    blue
(синий)
#0000ff 0,0,255
    blueviolet
(сине-лиловый)
#8a2be2 138,43,226
    brown
(коричневый)
#a52a2a 165,42,42
    burlywood
()
#deb887 222,184,135
    cadetblue
()
#5f9ea0 95,158,160
    chartreuse
()
#7fff00 127,255,0
    chocolate
(шоколадный)
#d2691e 210,105,30
    coral
(коралловый)
#ff7f50 255,127,80
    cornflowerblue
(васильковый)
#6495ed 100,149,237
    cornsilk
()
#fff8dc 255,248,220
    crimson
()
#dc143c 220,20,60
    cyan
(голубой)
#00ffff 0,255,255
    darkblue
(темно-синий)
#00008b 0,0,139
    darkcyan
(темно-голубой)
#008b8b 0,139,139
    darkgoldenrod
(темно-золотисто-красный)
#b8860b 184,134,11
    darkgray
(темно-серый)
#a9a9a9 169,169,169
    darkgreen
(темно-зеленый)
#006400 0,100,0
    darkgrey
(темно-серый)
#a9a9a9 169,169,169
    darkkhaki
(темный хаки)
#bdb76b 189,183,107
    darkmagenta
()
#8b008b 139,0,139
    darkolivegreen
()
#556b2f 85,107,47
    darkorange
(темно-оранжевый)
#ff8c00 255,140,0
    darkorchid
()
#9932cc 153,50,204
    darkred
(темно-красный)
#8b0000 139,0,0
    darksalmon
(темно-лососевый)
#e9967a 233,150,122
    darkseagreen
()
#8fbc8f 143,188,143
    darkslateblue
(темно-аспидно-синий)
#483d8b 72,61,139
    darkslategray
(темно-аспидно-серый)
#2f4f4f 47,79,79
    darkslategrey
(темно-аспидно-серый)
#2f4f4f 47,79,79
    darkturquoise
()
#00ced1 0,206,209
    darkviolet
()
#9400d3 148,0,211
    deeppink
()
#ff1493 255,20,147
    deepskyblue
()
#00bfff 0,191,255
    dimgray
(тускло-серый)
#696969 105,105,105
    dimgrey
(тускло-серый)
#696969 105,105,105
    dodgerblue
()
#1e90ff 30,144,255
    firebrick
(кирпичный)
#b22222 178,34,34
    floralwhite
(цветочно-белый)
#fffaf0 255,250,240
    forestgreen
(лесной зелени)
#228b22 34,139,34
    fuchsia
(фуксии)
#ff00ff 255,0,255
    gainsboro
()
#dcdcdc 220,220,220
    ghostwhite
(призрачно-белый)
#f8f8ff 248,248,255
    gold
(золотистый)
#ffd700 255,215,0
    goldenrod
(золотисто-красный)
#daa520 218,165,32
    gray
(серый)
#808080 128,128,128
    green
(зеленый)
#008000 0,128,0
    greenyellow
(зелено-желтый)
#adff2f 173,255,47
    grey
(серый)
#808080 128,128,128
    honeydew
(медовой росы)
#f0fff0 240,255,240
    hotpink
(ярко-розовый)
#ff69b4 255,105,180
    indianred
()
#cd5c5c 205,92,92
    indigo
(индиго)
#4b0082 75,0,130
    ivory
()
#fffff0 255,255,240
    khaki
()
#f0e68c 240,230,140
    lavender
()
#e6e6fa 230,230,250
    lavenderblush
()
#fff0f5 255,240,245
    lawngreen
()
#7cfc00 124,252,0
    lemonchiffon
()
#fffacd 255,250,205
    lightblue
()
#add8e6 173,216,230
    lightcoral
()
#f08080 240,128,128
    lightcyan
()
#e0ffff 224,255,255
    lightgoldenrodyellow
()
#fafad2 250,250,210
    lightgray
(светло-серый)
#d3d3d3 211,211,211
    lightgreen
(светло-зеленый)
#90ee90 144,238,144
    lightgrey
(светло-серый)
#d3d3d3 211,211,211
    lightpink
(светло-розовый)
#ffb6c1 255,182,193
    lightsalmon
(светло-лососевый)
#ffa07a 255,160,122
    lightseagreen
()
#20b2aa 32,178,170
    lightskyblue
()
#87cefa 135,206,250
    lightslategray
(светло-аспидно-серый)
#778899 119,136,153
    lightslategrey
(светло-аспидно-серый)
#778899 119,136,153
    lightsteelblue
()
#b0c4de 176,196,222
    lightyellow
(светло-желтый)
#ffffe0 255,255,224
    lime
(лайм)
#00ff00 0,255,0
    limegreen
()
#32cd32 50,205,50
    linen
()
#faf0e6 250,240,230
    magenta
()
#ff00ff 255,0,255
    maroon
(темно-бордовый)
#800000 128,0,0
    mediumaquamarine
()
#66cdaa 102,205,170
    mediumblue
(умеренно-синий)
#0000cd 0,0,205
    mediumorchid
()
#ba55d3 186,85,211
    mediumpurple
()
#9370db 147,112,219
    mediumseagreen
()
#3cb371 60,179,113
    mediumslateblue
()
#7b68ee 123,104,238
    mediumspringgreen
()
#00fa9a 0,250,154
    mediumturquoise
()
#48d1cc 72,209,204
    mediumvioletred
()
#c71585 199,21,133
    midnightblue
()
#191970 25,25,112
    mintcream
()
#f5fffa 245,255,250
    mistyrose
(туманно-розовый)
#ffe4e1 255,228,225
    moccasin
()
#ffe4b5 255,228,181
    navajowhite
()
#ffdead 255,222,173
    navy
(морской)
#000080 0,0,128
    oldlace
()
#fdf5e6 253,245,230
    olive
(оливковый)
#808000 128,128,0
    olivedrab
(нежно-оливковый)
#6b8e23 107,142,35
    orange
(оранжево)
#ffa500 255,165,0
    orangered
(оранжево-красный)
#ff4500 255,69,0
    orchid
()
#da70d6 218,112,214
    palegoldenrod
(бледно-золотисто-красный)
#eee8aa 238,232,170
    palegreen
(бледно-зеленый)
#98fb98 152,251,152
    paleturquoise
()
#afeeee 175,238,238
    palevioletred
(бледно-лилово-красный)
#db7093 219,112,147
    papayawhip
()
#ffefd5 255,239,213
    peachpuff
(персиковый)
#ffdab9 255,218,185
    peru
()
#cd853f 205,133,63
    pink
(розовый)
#ffc0cb 255,192,203
    plum
(сливовый)
#dda0dd 221,160,221
    powderblue
()
#b0e0e6 176,224,230
    purple
(пурпурный)
#800080 128,0,128
    red
(красный)
#ff0000 255,0,0
    rosybrown
(розово-коричневый)
#bc8f8f 188,143,143
    royalblue
(королевский голубой)
#4169e1 65,105,225
    saddlebrown
()
#8b4513 139,69,19
    salmon
(лососевый)
#fa8072 250,128,114
    sandybrown
()
#f4a460 244,164,96
    seagreen
(морской волны)
#2e8b57 46,139,87
    seashell
(морской раковины)
#fff5ee 255,245,238
    sienna
(охра)
#a0522d 160,82,45
    silver
(серебристый)
#c0c0c0 192,192,192
    skyblue
(небесно-голубой)
#87ceeb 135,206,235
    slateblue
(аспидно-синий)
#6a5acd 106,90,205
    slategray
(аспидно-серый)
#708090 112,128,144
    slategrey
(аспидно-серый)
#708090 112,128,144
    snow
(снежный)
#fffafa 255,250,250
    springgreen
(весенней зелени)
#00ff7f 0,255,127
    steelblue
(голубовато-стальной)
#4682b4 70,130,180
    tan
(желтовато-коричневый)
#d2b48c 210,180,140
    teal
(зеленовато-голубой)
#008080 0,128,128
    thistle
(цветок чертополоха)
#d8bfd8 216,191,216
    tomato
(томатный)
#ff6347 255,99,71
    turquoise
(бирюзовый)
#40e0d0 64,224,208
    violet
(лиловый)
#ee82ee 238,130,238
    wheat
(пшеничный)
#f5deb3 245,222,179
    white
(белый)
#ffffff 255,255,255
    whitesmoke
(бело-дымчатый)
#f5f5f5 245,245,245
    yellow
(желтый)
#ffff00 255,255,0
    yellowgreen
(желто-зеленый)
#9acd32 154,205,50

4.4. Ключевое слово currentColor

В спецификациях CSS1 и CSS2 значение по-умолчанию для свойства border-color’ (цвет рамки) определено как значение свойства ‘color, но не определено соответствующего ключевого слова. Данное упущение было учтено в стандарте SVG, и поэтому в SVG 1.0 представлено значение ‘currentColor для свойств ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’, и ‘lighting-color’. В CSS3 значение цвета расширено так, чтобы включить ключевое слово ‘currentColor’ и позволить его использовать со всеми свойствами, которые принимают значение типа <цвет>. Это упрощает определение этих свойств в CSS3.

currentColor
Значение свойства ‘color’. Вычисляемое значение ключевого слова ‘currentColor’ соответствует вычисляемому значению свойства ‘color’. Если ключевое слово ‘currentColor’ само используется для установки значения свойства ‘color’, то оно интерпретируется как ‘color: inherit’.

4.5. Системные цвета CSS

4.5.1. Системные цвета CSS2

Нежелательно к использованию. Кроме использования заранее определенных значений цветов для текста, фона и т.п., CSS2 позволяет авторам определять цвета таким образом, чтобы соответствовать графической среде пользователя.

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

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

ActiveBorder
Цвет границы активного окна.
ActiveCaption
Цвет заголовка активного окна.
AppWorkspace
Цвет фона многооконного интерфейса.
Background
Цвет фона рабочего стола.
ButtonFace
Цвет фона лицевой стороны трехмерного элемента.
ButtonHighlight
Цвет границы трехмерного элемента, расположенной вблизи от источника света.
ButtonShadow
Цвет границы трехмерного элемента, расположенной вдали от источника света.
ButtonText
Цвет текста кнопки.
CaptionText
Цвет текста заголовка окна, элементов управления размерами, и стрелочных блоках полосы прокрутки.
GrayText
Цвет отключенного (недоступного) текста. Если текущий драйвер дисплея не поддерживает насыщенно-серый цвет, для этого цвета устанавливается значение #000.
Highlight
Цвет выбранных элементов.
HighlightText
Цвет текста выбранных элементов.
InactiveBorder
Цвет границы неактивного окна.
InactiveCaption
Цвет заголовка неактивного окна.
InactiveCaptionText
Цвет текста неактивного заголовка.
InfoBackground
Цвет фона всплывающих подсказок.
InfoText
Цвет текста всплывающих подсказок.
Menu
Цвет фона меню.
MenuText
Цвет текста меню.
Scrollbar
Цвет полосы прокрутки.
ThreeDDarkShadow
Цвет темной (в целом внешняя) из двух границ, стоящих вдали от источника света для трехмерных элементов, у которых появляется эффект 3-D из-за двух концентрических слоев, окружающих рамку.
ThreeDFace
Цвет фона "лицевой" стороны трехмерных элементов, у которых появляется из-за двух концентрических слоев, окружающих рамку.
ThreeDHighlight
Цвет светлой (в целом внешняя) из двух границ, стоящих перед источником света для трехмерных элементов, у которых появляется эффект 3-D из-за двух концентрических слоев, окружающих рамку.
ThreeDLightShadow
Цвет темной (в целом внутренняя) из двух границ, стоящих перед источником света для трехмерных элементов, у которых появляется эффект 3-D из-за двух концентрических слоев, окружающих рамку.
ThreeDShadow
Цвет светлой (в целом внутренняя) из двух границ, стоящих вдали от источника света для трехмерных элементов, у которых появляется эффект 3-D из-за двух концентрических слоев, окружающих рамку.
Window
Цвет фона окна.
WindowFrame
Цвет рамки окна.
WindowText
Цвет текста окна.

Устаревшие пример(ы):

Например, следующее правило позволяет установить одинаковые цвета для текста и фона в абзаце и в пользовательском окне:

p { color: WindowText; background-color: Window }

Примечание. Системные цвета CSS2 являются устаревшими и нежелательными к использованию в пользу свойства ‘appearance’ модуля CSS3 UI. Если вы хотите эмулировать внешний вид связанных с пользовательским интерфейсом элементов или управляющих элементов, пожалуйста, используйте свойство ‘appearance’ вместо того чтобы, имитировать эти элементы на основе сочетания системных цветов.

4.6. Замечания об использовании цветов

Хотя цвета могут существенно расширить объем информации в документе и сделать их более читаемыми, пожалуйста, учитывайте рекомендации в руководстве W3C Web Content Accessibility Guidelines [WCAG20], когда используете цвета в ваших документах

5. Простая альфа-композиция

Во время отрисовки, реализация должна отрабатывать альфа смешивание с учетом правил описанных в Разделе 14.2 Смешивание по альфа каналу в спецификации [SVG11]. (Если свойства ‘color-interpolation’ и ‘color-rendering’, упомянутые в спецификации не применяются или не реализованы, то реализация должна действовать так, как будто они имеют свои значения по-умолчанию.)

6. Образец таблицы стилей для (X)HTML

Данный раздел не является нормативным. Этот пример таблицы стилей может быть использован в реализации как часть стиля по умолчанию для документов в форматах HTML4, XHTML1, XHTML1.1, XHTML Basic, и других форматов семейства XHTML.

html {
	color: black;
	background: white;
}


/* цвета, традиционно, используемые пользовательскими агентами для гиперссылок */
:link    { color: blue; }
:visited { color: purple; }

/* default focus outline */
:focus {
	outline: 1px dotted;  /* или 1px dotted invert */
}

7. Профили

Любая спецификация, которая использует модуль CSS3 Цвет, должна определять набор особенностей модуля, которые используются и исключены, и описывать местное значение всех компонентов данного набора.

Не нормативные примеры:

CSS3 Цветовые профили
Спецификация HTML4
Допустимо к использованию базовые названия цветов
значение цвета в формате RGB шести-цифирной шестнадцатеричной записи
Исключено свойство ‘color
свойство ‘opacity
значение цвета в формате RGB трех-цифирной шестнадцатеричной записи
значение цвета в формате RGB функциональной записи
значение цвета в формате RGBA
значение цвета в формате HSL и HSLA
расширенные названия цветов
значение цвета ‘currentColor
цвета интерфейса пользователя CSS2
значение цвета ‘transparent
Дополнительные ограничения нет
CSS3 Цветовые профили
Спецификация CSS Уровень 1
Допустимо к использованию свойство ‘color
базовые названия цветов
значение цвета в формате RGB
Исключено свойство ‘opacity
значение цвета в формате RGBA
значение цвета в формате HSL и HSLA
расширенные названия цветов
значение цвета ‘currentColor
цвета интерфейса пользователя CSS2
значение цвета ‘transparent
Дополнительные ограничения нет
CSS3 Цветовые профили
Спецификация CSS Уровень 2
Допустимо к использованию свойство ‘color
базовые названия цветов
значение цвета RGB
цвета интерфейса пользователя CSS2
значение цвета ‘transparent
Исключено свойство ‘opacity
значение цвета в формате RGBA
значение цвета в формате HSL и HSLA
расширенные названия цветов
значение цвета ‘currentColor
Дополнительные ограничения значение цвета ‘transparent’ не допускается использовать для свойства ‘color
значение цвета ‘orange’ (входит в расширенные названия цветов) допустимо в CSS Уровень 2 редакция 1
CSS3 Цветовые профили
Спецификация SVG 1.0 и 1.1
Допустимо к использованию свойство ‘color
свойство ‘opacity
базовые названия цветов
значение цвета в формате RGB
цвета интерфейса пользователя CSS2
расширенные названия цветов
значение цвета ‘currentColor
Исключено значение цвета в формате RGBA
значение цвета в формате HSL и HSLA
значение цвета ‘transparent
Дополнительные ограничения Значение цвета ‘currentColor’ не допускается использовать для свойства ‘color

8. Тесты

Был разработан набор тестов для модуля CSS Цвет, хотя в дальнейшем еще тесты могут быть добавлены. Данный набор тестов предназначен для проверки соответствия пользовательских агентов основам спецификации. Этот тестовый набор не претендует на исчерпывающую полноту и не охватывает все возможные числовые значения цветов. Данные тесты доступны по адресу http://www.w3.org/Style/CSS/Test/CSS3/Color/current/.

9. Объявление о реализации исключенных особенностей

Часть особенностей и возможностей, представленных в Кандидате в Рекомендации от 14 мая 2003 более не представлены в данной спецификации. Однако, необходимость реализации этих возможностей остается, и они могут быть включены в следующие уровни данной спецификации при достаточно успешных реализациях и тестов, демонстрирующих совместимость. Эти особенности включают в себя:

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

Благодарим Brad Pettit как за описания цветовых профилей, так и за их реализацию. Спасибо Steven Pemberton за его описание цветов в формате HSL. Особую благодарность за обратную связь выражаем Marc Attinasi, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczyński, Chris Moschini, Chris Murphy, Christoph Päper, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, подгруппе XSL FO рабочей группы XSL, и всему остальному сообществу www-style. А так же благодарим Chris Lilley за то, что являлся постоянным экспертом CSS Цвет.

11. Изменения

Данный документ отличается от предыдущей версии Предлагаемые Рекомендации, от 28 октября 2010, в следующем: дата, статус и стиль документа обновлены до Рекомендации W3C, обновлен список ссылок, и больше никаких существенных изменений не внесено.

12. Библиография

12.1. Нормативные документы

[COLORIMETRY]
Colorimetry, Third Edition. CIE 15:2004. ISBN 978-3-901906-33-6
[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607
[SRGB]
Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB. IEC 61966-2-1 (1999-10) ISBN: 2-8318-4989-6 - ICS codes: 33.160.60, 37.080 - TC 100 - 51 pp. as amended by Amendment A1:2003. URL: http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf
[SVG11]
Jon Ferraiolo et al. Scalable Vector Graphics (SVG) 1.1. 14 January 2003. W3C Recommendation. URL: http://www.w3.org/TR/2003/REC-SVG11-20030114/

12.2. Справочная литература

[ABC]
Leo Geurts; Lambert Meertens; Steven Pemberton. The ABC Programmer's Handbook. Prentice-Hall. ISBN: 0-13-000027-2. URL: http://www.cwi.nl/~steven/abc
[CSS2]
Ian Jacobs; et al. Cascading Style Sheets, level 2 (CSS2) Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS2-20080411
[CSS3UI]
Tantek Çelik. CSS3 Basic User Interface Module. 11 May 2004. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2004/CR-css3-ui-20040511
[HTML401]
David Raggett; Ian Jacobs; Arnaud Le Hors. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
[OEB101]
Open eBook(tm) Publication Structure 1.0.1. Open eBook Forum(tm). 02 July 2001. URL: http://www.openebook.org/oebps/oebps1.0.1/download/oeb101-xhtml.htm
[SVG10]
Jon Ferraiolo. Scalable Vector Graphics (SVG) 1.0 Specification. 4 September 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-SVG-20010904
[WCAG20]
Michael Cooper; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-WCAG20-20081211
[X11COLORS]
X11 Color Names URL: http://en.wikipedia.org/wiki/X11_color_names
[XML10]
C. M. Sperberg-McQueen; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 26 November 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-xml-20081126/

Указатель

Указатель свойств

Свойство Значение Значение по-умолчанию
Применяется к
Наследование Процентные значения
Устройства
color <цвет> | inherit в зависимости от пользовательского агента
все элементы да недоступно визуальные
opacity <альфа-канал> | inherit 1 все элементы нет недоступно визуальные