css.in.ua
Підтримати

CSS function color()

Опис

Функція color() в CSS позиціонується як сучасний інструмент для роботи з кольорами. Ця функція відкриває можливість встановлювати кольори відповідно до конкретного простору кольорів, забезпечуючи більше контролю і гнучкості в дизайні.

Однією з головних переваг функції color() є можливість виходити за межі стандартного sRGB простору, що дозволяє дизайнерам та розробникам вибирати кольори з більш широкою гамою або з визначеними характеристиками. Така функція забезпечує нові можливості для створення яскравих та насичених візуальних елементів.

Приклад, який демонструє використання функції color() з різними попередньо визначеними просторами кольорів:

/* Використання функції `color()` з різними просторами кольорів */
h1 {
  color: color(srgb 255 0 0); /* Встановлює колір тексту у червоний, використовуючи стандартний sRGB простір */
}

p {
  color: color(display-p3 1 0.5 0); /* Встановлює колір тексту у відтінки оранжевого, використовуючи P3 простір */
}

div {
  color: color(a98-rgb 0 1 0); /* Встановлює колір тексту у зелений, використовуючи Adobe RGB простір */
}

У цьому прикладі:

  • h1 елемент отримує червоний колір тексту, використовуючи стандартний sRGB простір.
  • p елемент отримує колір тексту у відтінках оранжевого, використовуючи P3 простір кольорів.
  • div елемент отримує зелений колір тексту, використовуючи Adobe RGB простір.

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

Порада:

Перш ніж використовувати функцію color(), перевірте підтримку необхідного простору кольорів за допомогою CSS медіа-функції color-gamut.
Порада:

Використовуйте попередньо визначені простори кольорів з обережністю, оскільки підтримка їх може відрізнятися на різних пристроях і браузерах.

Синтаксис

color(colorspace p1 p2 p3[ / A]);
<colorspace>

Ідентифікатор (ім'я) попередньо визначеного простору кольорів, наприклад srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 і xyz-d65.

<p1>, <p2>, <p3>

Значення параметрів, які приймає простір кольорів. Це можуть бути числові значення або відсоткові значення.

<A>

Значення прозорості (альфа-каналу) від 0 до 1

Переглядачі

Переглядач

111

113

15

97

111
Переглядач

111

111

113

15

Мобільних переглядачів ще не додано.

Приклади


Наведенням курсору на елемент .box, його фоновий колір змінюється з червоного на синій, використовуючи функцію color().

Цей приклад демонструє, як можна використовувати функцію color() для встановлення кольорів.

Спільнота

Зв'язок