Функция CSS `hwb()`

Функциональная нотация hwb() задаёт цвет в sRGB-цветовом пространстве на основе его оттенка, белизны и черноты. Необязательный альфа-компонент задаёт прозрачность цвета.

Попробуйте

background: hwb(12 50% 0%);

background: hwb(50deg 30% 40%);

background: hwb(0.5turn 10% 0% / 0.5);

background: hwb(0 100% 0% / 50%);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

Синтаксис

/* Absolute values */
hwb(194 0% 0%)
hwb(194 0% 0% / .5)

/* Relative values */
hwb(from green h w b / 0.5)
hwb(from #123456 h calc(w + 30) b)
hwb(from lch(40% 70 240deg) h w calc(b - 30))

Описание

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

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

Задание компонентов каналов результирующего относительного цвета

При использовании синтаксиса относительных цветов внутри функции 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%). К значениям H, W, B и A применяются вычисления calc(), а итоговый результирующий цвет эквивалентен 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>

Примеры

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

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

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

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

: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
• <hue>: тип данных, представляющий угол оттенка цвета