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() робить можливим створення більш виразних і налаштовуваних візуальних стилів, надаючи дизайнерам можливість працювати з різноманітними просторами кольорів та добиватися бажаних відтінків і насиченості.

автор: Bond

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

Синтаксис

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

Функція color може отримувати 3 значень:

<colorspace>

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

автор: Bond

<p1>, <p2>, <p3>

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

автор: Bond

<A>

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

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	111	113	15	97	111

Підтримка: мобільні переглядачі
Переглядач
	111	111	113	15

Приклади

+ запропонувати свій приклад у пісочниці

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

автор: Bond

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

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!