Як конвертувати HWB у RGB?

CSS, Веб-розробка · 7-2-2025

Кольори у форматі HWB не часто використовуються у веб-дизайні та програмуванні. Але іноді потрібно перевести їх у RGB. Розглянемо, як це зробити.

Формат HWB

HWB-код складається з трьох компонентів:

H (Hue, відтінок) — кут на кольоровому колі (0–360°)
W (Whiteness, білизна або білість) — від 0 до 100%, вказує, скільки білого додається
B (Blackness, чорність) — від 0 до 100%, вказує, скільки чорного додається

Як перевести HWB у RGB вручну

Перетворіть відтінок (H) у базовий RGB.
Накладіть білизну/білість (W) та чорність (B).

Приклад коду на JavaScript

function hwbToRgb(h, w, b) {
  if (w + b > 1) throw new Error("Білість і чорнота мають складати щонайбільше 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)];
}

Ця функція приймає значення HWB та повертає RGB у діапазоні [0-255].