Spec-Zone.ru › CSS

lab()

Базовая версия 2023

Новое

С мая 2023 года эта функция работает на последних версиях устройств и браузеров. Возможно, она не будет работать на старых устройствах или браузерах.

  • Подробнее
  • Полная совместимость
  • Отправить отзыв

Функциональная запись lab() выражает заданный цвет в цветовом пространстве CIE L*a*b* цветовое пространство.

Lab охватывает весь диапазон цветов, видимых человеком, определяя светлоту цвета, значение по оси красный/зелёный, значение по оси синий/жёлтый и необязательное значение альфа-прозрачности.

Синтаксис

/* Absolute values */
lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);

/* Relative values */
lab(from green l a b / 0.5)
lab(from #0000FF calc(l + 10) a b)
lab(from hsl(180 100% 50%) calc(l - 10) a b)

Значения

Ниже приведены описания разрешенных значений для абсолютных и относительных цветов.

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

lab(L a b[ / A])

Параметры следующие:

L

Значение <number> в диапазоне от 0 до 100, значение <percentage> в диапазоне от 0% до 100%, или ключевое слово none (эквивалентное 0% в данном случае). Это значение определяет светлоту цвета. Здесь число 0 соответствует 0% (чёрный), а число 100 соответствует 100% (белый).

a

Значение <number> в диапазоне от -125 до 125, значение <percentage> в диапазоне от -100% до 100%, или ключевое слово none (эквивалентное 0% в данном случае). Это значение определяет расстояние цвета вдоль оси a, которая определяет, насколько цвет является зелёным (движение к -125) или красным (движение к +125). Обратите внимание, что эти значения имеют знак (допускаются как положительные, так и отрицательные значения) и теоретически не ограничены, что означает, что вы можете задать значения за пределами пределов ±125 (±100%) . На практике значения не могут превышать ±160.

b

Значение <number> в диапазоне от -125 до 125, значение <percentage> в диапазоне от -100% до 100%, или ключевое слово none (эквивалентное 0% в данном случае). Это значение определяет расстояние цвета вдоль оси b, которая определяет, насколько цвет является синим (движение к -125) или жёлтым (движение к +125) . Обратите внимание, что эти значения имеют знак (допускаются как положительные, так и отрицательные значения) и теоретически не ограничены, что означает, что вы можете задать значения за пределами пределов ±125 (±100%) . На практике значения не могут превышать ±160.

A Необязательно

Значение <alpha-value>, представляющее значение альфа-канала цвета, где число 0 соответствует 0% (полностью прозрачный), а 1 соответствует 100% (полностью непрозрачный). Кроме того, ключевое слово none может быть использовано для явного указания отсутствия альфа-канала. Если значение канала A не указано явно, оно по умолчанию равно 100%. Если указано, значение предваряется косой чертой (/).

Примечание: См. Пропущенные компоненты цвета для получения дополнительной информации о влиянии none.

Синтаксис относительных значений

lab(from <color> L a b[ / A])

Параметры следующие:

from <color>

Ключевое слово from всегда включается при определении относительного цвета, за которым следует значение <color>, представляющее цвет источника. Это исходный цвет, на котором основан относительный цвет. Цвет источника может быть любым допустимым синтаксисом <color>, включая другой относительный цвет.

L

Значение <number> в диапазоне от 0 до 100, значение <percentage> в диапазоне от 0% до 100%, или ключевое слово none (эквивалентное 0% в данном случае) Это значение представляет светлоту выходного цвета. Здесь число 0 соответствует 0% (чёрный), а число 100 соответствует 100% (белый).

a

Значение <number> в диапазоне от -125 до 125, значение <percentage> в диапазоне от -100% до 100%, или ключевое слово none (эквивалентное 0% в данном случае). Это значение представляет расстояние выходного цвета вдоль оси a, которая определяет, насколько цвет является зелёным (движение к -125) или красным (движение к +125) . Обратите внимание, что эти значения имеют знак (допускаются как положительные, так и отрицательные значения) и теоретически не ограничены, что означает, что вы можете задать значения за пределами пределов ±125 (±100%) . На практике значения не могут превышать ±160.

b

Значение <number> в диапазоне от -125 до 125, значение <percentage> в диапазоне от -100% до 100%, или ключевое слово none (эквивалентное 0% в данном случае). Это значение представляет расстояние выходного цвета вдоль оси b, которая определяет, насколько цвет является синим (движение к -125) или жёлтым (движение к +125) . Обратите внимание, что эти значения имеют знак (допускаются как положительные, так и отрицательные значения) и теоретически не ограничены, что означает, что вы можете задать значения за пределами пределов ±125 (±100%) . На практике значения не могут превышать ±160.

A Необязательно

Значение <alpha-value>, представляющее значение альфа-канала выходного цвета, где число 0 соответствует 0% (полностью прозрачный), а 1 соответствует 100% (полностью непрозрачный). Кроме того, ключевое слово none может быть использовано для явного указания отсутствия альфа-канала. Если значение канала A не указано явно, оно по умолчанию равно значению альфа-канала исходного цвета. Если указано, значение предваряется косой чертой (/).

Примечание: Обычно, когда значения процентов имеют числовой эквивалент в CSS, 100% равно числу 1. Это не всегда так для светлоты LAB и осей a и b, как упоминалось выше. В случае L, диапазон составляет от 0 до 100, а 100% равно 100. Значения a и b поддерживают как отрицательные, так и положительные значения, где 100% равно 125 и -100% равно -125.

Определение компонентов выходного канала относительного цвета

При использовании синтаксиса относительного цвета внутри функции lab(), браузер преобразует цвет источника в эквивалентный цвет Lab (если он не задан как таковой). Цвет определяется как три значения каналов цвета — l (светлота), a (ось зелёный/красный) и b (ось синий/жёлтый) — плюс значение альфа-канала (alpha). Эти значения каналов доступны внутри функции для использования при определении значений выходных каналов цвета:

  • Значение канала l разрешается в значение <number> в диапазоне от 0 до 100, включительно.
  • Каналы a и b разрешаются в каждое значение <number> в диапазоне от -125 до 125, включительно.
  • Канал alpha разрешается в значение <number> в диапазоне от 0 до 1, включительно.

При определении относительного цвета разные каналы выходного цвета могут быть выражены несколькими способами. Ниже мы рассмотрим несколько примеров, чтобы проиллюстрировать это.

В первых двух примерах ниже используется синтаксис относительного цвета. Однако первый пример выводит тот же цвет, что и исходный цвет, а второй — цвет, вообще не основанный на исходном цвете. Они фактически не создают относительные цвета! Вероятность их использования в реальном коде невелика, и, скорее всего, вы просто используете абсолютное значение цвета. Эти примеры включены в качестве отправной точки для обучения синтаксису относительного lab().

Начнём с исходного цвета hsl(0 100% 50%) (эквивалентного red). Следующая функция выводит тот же цвет, что и исходный цвет — она использует значения каналов l, a, и b исходного цвета (54.29, 80.8198, и 69.8997) как значения выходных каналов:

lab(from hsl(0 100% 50%) l a b)

Цвет вывода этой функции — lab(54.29 80.8198 69.8997).

Следующая функция использует абсолютные значения для значений каналов выходного цвета, выводя совершенно другой цвет, не основанный на исходном цвете:

lab(from hsl(0 100% 50%) 29.692% 44.89% -29.034%)

В этом случае выходной цвет — lab(29.692 56.1125 -36.2925).

Следующая функция создаёт относительный цвет, основанный на исходном цвете:

lab(from hsl(0 100% 50%) l -100 b)

В этом примере:

  • Цвет hsl() источника преобразуется в эквивалентный цвет lab() — lab(54.29 80.8198 69.8997).
  • Значения каналов l и b выходного цвета устанавливаются на значения каналов lab() и L эквивалента исходного цвета — эти значения составляют 54.29 и 69.8997 соответственно.
  • Значение канала a выходного цвета устанавливается на новое значение, не основанное на исходном цвете: -100.

Конечный выходной цвет — lab(54.29 -100 69.8997).

END_OF_DOCUMENT_MARKER

Примечание: Как упоминалось выше, если цвет вывода использует другую модель цветового пространства, чем исходный цвет, исходный цвет преобразуется в ту же модель, что и цвет вывода, в фоне, чтобы он мог быть представлен совместимым способом (т. е. с использованием тех же каналов).

В примерах, которые мы рассмотрели в этом разделе, альфа-каналы исходного и выходного цветов не были явно указаны. Если альфа-канал выходного цвета не указан, он по умолчанию принимает значение альфа-канала исходного цвета. Если альфа-канал исходного цвета не указан (и он не является относительным цветом), он по умолчанию принимает значение 1. Следовательно, значения альфа-каналов исходного и выходного цвета равны 1 в приведенных выше примерах.

Давайте рассмотрим примеры, в которых указаны значения альфа-каналов исходного и выходного цветов. В первом примере значение альфа-канала вывода равно значению альфа-канала исходного цвета, а во втором — различному значению, не связанному со значением альфа-канала исходного цвета.

lab(from hsl(0 100% 50% / 0.8) l a b / alpha)
/* Computed output color: lab(54.29 80.8198 69.8997 / 0.8) */

lab(from hsl(0 100% 50% / 0.8) l a b / 0.5)
/* Computed output color: lab(54.29 80.8198 69.8997 / 0.5) */

В следующем примере hsl() исходный цвет снова преобразуется в lab() эквивалент — lab(54.29 80.8198 69.8997). Вычисления calc() применяются к значениям L, a, b, и A, что приводит к выходному цвету lab(74.29 60.8198 29.8997 / 0.9):

lab(from hsl(0 100% 50%) calc(l + 20) calc(a - 20) calc(b - 40) / calc(alpha - 0.1))

Примечание: Поскольку значения каналов исходного цвета разрешены до <number> значений, вам нужно добавлять числа к ним при использовании в вычислениях, даже в тех случаях, когда канал обычно принимает <percentage>, <angle>, или другие типы значений. Добавление <percentage> к <number>, например, не работает.

Формальный синтаксис

<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<alpha-value> = 
  <number>      |
  <percentage>

Примеры

Настройка светлоты

Следующий пример демонстрирует влияние изменения значения светлоты функции lab().

HTML

<div data-color="red-dark"></div>
<div data-color="red"></div>
<div data-color="red-light"></div>

<div data-color="green-dark"></div>
<div data-color="green"></div>
<div data-color="green-light"></div>

<div data-color="blue-dark"></div>
<div data-color="blue"></div>
<div data-color="blue-light"></div>

CSS

[data-color="red-dark"] {
  background-color: lab(5 125 71);
}
[data-color="red"] {
  background-color: lab(40 125 71);
}
[data-color="red-light"] {
  background-color: lab(95 125 71);
}

[data-color="green-dark"] {
  background-color: lab(10% -120 125);
}
[data-color="green"] {
  background-color: lab(50% -120 125);
}
[data-color="green-light"] {
  background-color: lab(90% -120 125);
}

[data-color="blue-dark"] {
  background-color: lab(10 -120 -120);
}
[data-color="blue"] {
  background-color: lab(50 -120 -120);
}
[data-color="blue-light"] {
  background-color: lab(90 -120 -120);
}

Результат

Настройка цветовых осей

В этом примере демонстрируется эффект установки значений a и b функции lab() в крайние и средние точки оси a, которая простирается от зеленого (-125) до красного (125), и оси b, которая простирается от желтого (-125) до синего (125).

HTML

<div data-color="red-yellow"></div>
<div data-color="red-zero"></div>
<div data-color="red-blue"></div>

<div data-color="zero-yellow"></div>
<div data-color="zero-zero"></div>
<div data-color="zero-blue"></div>

<div data-color="green-yellow"></div>
<div data-color="green-zero"></div>
<div data-color="green-blue"></div>

CSS

Используя свойство CSS background-color, мы меняем значения a и b функции цвета lab() вдоль осей a и b, показывая эффект максимальных, средних и минимальных значений в каждом случае.

/* a-axis max, variable b-axis */
[data-color="red-yellow"] {
  background-color: lab(50 125 125);
}
[data-color="red-zero"] {
  background-color: lab(50 125 0);
}
[data-color="red-blue"] {
  background-color: lab(50 125 -125);
}

/* a-axis center, variable b-axis */
[data-color="zero-yellow"] {
  background-color: lab(50 0 125);
}
[data-color="zero-zero"] {
  background-color: lab(50 0 0);
}
[data-color="zero-blue"] {
  background-color: lab(50 0 -125);
}

/* a-axis min, variable b-axis */
[data-color="green-yellow"] {
  background-color: lab(50 -125 125);
}
[data-color="green-zero"] {
  background-color: lab(50 -125 0);
}
[data-color="green-blue"] {
  background-color: lab(50 -125 -125);
}

Результат

Левый столбец находится в желтой области (-125) оси b, а правый — в синей (125). Верхняя строка отображает цвета в красной области оси a (-125), а нижняя — в зеленой (125). Средний столбец и строка находятся в середине (0) каждой оси, при этом средняя ячейка является серой; она не содержит красного, зеленого, желтого или синего, с 0 значением для обеих осей.

Линейные градиенты вдоль оси a и оси b

В этом примере используются линейные градиенты для демонстрации прогрессии значений функции lab() вдоль оси a (от красного к зеленому) и вдоль оси b (от желтого к синему). На каждом изображении градиента одна ось остается статичной, а другая ось меняется от низкого до высокого значения оси.

CSS

/* a-axis gradients */
[data-color="red-to-green-yellow"] {
  background-image: linear-gradient(to right, lab(50 125 125), lab(50 -125 125));
}
[data-color="red-to-green-zero"] {
  background-image: linear-gradient(to right, lab(50 125 0), lab(50 -125 0));
}
[data-color="red-to-green-blue"] {
  background-image: linear-gradient(to right, lab(50 125 -125), lab(50 -125 -125));
}

/* b-axis gradients */
[data-color="yellow-to-blue-red"] {
  background-image: linear-gradient(to right, lab(50 125 125), lab(50 125 -125));
}
[data-color="yellow-to-blue-zero"] {
  background-image: linear-gradient(to right, lab(50 0 125), lab(50 0 -125));
}
[data-color="yellow-to-blue-green"] {
  background-image: linear-gradient(to right, lab(50 -125 125),lab(50 -125 -125));
}

Результат

Настройка непрозрачности

Следующий пример показывает эффект изменения значения A (альфа) функционального обозначения lab(). Элементы red и red-alpha перекрывают элемент #background-div для демонстрации эффекта непрозрачности. Присвоение A значения 0.4 делает цвет 40% непрозрачным.

HTML

<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

CSS

[data-color="red"] {
  background-color: lab(80 125 125);
}
[data-color="red-alpha"] {
  background-color: lab(80 125 125 / 0.4);
}

Результат

Использование относительных цветов с lab()

В этом примере стилизуются три <div> элемента с разными цветами фона. Средний элемент получает исходный --base-color, а левый и правый — осветленные и затемненные варианты этого --base-color.

Эти варианты определяются с помощью относительных цветов — --base-color пользовательское свойство передается в функцию lab(), и выходные цвета изменяют свой канал светлоты для достижения желаемого эффекта с помощью функции calc() . Осветленный цвет имеет 15% добавленных к каналу светлоты, а затемнённый — 15% вычтенных.

CSS

:root {
  --base-color: orange;
  /* equivalent of lab(75 24 79) */
}

#one {
  background-color: lab(from var(--base-color) calc(l + 15) a b);
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: lab(from var(--base-color) calc(l - 15) a b);
}

Результат

Вывод следующий:

Спецификации

Спецификация
CSS Color Module Level 5
# relative-Lab
CSS Color Module Level 4
# lab-colors

Совместимость с браузерами

Рабочий стол Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на iOS Samsung Internet WebView Android
lab 111 111 113 97 15 111 113 75 15 22.0 111
mixed_type_parameters 116 116 113 102 16.2 116 113 78 16.2 24.0 116
relative_syntax 119 119 128 105 16.4 119 128 79 16.4 25.0 119

См. также

  • <color> тип данных
  • <color-function> тип данных
  • Использование относительных цветов
  • Модуль CSS colors
  • LCH цвета в CSS: что, почему и как? от Ли Веру (2020)
  • Заметки о выпуске Safari Technology Preview 122: включает lab() и lch() цвета

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API