color()

Ниже приведены описания разрешенных значений для абсолютных и относительных цветов.

Синтаксис абсолютного значения

color(colorspace c1 c2 c3[ / A])

Параметры следующие:

colorspace

Идентификатор, обозначающий один из предопределённых цветовых пространств: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, или xyz-d65.

c1, c2, c3

Каждое значение может быть записано как <number>, <percentage> или ключевое слово none (в этом случае эквивалентно 0). Эти значения представляют компонентные значения для цветового пространства. При использовании значения <number>, обычно, 0 до 1 представляют границы цветового пространства. Значения вне этого диапазона разрешены, но будут выходить за пределы гаммы для данного цветового пространства. При использовании процентного значения, 100% представляет 1 и 0% представляет 0.

A Необязательно

<alpha-value>, представляющий значение альфа-канала цвета, где число 0 соответствует 0% (полностью прозрачный) и 1 соответствует 100% (полностью непрозрачный). Кроме того, ключевое слово none может быть использовано для явного указания отсутствия альфа-канала. Если значение канала A не указано явно, оно по умолчанию равно 100%. Если включено, значение предваряется косой чертой (/).

Синтаксис относительного значения

color(from <color> colorspace c1 c2 c3[ / A])

Параметры следующие:

from <color>

Ключевое слово from всегда включается при определении относительного цвета, за которым следует значение <color>, представляющее исходный цвет. Это исходный цвет, на основе которого определяется относительный цвет. Исходный цвет может быть любым допустимым синтаксисом <color>, включая другой относительный цвет.

colorspace

Идентификатор, обозначающий цветовое пространство выходного цвета, обычно одно из предопределённых цветовых пространств: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, или xyz-d65.

c1, c2, c3

Каждое значение может быть записано как <number>, <percentage> или ключевое слово none (эквивалентно 0 в этом случае). Эти значения представляют компонентные значения для выходного цвета. При использовании значения <number> , обычно 0 до 1 представляют границы цветового пространства. Значения вне этого диапазона разрешены, но будут выходить за пределы гаммы для данного цветового пространства. Как правило, при использовании процентного значения, 100% представляет 1 и 0% представляет 0.

A Необязательно

<alpha-value>, представляющий значение альфа-канала выходного цвета, где число 0 соответствует 0% (полностью прозрачный) и 1 соответствует 100% (полностью непрозрачный). Кроме того, ключевое слово none может быть использовано для явного указания отсутствия альфа-канала. Если значение канала A не указано явно, оно по умолчанию соответствует значению альфа-канала исходного цвета. Если включено, значение предваряется косой чертой (/).

Определение компонентов канала выходного относительного цвета

При использовании синтаксиса относительного цвета внутри функции color(), браузер преобразует исходный цвет в эквивалентный цвет в указанном цветовом пространстве (если он не указан как таковой). Цвет определяется как три отдельных цветовых канала плюс значение альфа-канала (alpha). Эти значения каналов становятся доступными внутри функции для использования при определении значений каналов выходного цвета:

• Три цветовых значения исходного цвета разрешаются до <number>. Для предопределённых цветовых пространств, в зависимости от выбранного, эти значения будут следующими:

  • r, g, и b: Значения цветовых каналов для цветовых пространств RGB srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, и rec2020.

  • x, y, и z: Значения цветовых каналов для цветовых пространств CIE XYZ xyz, xyz-d50, и xyz-d65.

    Примечание: Каждое из этих значений обычно находится в диапазоне от 0 до 1, но, как указано выше, они могут выходить за эти пределы.

    Примечание: Ссылка на r, g, и b значения внутри функции color() с цветовым пространством XYZ, x, y, и z значения внутри функции color() с цветовым пространством RGB, или любые другие символы, являются недопустимыми. Значения каналов исходного цвета, доступные внутри функции, должны соответствовать указанному типу цветового пространства.

• alpha: Значение прозрачности цвета, разрешенное до <number> в диапазоне от 0 до 1, включительно.

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

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

Начнём с исходного цвета hsl(0 100% 50%) (эквивалентного red). Хотя вы вряд ли напишете следующие функции, так как они выводят тот же цвет, что и исходный цвет, это демонстрирует, как использовать значения каналов исходного цвета в качестве значений каналов выходного цвета:

color(from hsl(0 100% 50%) srgb r g b)
color(from hsl(0 100% 50%) xyz x y z)

Выходные цвета этих функций - color(srgb 1 0 0) и color(xyz-d65 0.412426 0.212648 0.0193173), соответственно.

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

color(from hsl(0 100% 50%) srgb 0.749938 0 0.609579)
/* Computed output color: color(srgb 0.749938 0 0.609579) */

color(from hsl(0 100% 50%) xyz 0.75 0.6554 0.1)
/* Computed output color: color(xyz-d65 0.75 0.6554 0.1 */

Следующие функции используют два значения каналов исходного цвета для значений каналов выходного цвета (r и b, и x и y, соответственно), но используют новое значение для другого значения канала выходного цвета (g и z, соответственно), создавая относительный цвет, основанный на исходном цвете в каждом случае:

color(from hsl(0 100% 50%) srgb r 1 b)
/* Computed output color: color(srgb 1 1 0) */

color(from hsl(0 100% 50%) xyz x y 0.5)
/* Computed output color: color(xyz-d65 0.412426 0.212648 0.5) */

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

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

color(from hsl(0 100% 50% / 0.8) srgb r g b / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

color(from hsl(0 100% 50% / 0.8) xyz x y z / 0.5)
/* Computed output color: color(xyz-d65 0.412426 0.212648 0.0193173 / 0.5) */

Следующие примеры используют функции calc() для вычисления новых значений каналов для выходных цветов, которые относительны к значениям каналов исходного цвета:

color(from hsl(0 100% 50%) srgb calc(r - 0.4) calc(g + 0.1) calc(b + 0.6) / calc(alpha - 0.1))
/* Computed output color: color(srgb 0.6 0.1 0.6 / 0.9)  */

color(from hsl(0 100% 50%) xyz calc(x - 0.3) calc(y + 0.3) calc(z + 0.3) / calc(alpha - 0.1))
/* Computed output color: color(xyz-d65 0.112426 0.512648 0.319317 / 0.9) */

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<colorspace-params> = 
  <custom-params>                  |
  <predefined-rgb-params>          |
  <predefined-polar-params>        |
  <predefined-rectangular-params>  |
  <xyz-params>                     

<alpha-value> = 
  <number>      |
  <percentage>  

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+  

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<predefined-polar-params> = 
  jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none ]  

<predefined-rectangular-params> = 
  <predefined-rectangular> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz> [ <number> | <percentage> | none ]{3}  

<predefined-rgb> = 
  srgb            |
  srgb-linear     |
  display-p3      |
  a98-rgb         |
  prophoto-rgb    |
  rec2020         |
  rec2100-pq      |
  rec2100-hlg     |
  rec2100-linear  

<hue> = 
  <number>  |
  <angle>   

<predefined-rectangular> = 
  jzazbz  |
  ictcp   

<xyz> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

Следующий пример демонстрирует эффект изменения значений светлоты, оси a и оси b функции color().

HTML

<div data-color="red-a98-rgb"></div>
<div data-color="red-prophoto-rgb"></div>
<div data-color="green-srgb-linear"></div>
<div data-color="green-display-p3"></div>
<div data-color="blue-rec2020"></div>
<div data-color="blue-srgb"></div>

CSS

[data-color="red-a98-rgb"] {
  background-color: color(a98-rgb 1 0 0);
}
[data-color="red-prophoto-rgb"] {
  background-color: color(prophoto-rgb 1 0 0);
}
[data-color="green-srgb-linear"] {
  background-color: color(srgb-linear 0 1 0);
}
[data-color="green-display-p3"] {
  background-color: color(display-p3 0 1 0);
}
[data-color="blue-rec2020"] {
  background-color: color(rec2020 0 0 1);
}
[data-color="blue-srgb"] {
  background-color: color(srgb 0 0 1);
}

Результат

Следующий пример демонстрирует использование цветового пространства xyz для задания цвета.

HTML

<div data-color="red"></div>
<div data-color="green"></div>
<div data-color="blue"></div>

CSS

[data-color="red"] {
  background-color: color(xyz 45 20 0);
}

[data-color="green"] {
  background-color: color(xyz-d50 0.3 80 0.3);
}

[data-color="blue"] {
  background-color: color(xyz-d65 5 0 50);
}

Результат

В этом примере показано, как использовать медиа-запрос color-gamut для определения поддержки определённого цветового пространства и использования этого пространства для задания цвета.

HTML

<div></div>
<div></div>
<div></div>

CSS

@media (color-gamut: p3) {
  div {
    background-color: color(display-p3 1 0 0);
  }
}

@media (color-gamut: srgb) {
  div:nth-child(2) {
    background-color: color(srgb 1 0 0);
  }
}

@media (color-gamut: rec2020) {
  div:nth-child(3) {
    background-color: color(rec2020 1 0 0);
  }
}

Результат

В этом примере три элемента <div> стилизованы с разными цветами фона. Средний элемент получает исходный --base-color, а левый и правый элементы получают осветлённую и затемнённую версии этого --base-color.

Эти варианты определяются с помощью относительных цветов — --base-color настраиваемое свойство передаётся в функцию color(), и выходные цвета имеют изменённые g и b каналы, чтобы достичь желаемого эффекта с помощью функций calc() . Осветлённый цвет имеет к этим каналам добавлено 15%, а затемнённый — вычтено 15%.

CSS

:root {
  --base-color: orange;
}

#one {
  background-color: color(
    from var(--base-color) display-p3 r calc(g + 0.15) calc(b + 0.15)
  );
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: color(
    from var(--base-color) display-p3 r calc(g - 0.15) calc(b - 0.15)
  );
}

/* Use @supports to add in support old syntax that requires r g b values
   to be specified as percentages (with units) in calculations.
   This is required for Safari 16.4+ */
@supports (color: color(from red display-p3 r g calc(b + 30%))) {
  #one {
    background-color: color(
      from var(--base-color) display-p3 r calc(g + 15%) calc(b + 15%)
    );
  }

  #three {
    background-color: color(
      from var(--base-color) display-p3 r calc(g - 15%) calc(b - 15%)
    );
  }
}

Результат

Вывод следующий:

• Тип данных <color> для списка всех обозначений цветов
• Использование относительных цветов
• Инструмент выбора и преобразования цветов sRGB
• Модуль CSS цвета
• color-gamut медиа-функция
• Широкодиапазонный цвет в CSS с Display-p3