hwb()

Эта функция цвета в sRGB цветовом пространстве определяется значением угла <hue>, значением белизны, значением чернины и, необязательно, значением alpha, представляющим прозрачность цвета.

Углы, соответствующие определенным оттенкам, различаются в цветовых пространствах sRGB (используемых hsl() и hwb()), CIELAB (используемых lch()) и Oklab (используемых oklch()). hwb() находится в том же цветовом пространстве, что и hsl(), и поэтому имеет те же углы оттенков цвета. См. страницу справки <hue> для получения подробных сведений и примеров, или попробуйте изменить оттенки на палитре цветов, чтобы увидеть их в действии.

Цвет hwb() полностью насыщен, когда значения белизны (W) и чернины (B) оба равны 0. Для любого значения оттенка H, hwb(H 0% 0%) имеет тот же цвет, что и hsl(H 100% 50%). Увеличение значения белизны осветляет цвет. Увеличение значения чернины затемняет цвет.

Когда оба значения чернины и белизны больше 0, цвет становится приглушенным, приближаясь к серому. Когда добавленное количество белизны и чернины равно или больше 100% — другими словами, если W + B >= 100%, функция цвета определяет оттенок серого. Когда сумма обоих значений больше 100% (W + B > 100%), значения белизны и чернины серого цвета эффективно нормализуются как W / (W + B) и B / (W + B) соответственно.

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

hwb(H W B[ / A])

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

H

<number>, <angle> или ключевое слово none (эквивалентное 0deg в данном случае), представляющее угол <hue> цвета.

W

<percentage>, представляющее белизну цвета, или ключевое слово none (эквивалентное 0% в данном случае) для смешивания. 0% означает отсутствие белизны. 100% означает полную белизну, если B равно 0, в противном случае оба значения W и B нормализуются.

B

<percentage>, представляющее чернину цвета, или ключевое слово none (эквивалентное 0% в данном случае) для смешивания. 0% означает отсутствие чернины. 100% означает полную чернину, если W равно 0, в противном случае оба значения W и B нормализуются.

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

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

hwb(from <color> H W B[ / A])

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

from <color>

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

H

<number>, <angle> или ключевое слово none (эквивалентное 0deg в данном случае), представляющее угол <hue> выходного цвета.

W

<percentage>, представляющее белизну цвета, или ключевое слово none (эквивалентное 0% в данном случае) для смешивания. 0% означает отсутствие белизны. 100% означает полную белизну, если B равно 0, в противном случае оба значения W и B нормализуются.

B

<percentage>, представляющее чернину цвета, или ключевое слово none (эквивалентное 0% в данном случае) для смешивания. 0% означает отсутствие чернины. 100% означает полную чернину, если W равно 0, в противном случае оба значения W и B нормализуются.

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

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

При использовании относительной цветовой синтаксики внутри функции hwb(), браузер преобразует исходный цвет в эквивалентный цвет HWB (если он не задан как таковой). Цвет определяется как три отдельных значения цветовых каналов — h (оттенок), w (белого) и b (черного) — плюс значение канала альфа (alpha). Эти значения каналов доступны внутри функции для использования при определении значений цветовых каналов вывода:

• Значение канала h разрешается в значение <number> в пределах от 0 до 360, включительно.
• Значения каналов w и b каждый разрешается в значение <number> в пределах от 0 до 100, включительно.
• Значение канала alpha разрешается в значение <number> в пределах от 0 до 1, включительно.

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

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

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

hwb(from hsl(0 100% 50%) h w b)

Цвет вывода этой функции — эквивалент sRGB color() цвета hwb(0 0% 0%): color(srgb 1 0 0).

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

hwb(from hsl(0 100% 50%) 240 52% 12%)

В этом случае выходной цвет — эквивалент sRGB color() цвета hwb(240 52% 12%): color(srgb 0.52 0.52 0.88).

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

hwb(from hsl(0 100% 50%) h 30% b)

Этот пример:

• Преобразует исходный цвет (hsl(0 100% 50%)) в эквивалент hwb() (hwb(0 0% 0%)).
• Устанавливает значения каналов H и B для выходного цвета на значения каналов H и B эквивалента исходного цвета hwb() — эти значения составляют соответственно 0 и 0%.
• Устанавливает значение канала W выходного цвета на новое значение, не зависящее от исходного цвета: 30%.

Конечный выходной цвет эквивалентен hwb(0 30% 0%) в цветовом пространстве sRGB — color(srgb 1 0.3 0.3).

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

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

hwb(from hsl(0 100% 50% / 0.8) h w b / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

hwb(from hsl(0 100% 50% / 0.8) h w b / 0.5)
/* Computed output color: color(srgb 1 0 0 / 0.5) */

В следующем примере исходный цвет hsl() снова преобразуется в представление hwb() — hwb(0 0% 0%). Вычисления calc() применяются к значениям H, W, B и A, и конечный выходной цвет эквивалентен hwb(120 25% 10% / 0.9 в цветовом пространстве sRGB: color(srgb 0.25 0.9 0.25 / 0.9).

hwb(from hsl(0 100% 50%) calc(h + 120) calc(w + 25) calc(b + 10) / calc(alpha - 0.1))

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

<hue> = 
  <number>  |
  <angle>   

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

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

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

CSS

:root {
  --base-color: orange;
}

/* As per the spec, w and b values should resolve to a number between 0-100
   However, Chrome 121+ incorrectly resolves them to numbers between 0-1
   hence currently using calculations like w + 0.3 instead of w + 30 */

#one {
  background-color: hwb(from var(--base-color) h calc(w + 0.3) b);
}

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

#three {
  background-color: hwb(from var(--base-color) h w calc(b + 0.3));
}

/* Use @supports to add in support for old syntax that requires % units to
   be specified in w and b calculations. This is required for Safari 16.4+. */
@supports (color: hwb(from red h w calc(b + 30%))) {
  #one {
    background-color: hwb(from var(--base-color) h calc(w + 30%) b);
  }

  #three {
    background-color: hwb(from var(--base-color) h w calc(b + 30%));
  }
}

Результат

Вывод выглядит следующим образом:

• <color>: Список всех обозначений цвета
• Инструмент выбора и преобразования цвета
• Использование относительных цветов
• Модуль CSS colors
• <hue>: тип данных, представляющий угол оттенка цвета