Диклеймер: в статье не ничего про браузеры и поддержку, только теория. Статья представляет собой неполный перевод спецификации c некоторыми дополнениями.
Глоссарий
Факт 1: цвет — это не характеристика излучения, это характеристика реакции человеческого глаза на излучение. То есть два излучения с разным спектром могут иметь один цвет с нашей точки зрения.
Факт 2: далеко не все цвета, которые видит среднестатистический человек, можно воспроизвести аппаратными средствами, в том числе с помощью ваше монитора.
Цветовое пространство — некоторое заданное множество цветов.
Цветовая система — способ задания цвета в цветовом пространстве.
Цветовой профиль — множество цветов, которые может отобразить монитор.
Тип <color>
Цвета в CSS представлены в виде списка компонентов, также иногда называемых «каналами», представляющих оси в цветовом пространстве. Каждый канал имеет верхнюю и нижнюю границу и может принимать любое значение между ними. Каждый цвет сопровождается альфа-компонентом, указывающим, насколько он прозрачен, и, следовательно, какую часть фона можно увидеть за цветом.
Цвета и доступность
Хотя цвета могут добавить значительную информацию к документам и сделать их более читабельными, сам по себе цвет не должен быть единственным средством передачи важной информации. Авторы должны учитывать рекомендации W3C по доступности веб-контента WCAG20 при использовании цвета в своих документах.
Расчет отображаемых цветов
Большинство современных мониторов располагают пространством sRGB для отображения цвета, реже бывает P3. ActualValue соответствует аппаратным ограничениям, то есть выражено в том цветовом пространстве, которое поддерживается на устройстве.
transparent
ComputedValue и UsedValue — прозрачный черный sRGB.hex
,rgb()
andrgba()
,hsl()
andhsla()
,hwb()
,named colors
ComputedValue и UsedValue — соответствующий цвет sRGB в паре с указанным альфа-каналом.lab()
,lch()
иgrey()
ComputedValue и UsedValue — соответствующий цвет CEI Lab в паре с указанным альфа-каналом.device-cmyk()
ComputedValue и UsedValue — соответствующий цвет CMYK для конкретного устройства в паре с указанным альфа-каналом.
* Прочитать про промежуточные значения свойства (ActualValue, ComputedValue, UsedValue) и процесс их вычисления можно в этой спецификации.
Способы задания цвета в CSS
Ключевые слова
В дополнение к различным числовым и функциональным синтаксисам для <color>
, CSS определяет несколько наборов ключевых слов, которые можно использовать для определения цвета.
Именованные цвета
CSS определяет большой набор именованных цветов, чтобы обычные цвета можно было легко писать и читать. 16 названных CSS-цветов исходят из HTML: aqua
, black
, blue
, fuchsia
, gray
, green
, lime
, maroon
, navy
, olive
, purple
, red
, silver
, teal
, white
и yellow
. Большинство остальных происходит от одной версии цветовой системы X11, используемой в системах на основе Unix для указания цветов для консоли.
Полный список можно посмотреть здесь.
SYSTEM COLOR
В режиме повышенной контрастности большинство цветов на странице принудительно выбирается в ограниченной, выбранной пользователем палитре. Ключевые слова<system-color>
предоставляют эти выбранные пользователем цвета, чтобы остальная часть страницы могла интегрироваться с этой
ограниченной палитрой. Полный список можно посмотреть здесь.
Прозрачность и цвет текста
transparent
– прозрачный черный цвет rgb(0 0 0 / 0);
.currentcolor
– значение свойства color
для того же элемента.
Цветовое пространство sRGB
Самое первая из изобретенных цветовых пространств.
Все цвета получаются путём смешения трёх базовых (красного, зелёного и синего) цветов в различных пропорциях. Доля каждого базового цвета в итоговом может восприниматься, как координата в соответствующем трёхмерном пространстве, поэтому это пространство часто называют цветовым кубом.
Цветовая система RGB
Это система предполагает запись количества базовых цветов sRBG напрямую, поэтому вариации ее использования — различные комбинации трех чисел, задающих интенсивность каналов.
RGB() / RGBA()
/* * @param {<number> | <percentage>} --red Красный канал * @param {<number> | <percentage>} --green Зелёный канал * @param {<number> | <percentage>} --blue Синий канал * @param {<number> | <percentage>} [--alpha: 100%] Прозрачность */ color: rgb (var(--red) var(--green) var(--blue) / var(--alpha));
Первые три аргумента --red
, --green
, --blue
указывают красный, зеленый и синий каналы цвета соответственно. 0% - минимальное значение для этого цветового канала в гамме sRGB, а 100% - максимальное значение. Запись в процентах эквивалентна числовой записи, но с другим диапазоном: 0 - минимальное значение для цветового канала, 255 - максимальное.--alpha
– необязательный аргумент, он определяет прозрачность цвета. Если он задан числом, то диапазон значения составляет от 0 (представляет полностью прозрачный цвет) до 1 (представляет полностью непрозрачный цвет). Если значение задано в процентах, то 0% – полностью непрозрачный цвет, а 100% – полностью прозрачный цвет. Дефолтное значение - 100%.rgbа()
имеет точно такой же синтаксис, только без слеша, и существует как легаси, потому что раньше rgb()
не поддерживала четвертый аргумент. Например:
color: rgba (var(--red) var(--green) var(--blue) var(--alpha));
HEX
HEX-нотация цвета CSS позволяет задавать цвет sRGB, задавая каналы в виде шестнадцатеричных чисел, что аналогично тому, как цвета часто записываются непосредственно в компьютерном коде.
Синтаксис <hex-color>
– это токен <hash-token>
, значение которого состоит из 3, 4, 6 или 8 шестнадцатеричных цифр. Другими словами, шестнадцатеричный цвет записывается как хеш-символ «#», за которым следует некоторое количество цифр 0–9 или букв a-f (регистр букв не имеет значения – #00ff00
идентичен #00FF00
).
6 цифр
color: #fffff;
Первая пара цифр, интерпретируемая как шестнадцатеричное число, указывает красный канал цвета, где 00 представляет минимальное значение, а ff (255 в десятичном виде) представляет максимум. Следующая пара цифр обозначает зеленый канал, и затем синий.
8 цифр
color: #fffff00;
Первые 6 цифр интерпретируются идентично 6-значной записи. Последняя пара указывает прозрачность цвета:00
- полностью прозрачный цвет,ff
- полностью непрозрачный.
3 цифры
color:#fff;
Это более короткий вариант 6-значного обозначения. Первая цифра указывает красный канал цвета, где 0 минимальное значение, а f - максимум. Следующие две цифры представляют зеленый и синий каналы, соответственно.
4 цифры
color: #fff0;
Это более короткий вариант 8-значной записи, «расширенный» так же, как и 3-значная запись. Первая цифра указывает красный канал цвета, затем зеленый, синий и альфа-канал соответственно.
Цветовая система HSL
Была изобретена для телевидения в 1938 году Жоржем Валенси в качестве метода добавления цветовой кодировки к существующим черно-белым (т.е. содержащим только L-сигнал) передачам, позволяя существующим приемникам получать передачи с новым форматом цветового вещания.
HSL() / HSLA()
/*
* @param {<number> | <angle>} --hue Оттенок, угол цветового круга
* @param {<percentage>} --saturation Насыщенность
* @param {<percentage>} --lightness Яркость
* @param {<number> | <percentage>} [--alpha: 100%] Прозрачность
*/
color: hsl (var(--hue) var(--saturation) var(--lightness) / var(--alpha));
--hue
– оттенок, представленный в виде угла цветового круга (радуга, закрученная в круг). Угол 0deg представляет красный (как и 360deg, 720deg и т.
д.). Остальные оттенки распределены по кругу, поэтому 120deg представляет зеленый, а 240deg – синий. Аргумент также может быть числом, которое интерпретируется как количество градусов.
--saturation
– насыщенность, 100% – полностью насыщенный яркий цвет, а 0% – полностью ненасыщенный.--lightness
– яркость, 50% – «нормальный» цвет, 100% - белый, 0% - черный. Если насыщенность или яркость меньше 0% или больше 100%, они фиксируются на этих значениях перед преобразованием в цвет RGB.--alpha
– альфа-канал цвета. Интерпретируется идентично четвертому аргументу функции rgb().
Преимущество HSL перед RGB в том, что она гораздо более интуитивна: можно угадать, какие цвета он хочет, а затем настроить. Также проще создавать наборы подходящих цветов (сохраняя одинаковый оттенок и изменяя насыщенность и яркость).
Цветовая система HWB
Цилиндрическая система представления точек пространства sRGB. Была разработана Элви Рэем Смитом в 1996 году, чтобы быть более интуитивно понятной для людей и немного облегчить вычисления. Ментальная модель заключается выборе основного оттенка, а затем смешивании его с белым и / или черным, чтобы получить желаемый цвет.
HWB
/*
* @param {<number> | <angle>} --hue Оттенок, угол цветового круга
* @param {<percentage>} --whiteness Белизна
* @param {<percentage>} --blackness Чернота
* @param {<number> | <percentage>} [--alpha: 100%] Прозрачность
*/
color: hwb (var(--hue) var(--whiteness) var(--blackness) / var(--alpha));
--hue
– оттенок, интерпретируется идентично hsl ().--whiteness
– количество белого для смешивания в процентах от 0% (без белизны) до 100% (полная белизна).--blackness
– количество черного, которое нужно смешать, также от 0% (без черноты) до 100% (полная чернота). Значения вне этих диапазонов делают функцию недействительной. Если их сумма больше 100%, то на стадии вычисления они нормализуются так, чтобы составлять в сумме 100%, с той же пропорцией.--alpha
– альфа-канал цвета, интерпретируется аналогично предыдущим случаям.
Цветовое пространство LAB
В отличие от других цветовых пространств, которые являются набором аппаратных данных для воспроизведения цвета на экране, Lab однозначно определяет цвет. Необычный выбор осей цветности в системе — следствие стремления сделать ее линейной для человеческих глаз. Такое пространство
называется равноконтрастным. За основу взят цветовой квадрат, на него положена декартова система координат (a\b) с центром в центре квадрата, в центр воткнута ось яркости.
LAB()
/*
* @param {<percentage>} --lightness Яркость CIE
* @param {<number>} --a От зеленого до красного
* @param {<number>} --b От синего до желтого
* @param {<number> | <percentage>} [--alpha: 100%] Прозрачность
*/
color: lab (var(--lightness) var(--a) var(--b) / var(--alpha));
--lightness
– яркость CIE. Как правило, это число от 0% (черный цвет) до 100% (белый цвет). Значения менее 0% должны быть зафиксированным до 0% во время рендеринга; допустимы значения, превышающие 100% для прямой совместимости с высоким динамическим диапазоном.--a
– положение цвета в диапазоне примерно от зеленого до красного.--b
– положение цвета в диапазоне примерно от синего до желтого. Эти два значения являются знаковыми (допускаются как положительные, так и отрицательные значения) и теоретически не ограничены (но на практике не превышают ± 160).--alpha
– альфа-канал цвета, интерпретируется аналогично предыдущим случаям.
Цветовое пространство LCH
По сути то же самое что и LAB, только в полярных координатах, поэтому за основу взят цветовой круг. Само пространство цилиндрическое.
LCH()
/*
* @param {<percentage>} --lightness Яркость CIE
* @param {<number>} --chroma Количество цвета
* @param {<number> | <angle>} --hue Оттенок, угол цветового круга
* @param {<number> | <percentage>} [--alpha: 100%] Прозрачность
*/
color: lch (var(--lightness) var(--chroma) var(--hue) / var(--alpha));
--lightness
– яркость CIE. Как правило, это число от 0% (черный цвет) до 100% (белый цвет). Значения менее 0% должны быть зафиксированным до 0% во время рендеринга; допустимы значения, превышающие 100% для прямой совместимости с высоким динамическим диапазоном.--chroma
– количество цвета (насыщенность).--hue
– угол оттенка. Он интерпретируется аналогично аргументу --hue
в hsl()
, но не отображает оттенки на углы одинаково, поскольку они равномерно распределены по восприятию. Вместо этого 0 градусов указывают вдоль положительной оси a
(в пурпурно-красный цвет), 90 градусов указывают вдоль положительной оси b
(в сторону желтого цвета горчицы), 180 градусов указывают вдоль отрицательной оси а
(в сторону зеленоватого голубого) и 270 градусов вдоль отрицательной оси b
(в сторону небесно-голубого цвета). Если предоставленное значение является отрицательным или больше или равно 360deg
, оно устанавливается равным значению по модулю 360.--alpha
– альфа-канал цвета, интерпретируется аналогично предыдущим случаям.
Цветовое пространство cmyk
Пространство создано для удобства полиграфии. В отличии от всех предыдущий, оперирует смещением типографских красок, а не цветов. Наличие черного объясняется тем, что смещение пурпурной, голубой и жёлтой красок даёт скорее грязно-коричневый или грязно-серый цвет в силу неидеальности красителей и погрешностей в пропорциях компонентов. Также, смешение всех трех пигментов излишне смачивает бумагу, повышаю риск деформации и время высыхания.
device-cmyk()
/*
* @param {<number> | <percentage>} --cyan Голубой
* @param {<number> | <percentage>} --magenta Пурпурный
* @param {<number> | <percentage>} --yellow Жёлтый
* @param {<number> | <percentage>} --black Чёрный
* @param {<number> | <percentage>} [--alpha: 100%] Прозрачность
* @param {<color>} [--color: naively convert] Запасной цвет
*/
color: device-cmyk( var(--cyan) var(--magenta) var(--yellow) var(--black) / var(--alpha) var(--color));
Первые четыре аргумента --cyan
, --magenta
, --yellow
и --black
задают голубой, пурпурный, желтый и черный компоненты по
порядку в виде числа от 0 до 1 или процента от 0% до 100%. Эти два использования эквивалентны и отображаются друг на друга линейно. Значения меньше 0 или 0% или больше 1 или 100% не являются недействительными; вместо этого они фиксируются на 0/0% или 1/100% во время вычисленного значения.--alpha
– альфа-канал цвета, интерпретируется аналогично предыдущим случаям.--color
– запасной цвет, используемый, когда пользовательский агент не знает, как точно преобразовать цвет CMYK в RGB. Если опущено, по умолчанию используется цвет CMYK, наивно преобразованный в RGBA:
red = 1 - min(1, cyan * (1 - black) + black)
green = 1 - min(1, magenta * (1 - black) + black)
blue = 1 - min(1, yellow * (1 - black) + black)
Источники и ссылки
P.S. Это тоже может быть интересно: