This content has been automatically translated from Ukrainian.
Colors in HWB format are not often used in web design and programming. But sometimes it is 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 hue (H) to base RGB.
- Apply whiteness (W) and blackness (B).
Example Code in JavaScript
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].