Kolory w formacie HWB rzadko są używane w web designie i programowaniu. Ale czasami trzeba je przetłumaczyć na RGB. Zobaczmy, jak to zrobić.
Format HWB
Kod HWB składa się z trzech komponentów:
- H (Hue, odcień) — kąt na kole kolorów (0–360°)
- W (Whiteness, biel) — od 0 do 100%, wskazuje, ile białego jest dodawane
- B (Blackness, czerń) — od 0 do 100%, wskazuje, ile czarnego jest dodawane
Jak ręcznie przetłumaczyć HWB na RGB
- Przekształć odcień (H) na podstawowy RGB.
- Nałóż biel (W) i czerń (B).
Przykład kodu w JavaScript
function hwbToRgb(h, w, b) {
if (w + b > 1) throw new Error("Biel i czerń muszą wynosić maksymalnie 100%");
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)];
}
Ta funkcja przyjmuje wartości HWB i zwraca RGB w zakresie [0-255].