Значение цвета

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

Цвет можно задавать разными способами: в десятичном формате RGB, по шестнадцатеричному значению (HEX), по названию цвета, цветовому кругу HSL, и многими иными цветовыми пространствами sRGB, P3, ΔE.

Пример: Белый / white / #ffffff | #fff / rgb(255,255,255) / hsl(0 0% 100% / 50%)

RGB

Название формата RGB образовано от сочетания первых букв Red (Красный), Green (Зелёный) и Blue (Синий). Определить цвет можно в десятичном исчислении используя значения составляющей, каждая из трёх компонентов цвета RGB принимает значение от 0 до 255. Также в стилях допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb, а затем в скобках, через запятую указываются компоненты цвета. Если разделитель пробел, то в этом случае можно через слеш добавить альфа-канал непрозрачности 0-1 / 0%-100%.

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. В стилях в диапазоне от 0 до 1, значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности. В скриптах значение в диапазоне от 0 до 127, 0 означает наоборот непрозрачный цвет, 127 означает полную прозрачность, а промежуточное значение вроде 63 — полупрозрачности.

RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.

Пример

CSS:
color: rgb(214, 86, 43);
color: rgb(214 86 43);
color: rgb(83.92%, 33.73%, 16.86%);
color: rgb(214 86 43 / 0.5);
color: rgba(0,128,255,.9);
color: rgba(0%, 50%, 100%, .9);

PHP:
imagecolorallocate($im, 214, 86, 43);
imagecolorallocatealpha($im, 214, 86, 43, 127); //(127-($alpha8>>1))

HEX

Для задания цвета используются числа в шестнадцатеричном формате. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Где цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трёх цветов — красный, зелёный и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зелёную, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00. В скриптах (например PHP) цвет может принимать значения от 0x00 до 0xFF (0-255).

Пример

CSS:
color: #ff6600;
color: #f60;
color: #ff660080; /*прозрачный*/

PHP:
imagecolorallocate($im, 0xff, 0x66, 0x00);
imagecolorallocatealpha($im, 0xff, 0x66, 0x00, 0x7F);

Именованный цвет

Веб-браузеры поддерживают некоторые цвета по их названию из основных цветовых ключевых слов и таблицы именованных цветов.

Пример

CSS:
color: red;
background-color: transparent;
border-bottom: 2px solid currentColor; /* способ унаследовать цвет текста родительского элемента */

HSL

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).
- Оттенок это значение цвета на цветовом круге и задаётся угол в градусах (deg), радианах (rad). Соответствует угл цвету: 0° — красному, 60° — жёлтому, 120° — зелёному, 180° — голубому, 240° — синему, 300° — пурпурный. Значение оттенка может изменяться от 0 до 359.
- Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
- Светлота задаёт, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
- Если разделитель пробел, то в этом случае через слеш можно добавить альфа-канал прозрачности 0-1 или в процентах от 0% до 100%.

Другая цветовая модель HSV (или HSB) похожа на HSL, но в CSS не используется. HSV образовано от сочетания первых букв Hue (Тон), Saturation (Насыщенность), Value (значение) а HSB от Hue (оттенок), Saturation (насыщенность), Brightness (яркость).

Формат HSLA включает в себя альфа-канал, также как RGBA.

Пример

CSS:
color: hsl(60, 100%, 25%);
color: hsl(60deg 100% 25%);
color: hsl(60deg 100% 25% / .5);
color: hsl(60deg 100% 25% / 50%);
color: hsla(60, 100%, 25%, .5);
color: hsla(60, 100%, 25%, 50%);
color: hsla(60 100% 25% / 50%);

Значения цвета в форматах HSL и HSLA добавлены в CSS3.

LCH и OKLCH

Название формата LCH образовано от сочетания первых букв Lightness (яркость), Chroma (насыщенность) и Hue (оттенок).
L - Яркость, передаётся так, как её увидит глаз, в отличие от "L" в hsl(), параметр в процентах от 0% до 100%.
C - Насыщенность, интенсивность цвета, варьируется от серого до наиболее интенсивного оттенка, в диапазоне от 0 до 1.
H - Оттенок, угол поворота на цветовом круге в градусах, 0–359°.
A - Непрозрачность, указывается через слеш "/" 0–1 в процентах от 0% до 100%.

OKLCH — новый способ определять цвет, цветовое пространство, которое появилось совсем недавно в CSS Color 4. Формат OKLCH исправляет ошибку LCH с тем, как меняется оттенок синего с увеличением насыщенност и яркости.
L - Воспринимаемая яркость в процентах от 0% до 100% (цвет в белый).
C - Количество цвета от 0-0.4
H - Угол оттенка на цветовом круге в градусах 0-359.
A - альфа-канал, непрозрачность в диапазоне от 0 до 1 или в процентах от 0% до 100%.

CSS: lch(L C H [/ A]) oklch(L C H [/ A])
color: lch(45% 0.26 264);
color: lch(45% 0.26 264 / 50%);
color: oklch(45% 0.26 264);
color: oklch(45% 0.26 264 / .5);

Значения цвета в форматах LCH и OKLCH добавлены в CSS Colors level 4. LCH не привязан к sRGB и даже к P3.

P3

Функция color() принимает название цветового пространства и набор R/G/B значений в диапазоне от 0 до 1. CSS:
color: color(display-p3 1 0 0);
color: color(display-p3 0 1 0);
color: color(display-p3 1 0 1 / .5);

Точность цветопередачи ΔE<2 — это цветовой стандарт в гамме DCI-P3 (шире цветовой охват 130,2% sRGB и 45,5% всего видимого человеком спектра) это цветовое пространство охватывает большую часть цветового спектра естественного происхождения, а (дельта E) ΔE<1 — это цветовой стандарт в гамме sRGB (standart RGB).
Цветовой охват 98% DCI-P3 (типичное значение) / покрывает 100% sRGB. Цвета 1,07 млрд. Глубина цвета составляет 10 бит.