This content has been automatically translated from Ukrainian.
Colors in HWB format are not often used in web design and programming. But sometimes it's necessary to convert them to RGB. Let's see how to do this.
HWB Format
The HWB code consists of three components:
- H (Hue) — angle on the color wheel (0–360°)
- W (Whiteness) — from 0 to 100%, indicates how much white is added
- B (Blackness) — from 0 to 100%, indicates how much black is added
How to Convert HWB to RGB Manually
- Convert the hue (H) to base RGB.
- Apply whiteness (W) and blackness (B).
JavaScript Code Example
function hwbToRgb(h, w, b) {
if (w + b > 1) throw new Error("Whiteness and blackness must total at most 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)];
}
This function takes HWB values and returns RGB in the range [0-255].