How to Convert HWB to RGB
Converting HWB to RGB takes a color defined by mixing white and black into a base hue, and translates it into the raw light intensities required by a digital display.
Why Convert HWB to RGB?
HWB is a highly practical format for building monochromatic design systems. By locking the Hue and adjusting the Whiteness and Blackness, you can quickly generate a cohesive set of background tints and text shades. However, many older graphics libraries, canvas APIs, and legacy systems only accept RGB values. Converting your HWB colors ensures they work across your entire stack.
The Mathematics of the Conversion
The conversion algorithm first checks if the color is fully desaturated. If the sum of Whiteness (W) and Blackness (B) is greater than or equal to 100%, the hue is ignored. The resulting RGB channels will all share the same value, calculated as W / (W + B).
If the color retains its hue, the algorithm calculates a pure, fully saturated RGB version of that hue. It then scales those RGB channels based on the remaining available color space (1 - W - B) and adds the Whiteness value to establish the final lightness.
Converting HWB to RGB in JavaScript
Here is a standard approach for converting HWB percentages into an RGB object:
function hwbToRgb(h, w, b) {
// Normalize whiteness and blackness to a 0-1 scale
w /= 100;
b /= 100;
// If white and black completely wash out the color
if (w + b >= 1) {
let gray = Math.round((w / (w + b)) * 255);
return { r: gray, g: gray, b: gray };
}
// Helper to find pure hue RGB values
const k = n => (n + h / 30) % 12;
const f = n => 0.5 - 0.5 * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
// Scale by blackness/whiteness and convert to 0-255
return {
r: Math.round((f(0) * (1 - w - b) + w) * 255),
g: Math.round((f(8) * (1 - w - b) + w) * 255),
b: Math.round((f(4) * (1 - w - b) + w) * 255)
};
}