Функция CSS `color()`

Функциональная запись color() позволяет задать цвет в определённом цветовом пространстве, а не в неявном цветовом пространстве sRGB, в котором работают большинство других цветовых функций.

Поддержку конкретного цветового пространства можно определить с помощью CSS-медиавозможности color-gamut.

Синтаксис

/* Absolute values */
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);

/* Relative values */
color(from green srgb r g b / 0.5)
color(from #123456 xyz calc(x + 0.75) y calc(z - 0.35))

Значения

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

Синтаксис абсолютных значений

color(colorspace c1 c2 c3[ / A])

Параметры:

colorspace

<ident>, обозначающий одно из предопределённых цветовых пространств: srgb, srgb-linear, display-p3, display-p3-linear, 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

<ident>, обозначающий цветовое пространство выходного цвета, обычно одно из предопределённых цветовых пространств: srgb, srgb-linear, display-p3, display-p3-linear, 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, display-p3-linear, 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 ] ]? )

<color> = 
  <color-base> |
  currentColor |
  <system-color> |
  <light-dark()> |
  <deprecated-system-color>

<colorspace-params> = 
  [<custom-params> | <predefined-rgb-params> | <xyz-params>]

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

<color-base> = 
  <hex-color> |
  <color-function> |
  <named-color> |
  <color-mix()> |
  transparent

<system-color> = 
  AccentColor |
  AccentColorText |
  ActiveText |
  ButtonBorder |
  ButtonFace |
  ButtonText |
  Canvas |
  CanvasText |
  Field |
  FieldText |
  GrayText |
  Highlight |
  HighlightText |
  LinkText |
  Mark |
  MarkText |
  SelectedItem |
  SelectedItemText |
  VisitedText

<light-dark()> = 
  light-dark( <color>, <color> )

<deprecated-system-color> = 
  ActiveBorder |
  ActiveCaption |
  AppWorkspace |
  Background |
  ButtonHighlight |
  ButtonShadow |
  CaptionText |
  InactiveBorder |
  InactiveCaption |
  InactiveCaptionText |
  InfoBackground |
  InfoText |
  Menu |
  MenuText |
  Scrollbar |
  ThreeDDarkShadow |
  ThreeDFace |
  ThreeDHighlight |
  ThreeDLightShadow |
  ThreeDShadow |
  Window |
  WindowFrame |
  WindowText

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

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

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

<color-function> = 
  <rgb()> |
  <rgba()> |
  <hsl()> |
  <hsla()> |
  <hwb()> |
  <lab()> |
  <lch()> |
  <oklab()> |
  <oklch()> |
  <color()>

<named-color> = 
  aliceblue |
  antiquewhite |
  aqua |
  aquamarine |
  azure |
  beige |
  bisque |
  black |
  blanchedalmond |
  blue |
  blueviolet |
  brown |
  burlywood |
  cadetblue |
  chartreuse |
  chocolate |
  coral |
  cornflowerblue |
  cornsilk |
  crimson |
  cyan |
  darkblue |
  darkcyan |
  darkgoldenrod |
  darkgray |
  darkgreen |
  darkgrey |
  darkkhaki |
  darkmagenta |
  darkolivegreen |
  darkorange |
  darkorchid |
  darkred |
  darksalmon |
  darkseagreen |
  darkslateblue |
  darkslategray |
  darkslategrey |
  darkturquoise |
  darkviolet |
  deeppink |
  deepskyblue |
  dimgray |
  dimgrey |
  dodgerblue |
  firebrick |
  floralwhite |
  forestgreen |
  fuchsia |
  gainsboro |
  ghostwhite |
  gold |
  goldenrod |
  gray |
  green |
  greenyellow |
  grey |
  honeydew |
  hotpink |
  indianred |
  indigo |
  ivory |
  khaki |
  lavender |
  lavenderblush |
  lawngreen |
  lemonchiffon |
  lightblue |
  lightcoral |
  lightcyan |
  lightgoldenrodyellow |
  lightgray |
  lightgreen |
  lightgrey |
  lightpink |
  lightsalmon |
  lightseagreen |
  lightskyblue |
  lightslategray |
  lightslategrey |
  lightsteelblue |
  lightyellow |
  lime |
  limegreen |
  linen |
  magenta |
  maroon |
  mediumaquamarine |
  mediumblue |
  mediumorchid |
  mediumpurple |
  mediumseagreen |
  mediumslateblue |
  mediumspringgreen |
  mediumturquoise |
  mediumvioletred |
  midnightblue |
  mintcream |
  mistyrose |
  moccasin |
  navajowhite |
  navy |
  oldlace |
  olive |
  olivedrab |
  orange |
  orangered |
  orchid |
  palegoldenrod |
  palegreen |
  paleturquoise |
  palevioletred |
  papayawhip |
  peachpuff |
  peru |
  pink |
  plum |
  powderblue |
  purple |
  rebeccapurple |
  red |
  rosybrown |
  royalblue |
  saddlebrown |
  salmon |
  sandybrown |
  seagreen |
  seashell |
  sienna |
  silver |
  skyblue |
  slateblue |
  slategray |
  slategrey |
  snow |
  springgreen |
  steelblue |
  tan |
  teal |
  thistle |
  tomato |
  turquoise |
  violet |
  wheat |
  white |
  whitesmoke |
  yellow |
  yellowgreen

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})

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

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

<rgb()> = 
  rgb( <percentage>#{3} , <alpha-value>? ) |
  rgb( <number>#{3} , <alpha-value>? ) |
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<rgba()> = 
  rgba( <percentage>#{3} , <alpha-value>? ) |
  rgba( <number>#{3} , <alpha-value>? ) |
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> = 
  hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hsla()> = 
  hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> = 
  lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<lch()> = 
  lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<oklab()> = 
  oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<oklch()> = 
  oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

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

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<hue> = 
  <number> |
  <angle>

<rectangular-color-space> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020 |
  lab |
  oklab |
  xyz |
  xyz-d50 |
  xyz-d65

<polar-color-space> = 
  hsl |
  hwb |
  lch |
  oklch

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

<custom-color-space> = 
  <dashed-ident>

Примеры

Использование предопределённых цветовых пространств с color()

В следующем примере показан эффект изменения значений светлоты, оси 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="green-display-p3-linear"></div>
<div data-color="blue-rec2020"></div>
<div data-color="blue-srgb"></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

[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);
}
/* sRGB gamut, linear-light — full brightness (green channel 100%) */
[data-color="green-srgb-linear"] {
  background-color: color(srgb-linear 0 1 0);
}
/* P3 gamut (wider), gamma-encoded — low brightness (green channel ~21% light output) */
[data-color="green-display-p3"] {
  background-color: color(display-p3 0 0.5 0);
}
/* P3 gamut (wider), linear-light — half brightness (green channel at 50% light output) */
[data-color="green-display-p3-linear"] {
  background-color: color(display-p3-linear 0 0.5 0);
}
[data-color="blue-rec2020"] {
  background-color: color(rec2020 0 0 1);
}
[data-color="blue-srgb"] {
  background-color: color(srgb 0 0 1);
}

Результат

Использование цветового пространства xyz с color()

В следующем примере показано, как задать цвет с помощью цветового пространства xyz.

HTML

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

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

[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 с color()

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

HTML

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

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

@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);
  }
}

Результат

Использование относительных цветов с color()

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

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

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

: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 свойство
• Тип данных <color> со списком всех способов записи цветов
• Использование относительных цветов
• Инструмент Color_format_converter
• Модуль CSS Colors
• color-gamut медиавозможность
• Широкий цветовой охват в CSS с Display-p3