<color>

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

[!NOTE] Попри те, що значення <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)

/* Відносні кольори CSS */
/* Видозміна барви HSL */
hsl(from red 240deg s l)
/* Видозміна альфа-каналу HWB */
hwb(from green h w b / 0.5)
/* Видозміна світності LCH */
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> (such as blue or pink), <system-color> і currentcolor.
  • Шістнадцятковим записом: <hex-color> (наприклад, #ff0000).
  • За допомогою <color-function>, з параметрами в колірному просторі, за допомогою функційних записів:
  • Через застосування синтаксису відносного кольору, щоб вивести новий колір на основі наявного. Кожна з колірних функцій вище може прийняти початковий колір, перед яким повинно стояти ключове слово from, після якого – визначення значень каналів для нового результівного кольору.
  • Через змішування двох кольорів: color-mix().
  • Через вибір кольору на основі співвідношень контрасту: color-contrast().
  • Через задання двох кольорів, перший з яких використовується для світлих колірних палітр, а другий – для темних: 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))

[!NOTE] Якщо компонента відсутня в обох кольорах, то така компонента буде відсутньою після інтерполяції.

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

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

Категорія Аналогічні компоненти
Червоні 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)
Експериментальне
Chrome No support Ні
Edge No support Ні
Firefox No support Ні
Internet Explorer No support Ні
Opera No support Ні
Safari Full support 15
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android No support Ні
Opera Android No support Ні
Safari on iOS Full support 15
Samsung Internet No support Ні
color-contrast()
Експериментальне
Chrome No support Ні
Edge No support Ні
Firefox No support Ні
Internet Explorer No support Ні
Opera No support Ні
Safari Full support 15
disabled
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android No support Ні
Opera Android No support Ні
Safari on iOS Full support 15
disabled
Samsung Internet No support Ні
color-mix()
Експериментальне
Chrome No support Ні
Edge No support Ні
Firefox Full support 88
disabled
Internet Explorer No support Ні
Opera No support Ні
Safari Full support 15
disabled
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android No support Ні
Opera Android No support Ні
Safari on iOS Full support 15
disabled
Samsung Internet No support Ні
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 Ні
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 Ні
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 Ні
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 Ні
Opera No support Ні
Safari Full support 15
WebView Android Full support 101
Chrome Android Full support 101
Firefox for Android Full support 96
Opera Android No support Ні
Safari on iOS Full support 15
Samsung Internet No support Ні
lab() (Lab color model)
Експериментальне
Chrome No support Ні
Edge No support Ні
Firefox No support Ні
Internet Explorer No support Ні
Opera No support Ні
Safari Full support 15
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android No support Ні
Opera Android No support Ні
Safari on iOS Full support 15
Samsung Internet No support Ні
lch() (LCH color model)
Експериментальне
Chrome No support Ні
Edge No support Ні
Firefox No support Ні
Internet Explorer No support Ні
Opera No support Ні
Safari Full support 15
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android No support Ні
Opera Android No support Ні
Safari on iOS Full support 15
Samsung Internet No support Ні
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 Ні
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 Ні
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 Ні
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 Ні
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 Ні
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 Ні
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

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