<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>, з параметрами в колірному просторі, за допомогою функційних записів:
  • Колірного простору sRGB: hsl(), hwb() і rgb().
  • Колірного простору CIELAB: lab() і lch().
  • Колірного простору Oklab: oklab() і oklch().
  • Інших колірних просторів: color().
• Через застосування синтаксису відносного кольору, щоб вивести новий колір на основі наявного. Кожна з колірних функцій вище може прийняти початковий колір, перед яким повинно стояти ключове слово 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] Якщо компонента відсутня в обох кольорах, то така компонента буде відсутньою після інтерполяції.

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

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

Наприклад:

• 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" />

div {
  height: 200px;
  width: 200px;
}

const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "inherit" || stringToTest === "transparent") {
    return false;
  }

  const div = document.createElement("div");
  div.style.color = stringToTest;
  return !!div.style.color;
}

inputElem.addEventListener("input", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.removeAttribute("style");
    divElem.textContent = "Недійсне значення кольору";
  }
});

Результат

Генерування цілком насичених кольорів 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

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

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

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  box-sizing: border-box;
  height: 80px;
  margin: 10px;
  width: 80px;
}

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

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

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)