<цвет>

/* Named colors */
rebeccapurple
aliceblue

/* RGB Hexadecimal */
#f09
#ff0099

/* RGB (Red, Green, Blue) */
rgb(255 0 153)
rgb(255 0 153 / 80%)

/* HSL (Hue, Saturation, Lightness) */
hsl(150 30% 60%)
hsl(150 30% 60% / 80%)

/* HWB (Hue, Whiteness, Blackness) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/* LAB (Lightness, A-axis, B-axis) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/* LCH (Lightness, Chroma, Hue) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/* Oklab (Lightness, A-axis, B-axis) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/* Oklch (Lightness, Chroma, Hue) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/* Relative CSS colors */
/* HSL hue change */
hsl(from red 240deg s l)
/* HWB alpha channel change */
hwb(from green h w b / 0.5)
/* LCH lightness change */
lch(from blue calc(l + 20) c h)

/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))

Значение <color> можно задать одним из методов, перечисленных ниже:

• По ключевым словам: <named-color> (такие как blue или pink), <system-color> и currentcolor.
• В шестнадцатеричном формате: <hex-color> (такой как #ff0000).
• По <color-function>, с параметрами в пространстве цветов с использованием функционального обозначения:
  • Пространство sRGB: hsl(), hwb() и rgb().
  • CIELAB: lab() и lch().
  • Oklab: oklab() и oklch().
  • Другие пространства цветов: color().
• Используя синтаксис относительных цветов для вывода нового цвета на основе существующего цвета. Любая из перечисленных выше функций цвета может принять исходный цвет, предшествуемый ключевым словом from и последующими определениями значений каналов для нового результирующего цвета.
• Смешивая два цвета: color-mix().
• Выбирая цвет на основе соотношений контрастности: color-contrast().
• Указав два цвета, используя первый для светлых цветовых схем и второй для тёмных цветовых схем: light-dark().

Ключевое слово currentcolor представляет значение свойства color элемента. Это позволяет использовать значение color для свойств, которые его по умолчанию не получают.

Если currentcolor используется в качестве значения свойства color, оно вместо этого получает своё значение от унаследованного значения свойства color.

<div style="color: blue; border: 1px dashed currentcolor;">
  The color of this text is blue.
  <div style="background: currentcolor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>

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

Явное указание отсутствующих компонентов в интерполяции цвета полезно в тех случаях, когда вы хотите интерполировать некоторые цветовые компоненты, а не другие. Для всех остальных целей отсутствующий компонент фактически будет иметь нулевое значение в соответствующей единице: 0, 0%, или 0deg. Например, следующие цвета эквивалентны, когда используются вне интерполяции:

/* These are equivalent */
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/* These are equivalent */
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);

Интерполяция цвета происходит в градиентах, переходах и анимациях.

При интерполяции значений <color> они сначала преобразуются в заданное пространство цветов, а затем каждый компонент вычисленных значений интерполируется линейно, при этом скорость интерполяции определяется функцией сглаживания в переходах и анимациях. Интерполяционное цветовое пространство по умолчанию — Oklab, но может быть переопределено с помощью <color-interpolation-method> в некоторых функциональных обозначениях, связанных с цветом.

Интерполяция цветов в одном пространстве

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

color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))

Интерполяция цветов из разных пространств: аналогичные компоненты

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

Например:

• X (0.2) в color(xyz 0.2 0.1 0.6) аналогично R (50%) в rgb(50% 70% 30%).
• H (0deg) в hsl(0deg 100% 80%) аналогично H (140) в oklch(80% 0.1 140).

Используя Oklch в качестве пространства интерполяции и два цвета ниже в качестве примера:

lch(80% 30 none)
color(display-p3 0.7 0.5 none)

Процедура предобработки:

1. Замените отсутствующие компоненты в обоих цветах нулевыми значениями:

   lch(80% 30 0)
   color(display-p3 0.7 0.5 0)
   

2. Преобразуйте оба цвета в пространство интерполяции:

   oklch(83.915% 0.0902 0.28)
   oklch(63.612% 0.1522 78.748)
   

3. Если какой-либо компонент преобразованных цветов аналогичен отсутствующему компоненту в соответствующем исходном цвете, сбросьте его как отсутствующий компонент:

   oklch(83.915% 0.0902 none)
   oklch(63.612% 0.1522 78.748)
   

4. Замените любые отсутствующие компоненты тем же компонентом из другого преобразованного цвета:

   oklch(83.915% 0.0902 78.748)
   oklch(63.612% 0.1522 78.748)
   

Некоторые люди испытывают трудности с различением цветов. Рекомендация WCAG 2.2 настоятельно рекомендует избегать использования цвета в качестве единственного способа передачи определённого сообщения, действия или результата. Подробнее см. цвет и контраст цветов.

<color> = 
  <color-base>    |
  currentColor    |
  <system-color>  

<color-base> = 
  <hex-color>       |
  <color-function>  |
  <named-color>     |
  transparent       

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

<rgb()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<rgba()> = 
  <legacy-rgba-syntax>  |
  <modern-rgba-syntax>  

<hsl()> = 
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>  

<hsla()> = 
  <legacy-hsla-syntax>  |
  <modern-hsla-syntax>  

<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 ] ]? )  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

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

<legacy-rgba-syntax> = 
  rgba( <percentage>#{3} , <alpha-value>? )  |
  rgba( <number>#{3} , <alpha-value>? )      

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

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

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

<legacy-hsla-syntax> = 
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )  

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

<hue> = 
  <number>  |
  <angle>   

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

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

<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  

<predefined-rectangular> = 
  jzazbz  |
  ictcp   

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

В этом примере мы предоставим <div> и поле ввода текста. Ввод допустимого цвета в поле ввода приводит к тому, что <div> принимает этот цвет, что позволяет вам протестировать наши значения цвета.

HTML

<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />

Результат

В этом примере показаны полностью насыщенные цвета sRGB в пространстве sRGB.

HTML

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

CSS

div:nth-child(1) {
  background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
  background-color: hsl(30 100% 50%);
}
div:nth-child(3) {
  background-color: hsl(60 100% 50%);
}
div:nth-child(4) {
  background-color: hsl(90 100% 50%);
}
div:nth-child(5) {
  background-color: hsl(120 100% 50%);
}
div:nth-child(6) {
  background-color: hsl(150 100% 50%);
}
div:nth-child(7) {
  background-color: hsl(180 100% 50%);
}
div:nth-child(8) {
  background-color: hsl(210 100% 50%);
}
div:nth-child(9) {
  background-color: hsl(240 100% 50%);
}
div:nth-child(10) {
  background-color: hsl(270 100% 50%);
}
div:nth-child(11) {
  background-color: hsl(300 100% 50%);
}
div:nth-child(12) {
  background-color: hsl(330 100% 50%);
}

Результат

В этом примере показаны красные цвета разных оттенков в цветовом пространстве sRGB.

HTML

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

CSS

div:nth-child(1) {
  background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
  background-color: hsl(0 100% 20%);
}
div:nth-child(3) {
  background-color: hsl(0 100% 40%);
}
div:nth-child(4) {
  background-color: hsl(0 100% 60%);
}
div:nth-child(5) {
  background-color: hsl(0 100% 80%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 100%);
  border: solid;
}

Результат

В этом примере показаны красные цвета с различной насыщенностью в цветовом пространстве sRGB.

HTML

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

CSS

div:nth-child(1) {
  background-color: hsl(0 0% 50%);
}
div:nth-child(2) {
  background-color: hsl(0 20% 50%);
}
div:nth-child(3) {
  background-color: hsl(0 40% 50%);
}
div:nth-child(4) {
  background-color: hsl(0 60% 50%);
}
div:nth-child(5) {
  background-color: hsl(0 80% 50%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 50%);
}

Результат

• opacity: свойство, определяющее прозрачность на уровне элемента
• <hue>: тип данных, представляющий угол оттенка цвета
• color, background-color, border-color, box-shadow, outline-color, text-shadow: общие свойства, использующие <color>
• Применение цвета к элементам HTML с помощью CSS
• Использование относительных цветов
• Новые функции, градиенты и оттенки в цветах CSS (уровень 4) в блоге MDN (2023)