hwb()

Probieren Sie es aus

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%;
}

Syntax

/* 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))

Beschreibung

Diese Farb-Funktion im `sRGB`-Farbraum wird durch einen <hue>-Winkelwert, einen Weißheitswert, einen Schwärzewert und optional einen Alpha-Wert, der die Transparenz der Farbe repräsentiert, definiert.

Die Winkel, die bestimmten Farbtönen entsprechen, unterscheiden sich zwischen den Farbräumen sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()) und Oklab (verwendet von oklch()). hwb() befindet sich im gleichen Farbraum wie hsl() und hat daher die gleichen Farbton-Winkel. Weitere Details und Beispiele finden Sie auf der <hue> Referenzseite oder probieren Sie den Farbwähler, um es in Aktion zu sehen.

Eine hwb()-Farbe ist vollständig gesättigt, wenn sowohl der Weißheits- (W) als auch der Schwärzewert (B) 0 sind. Für jeden Farbtonwert H ist hwb(H 0% 0%) die gleiche Farbe wie hsl(H 100% 50%). Eine Erhöhung des Weißheitswertes hellt die Farbe auf. Eine Erhöhung der Schwärzung verdunkelt die Farbe.

Wenn sowohl die Schwärze als auch die Weißheit größer als 0 sind, wird die Farbe gedämpft und neigt sich in Richtung Grau. Wenn die Menge der hinzugefügten Weißheit und Schwärze gleich oder größer als 100% ist — mit anderen Worten, wenn W + B >= 100%, definiert die Farb-Funktion einen Grauton. Wenn die Summe beider Werte größer als 100% ist (W + B > 100%), werden die Weißheit- und Schwärzewerte der grauen Farbe effektiv als W / (W + B) und B / (W + B) normiert.

Werte

Nachfolgend sind die zugelassenen Werte sowohl für absolute als auch für relative Farben beschrieben.

Absolute Wert-Syntax

hwb(H W B[ / A])

Die Parameter sind wie folgt:

H

Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht in diesem Fall 0deg), das den <hue>-Winkel der Farbe repräsentiert.

W

Ein <percentage>, das die Weißheit der Farbe repräsentiert, oder das Schlüsselwort none (entspricht in diesem Fall 0%) zum Mischen. 0% bedeutet keine Weißheit. 100% bedeutet volle Weißheit, wenn B 0 ist, ansonsten werden sowohl W als auch B normiert.

B

Ein <percentage>, das die Schwärze der Farbe repräsentiert, oder das Schlüsselwort none (entspricht in diesem Fall 0%) zum Mischen. 0% bedeutet keine Schwärze. 100% bedeutet volle Schwärze, wenn W 0 ist, ansonsten werden sowohl W als auch B normiert.

A Optional

Ein <alpha-value>, der den Alpha-Kanalwert der Farbe repräsentiert, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig opak) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, wird er standardmäßig auf 100% gesetzt. Wenn enthalten, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Relative Wert-Syntax

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

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwort from wird immer verwendet, wenn eine relative Farbe definiert wird, gefolgt von einem <color>-Wert, der die Ursprungsfarbe darstellt. Dies ist die originale Farbe, auf der die relative Farbe basiert. Die Ursprungsfarbe kann jede gültige <color>-Syntax sein, einschließlich einer anderen relativen Farbe.

H

Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht in diesem Fall 0deg), das den <hue>-Winkel der Ausgabefarbe repräsentiert.

W

Ein <percentage>, das die Weißheit der Farbe repräsentiert, oder das Schlüsselwort none (entspricht in diesem Fall 0%) zum Mischen. 0% bedeutet keine Weißheit. 100% bedeutet volle Weißheit, wenn B 0 ist, ansonsten werden sowohl W als auch B normiert.

B

Ein <percentage>, das die Schwärze der Farbe repräsentiert, oder das Schlüsselwort none (entspricht in diesem Fall 0%) zum Mischen. 0% bedeutet keine Schwärze. 100% bedeutet volle Schwärze, wenn W 0 ist, ansonsten werden sowohl W als auch B normiert.

A Optional

Ein <alpha-value>, der den Alpha-Kanalwert der Ausgabefarbe repräsentiert, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig opak) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, entspricht er standardmäßig dem Alpha-Kanalwert der Ursprungsfarbe. Wenn enthalten, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definition der Ausgabekanäle relativ zur Farbe

Wenn die relative Farbsyntax innerhalb einer hwb()-Funktion verwendet wird, wandelt der Browser die Ursprungsfarbe in eine äquivalente HWB-Farbe um (wenn sie nicht bereits so spezifiziert ist). Die Farbe wird als drei getrennte Farbkanalwerte definiert — h (Hue), w (White), und b (Black) — plus einen Alphakanalwert (alpha). Diese Kanalwerte sind innerhalb der Funktion verfügbar, um beim Definieren der Ausgabefarbkanalwerte verwendet zu werden:

• Der h-Kanalwert wird auf einen <number> zwischen 0 und 360, einschließlich, aufgelöst.
• Die w- und b-Kanäle werden jeweils auf einen <number> zwischen 0 und 100, einschließlich, aufgelöst.
• Der alpha-Kanal wird auf einen <number> zwischen 0 und 1, einschließlich, aufgelöst.

Beim Definieren einer relativen Farbe können die unterschiedlichen Kanäle der Ausgabefarbe auf mehrere verschiedene Weisen ausgedrückt werden. Im Folgenden werden wir einige Beispiele studieren, um diese zu veranschaulichen.

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Allerdings gibt das erste die gleiche Farbe wie die Ursprungsfarbe aus, und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen wirklich keine relativen Farben! Es wäre unwahrscheinlich, dass Sie diese jemals in einer echten Codebasis verwenden würden, und würden wahrscheinlich einfach einen absoluten Farbwert stattdessen verwenden. Wir haben diese Beispiele als Ausgangspunkt zum Lernen der relativen hwb()-Syntax aufgenommen.

Beginnen wir mit einer Ursprungsfarbe von hsl(0 100% 50%) (entspricht hwb(0 0% 0%)). Die folgende Funktion gibt die gleiche Farbe wie die Ursprungsfarbe aus — sie verwendet die h, w und b Kanalwerte (0, 0%, und 0%) der Ursprungsfarbe als Ausgabekanalwerte:

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

Diese Funktion gibt die sRGB-color()-Entsprechung von hwb(0 0% 0%) aus: color(srgb 1 0 0).

Die nächste Funktion verwendet absolute Werte für die Ausgabefarbkanalwerte und gibt eine völlig andere Farbe aus, die nicht auf der Ursprungsfarbe basiert:

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

Im obigen Fall ist die Ausgabefarbe die sRGB-color()-Entsprechung von hwb(240 52% 12%): color(srgb 0.52 0.52 0.88).

Die folgende Funktion erstellt eine relative Farbe basierend auf der Ursprungsfarbe:

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

Dieses Beispiel:

• Konvertiert die Ursprungsfarbe (hsl(0 100% 50%)) in eine hwb()-Äquivalente (hwb(0 0% 0%)).
• Setzt die H- und B-Kanalwerte für die Ausgabefarbe auf die H- und B-Kanalwerte der hwb()-Äquivalenten der Ursprungsfarbe — diese Werte sind 0 und 0%.
• Setzt den W-Kanalwert der Ausgabefarbe auf einen neuen Wert, der nicht auf der Ursprungsfarbe basiert: 30%.

Die endgültige Ausgabefarbe ist die Entsprechung von hwb(0 30% 0%) im sRGB-Farbraum — color(srgb 1 0.3 0.3).

In den Beispielen, die wir bisher in diesem Abschnitt gesehen haben, wurden die Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Alphakanal der Ausgabefarbe nicht angegeben wird, entspricht er standardmäßig dem Wert des Alphakanals der Ursprungsfarbe. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben wird (und es sich nicht um eine relative Farbe handelt), entspricht er per Standard 1. Daher sind die Ursprungs- und Ausgabe-Alphakanalwerte für die obigen Beispiele 1.

Betrachten wir nun einige Beispiele, die originelle und Ausgabe-Alphakanalwerte spezifizieren. Das erste spezifiziert den Ausgabekanalswert als den gleichen wie den originellen Alphakanalwert, während das zweite einen anderen Ausgabekanalswert spezifiziert, der nichts mit dem originellen Alphakanalwert zu tun hat.

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) */

Im folgenden Beispiel wird die hsl()-Ursprungsfarbe erneut in eine hwb()-Darstellung konvertiert — hwb(0 0% 0%). calc()-Berechnungen werden auf die H-, W-, B- und A-Werte angewendet und die endgültige Ausgabefarbe ist die Entsprechung von hwb(120 25% 10% / 0.9 im sRGB-Farbraum: 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))

Formale Syntax

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

<hue> = 
  <number>  |
  <angle>   

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

Beispiele

Verwendung relativer Farben mit hwb()

Dieses Beispiel gestaltet drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere erhält die unveränderte --base-color, während die linken und rechten Varianten dieser --base-color-Variante aufgehellt bzw. abgedunkelt werden.

Diese Varianten werden unter Verwendung relativer Farben definiert — die benutzerdefinierte Eigenschaft --base-color custom property wird in eine hwb()-Funktion übergeben, und die Ausgabefarben haben ihre Weiß- und Schwarzkanäle modifiziert, um den gewünschten Effekt über eine calc()-Funktion zu erzielen. Die aufgehellte Farbe hat 30% zum Weißkanal hinzugefügt und die verdunkelte Farbe hat 30% zum Schwarzkanal hinzugefügt.

<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%));
  }
}

Ergebnis

Die Ausgabe ist wie folgt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <color>: Für eine Liste aller Farbnationen
• Color format converter tool
• Using relative colors
• CSS colors Modul
• <hue>: der Datentyp, der einen Farbtonwinkel einer Farbe repräsentiert