<color>

Тип даних CSS <color> (колір) представляє колір. <color> також може включати значення прозорості альфа-каналу, котре вказує на те, як колір повинен комбінуватися (англ.) зі своїм тлом.

Примітка: Попри те, що значення <color> мають точну визначеність, їхній фактичний вигляд може відрізнятися (іноді суттєво) на різних пристроях. Це пов'язано з тим, що більшість пристроїв не відкалібровано, і частина браузерів не підтримує колірні профілі пристроїв виведення.

Синтаксис

/* Іменовані кольори */
rebeccapurple
aliceblue

/* Шістнадцятковий запис RGB */
#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 – світлість, вісь A, вісь B) */
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 – світлість, вісь A, вісь B) */
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)

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

Значення <color> можна задати за допомогою одного з методів, перелічених нижче:

  • Ключовими словами: <named-color> (such as blue or pink), <system-color> і currentcolor.
  • Шістнадцятковим записом: <hex-color> (наприклад, #ff0000).
  • Параметрами в колірному просторі, за допомогою функційних записів:
  • Шляхом змішування двох кольорів: color-mix().
  • Шляхом задання двох кольорів, перший з яких використовується для світлих колірних палітр, а другий – для темних: light-dark().

Ключове слово currentcolor

Ключове слово currentcolor представляє значення властивості color елемента. Це дає змогу використовувати значення color на властивостях, що усталено його не отримують.

Коли currentcolor застосовується як значення властивості color, воно отримує своє значення з успадкованого значення властивості color.

<div style="color: blue; border: 1px dashed currentcolor;">
  Колір цього тексту – синій.
  <div style="background: currentcolor; height:9px;"></div>
  Цей блок оточений синіми межами.
</div>

Відсутні компоненти кольору

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

Явне задання відсутніх компонент – корисне при колірній інтерполяції для випадків, коли потрібно інтерполювати одні колірні компоненти, але не інші. Для всіх решти випадків відсутня компонента по суті має нульове значення з відповідною одиницею: 0, 0% або 0deg. Наприклад, наступні кольори – рівносильні, коли вживаються поза інтерполяцією:

/* Ці кольори рівносильні */
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/* Ці кольори рівносильні */
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))

Примітка: Якщо компонента відсутня в обох кольорах, то така компонента буде відсутньою після інтерполяції.

Інтерполяція кольорів з різних просторів – аналогічні компоненти

Якщо будь-який з інтерпольованих кольорів не перебуває в колірному просторі інтерполяції, то його відсутні компоненти переносяться в обчислений колір на основі аналогічних компонент тієї ж категорії, як описано в наступній таблиці:

Категорія Аналогічні компоненти
Червоні R, X
Зелені G, Y
Сині B, Z
Світлість L
Кольоровість C, S
Барва H
a a
b b

Наприклад:

  • 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. Привести обидва кольори до колірного простору інтерполяції:

    
    ```css
    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 наполегливо радить не використовувати колір як єдиний засіб донесення певного повідомлення, дії чи результату. Дивіться подробиці в кольорі та колірному контрасті.

Формальний синтаксис

Інформація про синтаксис недоступна

Жодного значення не знайшлося в базі даних.

Приклад

Перевірка значення кольору

В цьому прикладі пропонується <div> і текстове поле. Введення в поле дійсного кольору призводить до того, що <div> набуває такого кольору, даючи змогу перевірити значення кольору.

HTML

<div></div>
<hr />
<label for="color">Введіть дійсне значення кольору:</label>
<input type="text" id="color" />

Результат

Цілком насичені кольори sRGB

Цей приклад демонструє цілком насичені кольори 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%);
}

Результат

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
<color>
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 3
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
color() (Profiled color values)
Experimental
Chrome No support No
Edge No support No
Firefox No support No
Internet Explorer No support No
Opera No support No
Safari Full support 15
WebView Android No support No
Chrome Android No support No
Firefox for Android No support No
Opera Android No support No
Safari on iOS Full support 15
Samsung Internet No support No
color-contrast()
Experimental
Chrome No support No
Edge No support No
Firefox No support No
Internet Explorer No support No
Opera No support No
Safari Full support 15
disabled
WebView Android No support No
Chrome Android No support No
Firefox for Android No support No
Opera Android No support No
Safari on iOS Full support 15
disabled
Samsung Internet No support No
color-mix()
Experimental
Chrome No support No
Edge No support No
Firefox Full support 88
disabled
Internet Explorer No support No
Opera No support No
Safari Full support 15
disabled
WebView Android No support No
Chrome Android No support No
Firefox for Android No support No
Opera Android No support No
Safari on iOS Full support 15
disabled
Samsung Internet No support No
Color keywords Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 3
footnote
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
rebeccapurple
Chrome Full support 38
Edge Full support 12
Firefox Full support 33
Internet Explorer Full support 11
Opera Full support 25
Safari Full support 9
WebView Android Full support 38
Chrome Android Full support 38
Firefox for Android Full support 33
Opera Android Full support 25
Safari on iOS Full support 8
Samsung Internet Full support 3.0
currentcolor keyword Chrome Full support 1
Edge Full support 12
Firefox Full support 1.5
Internet Explorer Full support 9
Opera Full support 9.5
Safari Full support 4
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 3.2
Samsung Internet Full support 1.0
hsl() (HSL color model) Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 9
Opera Full support 9.5
Safari Full support 3.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 2
Samsung Internet Full support 1.0
Alpha parameter
Chrome Full support 65
Edge Full support 79
Firefox Full support 52
Internet Explorer No support No
Opera Full support 52
Safari Full support 12.1
WebView Android Full support 65
Chrome Android Full support 65
Firefox for Android Full support 52
Opera Android Full support 47
Safari on iOS Full support 12.2
Samsung Internet Full support 9.0
Space-separated parameters
Chrome Full support 65
Edge Full support 79
Firefox Full support 52
Internet Explorer No support No
Opera Full support 52
Safari Full support 12.1
WebView Android Full support 65
Chrome Android Full support 65
Firefox for Android Full support 52
Opera Android Full support 47
Safari on iOS Full support 12.2
Samsung Internet Full support 9.0
hsla() (HSL color model) Chrome Full support 1
Edge Full support 12
Firefox Full support 3
Internet Explorer Full support 9
Opera Full support 10
Safari Full support 3.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 2
Samsung Internet Full support 1.0
Space-separated parameters
Chrome Full support 65
Edge Full support 79
Firefox Full support 52
Internet Explorer No support No
Opera Full support 52
Safari Full support 12.1
WebView Android Full support 65
Chrome Android Full support 65
Firefox for Android Full support 52
Opera Android Full support 47
Safari on iOS Full support 12.2
Samsung Internet Full support 9.0
hwb() (HWB color model) Chrome Full support 101
Edge Full support 101
Firefox Full support 96
Internet Explorer No support No
Opera No support No
Safari Full support 15
WebView Android Full support 101
Chrome Android Full support 101
Firefox for Android Full support 96
Opera Android No support No
Safari on iOS Full support 15
Samsung Internet No support No
lab() (Lab color model)
Experimental
Chrome No support No
Edge No support No
Firefox No support No
Internet Explorer No support No
Opera No support No
Safari Full support 15
WebView Android No support No
Chrome Android No support No
Firefox for Android No support No
Opera Android No support No
Safari on iOS Full support 15
Samsung Internet No support No
lch() (LCH color model)
Experimental
Chrome No support No
Edge No support No
Firefox No support No
Internet Explorer No support No
Opera No support No
Safari Full support 15
WebView Android No support No
Chrome Android No support No
Firefox for Android No support No
Opera Android No support No
Safari on iOS Full support 15
Samsung Internet No support No
rgb() (RGB color model) Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Alpha parameter
Chrome Full support 65
Edge Full support 79
Firefox Full support 52
Internet Explorer No support No
Opera Full support 52
Safari Full support 12.1
WebView Android Full support 65
Chrome Android Full support 65
Firefox for Android Full support 52
Opera Android Full support 47
Safari on iOS Full support 12.2
Samsung Internet Full support 9.0
Float values in parameters
Chrome Full support 66
Edge Full support 79
Firefox Full support 52
Internet Explorer No support No
Opera Full support 53
Safari Full support 12.1
WebView Android Full support 66
Chrome Android Full support 66
Firefox for Android Full support 52
Opera Android Full support 47
Safari on iOS Full support 12.2
Samsung Internet Full support 9.0
Space-separated rgb() parameters
Chrome Full support 65
Edge Full support 79
Firefox Full support 52
Internet Explorer No support No
Opera Full support 52
Safari Full support 12.1
WebView Android Full support 65
Chrome Android Full support 65
Firefox for Android Full support 52
Opera Android Full support 47
Safari on iOS Full support 12.2
Samsung Internet Full support 9.0
RGB hexadecimal notation (#RRGGBB, #RGB, …) Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 3
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)
Chrome Full support 62
Edge Full support 79
Firefox Full support 49
Internet Explorer No support No
Opera Full support 49
Safari Full support 10
WebView Android Full support 62
Chrome Android Full support 62
Firefox for Android Full support 49
Opera Android Full support 47
Safari on iOS Full support 9.3
Samsung Internet Full support 8.0
rgba() (RGB color model) Chrome Full support 1
Edge Full support 12
Firefox Full support 3
Internet Explorer Full support 9
Opera Full support 10
Safari Full support 3.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 2
Samsung Internet Full support 1.0
Float values in parameters
Chrome Full support 66
Edge Full support 79
Firefox Full support 52
Internet Explorer No support No
Opera Full support 53
Safari Full support 12.1
WebView Android Full support 66
Chrome Android Full support 66
Firefox for Android Full support 52
Opera Android Full support 47
Safari on iOS Full support 12.2
Samsung Internet Full support 9.0
Space-separated parameters
Chrome Full support 65
Edge Full support 79
Firefox Full support 52
Internet Explorer No support No
Opera Full support 52
Safari Full support 12.1
WebView Android Full support 65
Chrome Android Full support 65
Firefox for Android Full support 52
Opera Android Full support 47
Safari on iOS Full support 12.2
Samsung Internet Full support 9.0
transparent keyword Chrome Full support 1
Edge Full support 12
Firefox Full support 3
Internet Explorer Full support 9
Opera Full support 10
Safari Full support 3.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 2
Samsung Internet Full support 1.0

Дивіться також