hwb()

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

Die Winkel, die bestimmten Farbtönen entsprechen, unterscheiden sich im sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()) und Oklab (verwendet von oklch()) Farbräumen. 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, die Farbtöne im Farbwähler zu ändern, um es in Aktion zu sehen.

Eine hwb() Farbe ist vollständig gesättigt, wenn sowohl der Weißheits- (W) als auch der Schwärze-Wert (B) 0 sind. Für jeden Farbwert H entspricht hwb(H 0% 0%) derselben Farbe wie hsl(H 100% 50%). Ein erhöhter Weißheitswert hellt die Farbe auf. Ein erhöhter Schwärzewert verdunkelt die Farbe.

Wenn sowohl der Schwärze- als auch der Weißheitswert größer als 0 sind, wird die Farbe gedämpft und tendiert zu Grau. Wenn die Summe der Weißheits- und Schwärzewerte gleich oder größer als 100% ist — also, wenn W + B >= 100%, definiert die Farbfunktion einen Grauton. Wenn die Summe beider Werte größer als 100% ist (W + B > 100%), werden die Weißheits- und Schwärzewerte der Graufarbe effektiv als W / (W + B) und B / (W + B) normalisiert.

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

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%), um es zu mischen. 0% repräsentiert keine Weißheit. 100% repräsentiert volle Weißheit, wenn B 0 ist, andernfalls werden sowohl die W als auch die B Werte normalisiert.

B

Ein <percentage>, das die Schwärze der Farbe repräsentiert oder das Schlüsselwort none (entspricht in diesem Fall 0%), um es zu mischen. 0% repräsentiert keine Schwärze. 100% repräsentiert volle Schwärze, wenn W 0 ist, andernfalls werden sowohl die W als auch die B Werte normalisiert.

A Optional

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

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

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwort from ist immer enthalten, wenn eine relative Farbe definiert wird, gefolgt von einem <color> Wert, der die Ursprungsfarbe darstellt. Dies ist die ursprüngliche 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%), um es zu mischen. 0% repräsentiert keine Weißheit. 100% repräsentiert volle Weißheit, wenn B 0 ist, andernfalls werden sowohl die W als auch die B Werte normalisiert.

B

Ein <percentage>, das die Schwärze der Farbe repräsentiert oder das Schlüsselwort none (entspricht in diesem Fall 0%), um es zu mischen. 0% repräsentiert keine Schwärze. 100% repräsentiert volle Schwärze, wenn W 0 ist, andernfalls werden sowohl die W als auch die B Werte normalisiert.

A Optional

Ein <alpha-value>, das den Alpha-Kanal-Wert der Ausgabefarbe repräsentiert, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig deckend) 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 er enthalten ist, wird der Wert von einem Schrägstrich (/) vorangestellt.

Bei der Verwendung der relativen Farbsyntax innerhalb einer hwb() Funktion konvertiert der Browser die Ursprungsfarbe in eine äquivalente HWB-Farbe (wenn sie nicht bereits als solche spezifiziert ist). Die Farbe wird als drei unterscheidbare Farbkanalwerte definiert — h (Farbton), w (Weiß) und b (Schwarz) — plus einen Alpha-Kanalwert (alpha). Diese Kanalwerte sind innerhalb der Funktion verfügbar, um sie bei der Definition der Ausgabefarbkanalwerte zu verwenden:

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

Bei der Definition einer relativen Farbe können die verschiedenen Kanäle der Ausgabefarbe auf unterschiedliche Weise ausgedrückt werden. Im Folgenden werden einige Beispiele betrachtet, um diese zu veranschaulichen.

In den ersten beiden Beispielen unten verwenden wir relative Farbsyntax. Jedoch gibt das erste Beispiel die gleiche Farbe wie die Ursprungsfarbe aus, und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen eigentlich keine relativen Farben! Sie würden diese Fälle wahrscheinlich nie in einem echten Codebase verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Lernen über die relative hwb() Syntax eingeschlossen.

Lassen Sie uns mit einer Ursprungsfarbe von hsl(0 100% 50%) (äquivalent zu hwb(0 0% 0%)) beginnen. 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 die Ausgabekanalwerte:

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

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

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

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

Im obigen Fall ist die Ausgabefarbe das sRGB color() Äquivalent 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 ein äquivalentes hwb() (hwb(0 0% 0%)).
• Setzt die H und B Kanalwerte für die Ausgabefarbe zu denen der Ursprungsfarbe hwb() äquivalenten H und B Kanalwerte — diese Werte sind 0 und 0%, jeweils.
• Setzt den W Kanalwert der Ausgabefarbe auf einen neuen Wert, 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 Alpha-Kanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Alpha-Kanal der Ausgabefarbe nicht angegeben wird, entspricht er standardmäßig demselben Wert wie der Alpha-Kanal der Ursprungsfarbe. Wenn der Alpha-Kanal der Ursprungsfarbe nicht angegeben wird (und es sich nicht um eine relative Farbe handelt), ist er standardmäßig 1. Daher sind die Ursprungs- und Ausgabewerte des Alpha-Kanals für die obigen Beispiele 1.

Lassen Sie uns einige Beispiele ansehen, die Origin- und Ausgabe-Alpha-Kanal-Werte spezifizieren. Das erste spezifiziert den Ausgabe-Alpha-Kanal-Wert als gleich dem Ursprungs-Alpha-Kanal-Wert, während das zweite einen anderen Ausgabe-Alpha-Kanal-Wert spezifiziert, der nicht mit dem Ursprungs-Alpha-Kanal-Wert verwandt ist.

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 finale 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))

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

<hue> = 
  <number>  |
  <angle>   

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

Dieses Beispiel stylt drei <div> Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere erhält die unmodifizierte --base-color, während die linken und rechten aufgehellte und abgedunkelte Varianten dieser --base-color erhalten.

Diese Varianten werden unter Verwendung relativer 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 Schwarzk kanal 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:

• <color>: Für eine Liste aller Farbnotationen
• Farbwähler und Konvertierungswerkzeug
• Verwendung relativer Farben
• CSS-Farben Modul
• <hue>: der Datentyp, der einen Farbtonwinkel einer Farbe darstellt