hwb() CSS-Funktion

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 Farbton-Winkelwert, einen Weißanteilwert, einen Schwarzanteilwert und optional einen Alphawert, der die Transparenz der Farbe darstellt, 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 Farbwinkel. Weitere Details und Beispiele finden Sie auf der Farbton-Referenzseite, oder versuchen Sie die Farbtöne im Farbwähler zu ändern, um es in Aktion zu sehen.

Eine hwb()-Farbe ist vollständig gesättigt, wenn sowohl ihr Weißanteil (W) als auch ihr Schwarzanteil (B) 0 sind. Für jeden Farbtonwert H entspricht hwb(H 0% 0%) derselben Farbe wie hsl(H 100% 50%). Eine Erhöhung des Weißanteilwerts hellt die Farbe auf. Eine Erhöhung des Schwarzanteils verdunkelt die Farbe.

Wenn sowohl der Schwarz- als auch der Weißanteil größer als 0 sind, wird die Farbe gedämpft und tendiert zu Grau. Wenn die Summe von Weiß- und Schwarzanteil 100% oder mehr beträgt—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ß- und Schwarzanteilwerte der Graufarbe effektiv als W / (W + B) und B / (W + B) normalisiert.

Werte

Unten finden Sie Beschreibungen der zulässigen Werte für absolute und relative Farben.

Absolute Wert-Syntax

hwb(H W B[ / A])

Die Parameter sind wie folgt:

H

Ein <number>, ein Winkel, oder das Schlüsselwort none (in diesem Fall äquivalent zu 0deg), das den Farbtonwinkel der Farbe repräsentiert.

W

Ein <percentage>-Wert, der den Weißanteil der Farbe repräsentiert, oder das Schlüsselwort none (in diesem Fall äquivalent zu 0%) zum Mischen. 0% repräsentiert keinen Weißanteil. 100% repräsentiert vollen Weißanteil, wenn B 0 ist, ansonsten werden beide die Werte W und B normalisiert.

B

Ein <percentage>-Wert, der den Schwarzanteil der Farbe repräsentiert, oder das Schlüsselwort none (in diesem Fall äquivalent zu 0%) zum Mischen. 0% repräsentiert keinen Schwarzanteil. 100% repräsentiert vollen Schwarzanteil, wenn W 0 ist, ansonsten werden beide die Werte W und B normalisiert.

A Optional

Ein <alpha-value>, der den Alphakanalwert 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 Alphakanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben ist, beträgt er standardmäßig 100%. Wird es eingeschlossen, 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 bei der Definition einer relativen Farbe verwendet, gefolgt von einem <color>-Wert, der die Ursprungsfarbe darstellt. Dies ist die Originalfarbe, auf der die relative Farbe basiert. Die Ursprungsfarbe kann jede gültige <color>-Syntax sein, einschließlich einer weiteren relativen Farbe.

H

Ein <number>, ein Winkel, oder das Schlüsselwort none (in diesem Fall äquivalent zu 0deg), das den Farbtonwinkel der Ausgabe-Farbe repräsentiert.

W

Ein <percentage>-Wert, der den Weißanteil der Farbe repräsentiert, oder das Schlüsselwort none (in diesem Fall äquivalent zu 0%) zum Mischen. 0% repräsentiert keinen Weißanteil. 100% repräsentiert vollen Weißanteil, wenn B 0 ist, ansonsten werden beide die Werte W und B normalisiert.

B

Ein <percentage>-Wert, der den Schwarzanteil der Farbe repräsentiert, oder das Schlüsselwort none (in diesem Fall äquivalent zu 0%) zum Mischen. 0% repräsentiert keinen Schwarzanteil. 100% repräsentiert vollen Schwarzanteil, wenn W 0 ist, ansonsten werden beide die Werte W und B normalisiert.

A Optional

Ein <alpha-value>, der den Alphakanalwert 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 Alphakanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben ist, entspricht er dem Alphakanalwert der Ursprungsfarbe. Wird es eingeschlossen, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definieren von relativen Farbe-Ausgabekanalkomponenten

Wenn die relative Farbsyntax innerhalb einer hwb()-Funktion verwendet wird, konvertiert der Browser die Ursprungsfarbe in eine gleichwertige HWB-Farbe (falls sie nicht bereits so angegeben ist). Die Farbe wird als drei verschiedene Farbkanalwerte definiert — h (Farbton), w (weiß) und b (schwarz) — plus einen Alphakanalwert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um beim Definieren der Ausgabefarbkanalwerte verwendet zu werden:

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

Bei der Definition einer relativen Farbe können die verschiedenen Kanäle der Ausgabe-Farbe auf verschiedene Arten ausgedrückt werden. Unten werden wir einige Beispiele untersuchen, um diese zu veranschaulichen.

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

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

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

Die Ausgabe dieser Funktion ist das sRGB-Äquivalent von hwb(0 0% 0%): color(srgb 1 0 0).

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

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

In diesem Fall ist die Ausgabefarbe das sRGB-Äquivalent von hwb(240 52% 12%): color(srgb 0.52 0.52 0.88).

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

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

In diesem Beispiel:

• Die Ursprungsfarbe (hsl(0 100% 50%)) wird in ein hwb()-Äquivalent umgewandelt (hwb(0 0% 0%)).
• Die H- und B-Kanalwerte für die Ausgabefarbe werden auf die gleichen Werte wie die H- und B-Kanalwerte des hwb()-Äquivalents der Ursprungsfarbe gesetzt — diese Werte sind 0 und 0%, jeweils.
• Der W-Kanalwert der Ausgabefarbe wird auf einen neuen Wert gesetzt, der nicht auf der Ursprungsfarbe basiert: 30%.

Die endgültige Ausgabefarbe ist das Äquivalent 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 die Ausgabefarben explizit angegeben. Wenn der Alpha-Kanal der Ausgabefarbe nicht angegeben ist, entspricht er dem gleichen Wert wie der Alpha-Kanalwert der Ursprungsfarbe. Wenn der Alpha-Kanalwert der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), entspricht er 1. Daher sind sowohl die Ursprungs- als auch die Ausgabekanalwerte 1 für die obigen Beispiele.

Sehen wir uns einige Beispiele an, die Ursprungs- und Ausgabekanalwerte für den Alphakanal angeben. Das erste Beispiel spezifiziert den Ausgabekanalwert für den Alpha-Kanal als gleichwertig zum Ursprungs-Alphakanalwert, während das zweite Beispiel einen anderen Ausgabekanalwert für den Alphakanal angibt, der nicht mit dem Ursprungs-Alphakanalwert zusammenhängt.

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 umgewandelt — hwb(0 0% 0%). calc()-Berechnungen werden auf die H-, W-, B- und A-Werte angewendet, und die endgültige Ausgabefarbe ist das Äquivalent 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

Verwenden von relativen Farben mit hwb()

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

Diese Varianten werden unter Verwendung von relativen Farben definiert — die --base-color benutzerdefinierte Eigenschaft 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 abgedunkelte 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 Farbnomenklaturen
• Farbformat-Konverter-Tool
• Verwendung relativer Farben
• CSS-Farben Modul
• Farbton: Der Datentyp, der den Farbtonwinkel einer Farbe darstellt.