Рекомендации по курсу:

Функция color() в CSS

Определение и использование в CSS color() Функция позволяет указывать цвет в конкретном цветовом пространстве.

Пример

Пример 1

Укажите цвет фона в цветовом пространстве display-p3 (прозрачность 0.3):

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

Попробуйте сами

Пример 2

Используйте грамматiku относительных значений:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

Попробуйте сами

Грамматика CSS

Грамматика абсолютных значений

color(colorspace c1 c2 c3 / A)
Значение Описание
colorspace

Обязателен. Определяет один из предопределенных цветовых пространств:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Обязателен. Значение компонента цветового пространства.

Каждое значение может быть записано как число (от 0 до 1), процент (от 0% до 100%) или ключевое слово none.
/ A

Опционально. Значение прозрачности канала цвета (0 означает полностью прозрачный, 100 -完全不 прозрачный).

Можете также использовать none (что означает отсутствие прозрачного канала).

Значение по умолчанию - 100.

Грамматика относительных значений

color(from color colorspace c1 c2 c3 / A)
Значение Описание
from color

Начинается с ключевого слова from, за которым следует значение цвета исходного цвета.

Это исходный цвет, на котором основан относительный цвет.
colorspace

Обязателен. Определяет один из предопределенных цветовых пространств:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Обязателен. Значение компонента цветового пространства.

Каждое значение может быть записано как число (от 0 до 1), процент (от 0% до 100%) или ключевое слово none.
/ A

Опционально. Значение прозрачности канала цвета (0 означает полностью прозрачный, 100 -完全不 прозрачный).

Можете также использовать none (что означает отсутствие прозрачного канала).

Значение по умолчанию - 100.

Технические детали

Версия: CSS Color Module Level 5

Поддержка браузеров

Таблица показывает версии браузеров, которые полностью поддерживают эту функцию.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

Связанные страницы

См. также:Цвет CSS