Farben im HWB-Format werden im Webdesign und in der Programmierung nicht häufig verwendet. Manchmal ist es jedoch notwendig, sie in RGB umzuwandeln. Lassen Sie uns sehen, wie das geht.
HWB-Format
Der HWB-Code besteht aus drei Komponenten:
- H (Hue, Farbton) — der Winkel im Farbkreis (0–360°)
- W (Whiteness, Weißheit) — von 0 bis 100%, gibt an, wie viel Weiß hinzugefügt wird
- B (Blackness, Schwärze) — von 0 bis 100%, gibt an, wie viel Schwarz hinzugefügt wird
Wie man HWB manuell in RGB umwandelt
- Wandeln Sie den Farbton (H) in die Basis-RGB um.
- Wenden Sie die Weißheit (W) und die Schwärze (B) an.
Beispielcode in JavaScript
function hwbToRgb(h, w, b) {
if (w + b > 1) throw new Error("Weißheit und Schwärze dürfen maximal 100% betragen");
let c = 1 - b;
let x = (1 - Math.abs((h / 60) % 2 - 1));
let [r, g, bl] = (h < 60) ? [c, x, 0] :
(h < 120) ? [x, c, 0] :
(h < 180) ? [0, c, x] :
(h < 240) ? [0, x, c] :
(h < 300) ? [x, 0, c] : [c, 0, x];
r = r * (1 - w) + w;
g = g * (1 - w) + w;
bl = bl * (1 - w) + w;
return [Math.round(r * 255), Math.round(g * 255), Math.round(bl * 255)];
}
Diese Funktion nimmt HWB-Werte entgegen und gibt RGB im Bereich von [0-255] zurück.