<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 asblue
orpink
),<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)
процедура попередньої обробки:
-
Замінити відсутні компоненти в обох кольорах нульовими значеннями:
lch(80% 30 0) color(display-p3 0.7 0.5 0)
-
Привести обидва кольори до колірного простору інтерполяції:
```css oklch(83.915% 0.0902 0.28) oklch(63.612% 0.1522 78.748)
-
Якщо будь-яка компонента приведених кольорів є аналогічною щодо відсутньої компоненти у відповідному вихідному кольорі, то скинути її як відсутню компоненту:
oklch(83.915% 0.0902 none) oklch(63.612% 0.1522 78.748)
-
Замінити всі відсутні компоненти на такі ж компоненти з іншого приведеного кольору:
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<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 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()
|
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-mix()
|
Chrome No support No | Edge No support No | Firefox Full support 88 | 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 keywords | 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 |
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)
|
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)
|
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 |
Дивіться також
opacity
– властивість, що дає змогу визначати прозорість на рівні елемента<hue>
тип даних, що представляє кут барви кольоруcolor
,background-color
,border-color
,box-shadow
,outline-color
,text-shadow
– поширені властивості, що використовують<color>
- Застосування кольору до елементів HTML за допомогою CSS
- Нові функції, градієнти та барви у Кольорах CSS (Рівень 4) на блозі MDN (2023)