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

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

Якщо потрібно перетворити RGB у HWB, можна скористатися формулою, яка дозволяє отримати відтінок (H), білизну (W) та чорність (B).

Раніше ми розглядали зворотне перетворення: Як конвертувати HWB у RGB?.

Формат RGB

Кольори у форматі RGB складаються з трьох компонентів:

R (Red, червоний) — від 0 до 255
G (Green, зелений) — від 0 до 255
B (Blue, синій) — від 0 до 255

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

Знайдіть відтінок (H), використовуючи перетворення RGB → HSL.
Обчисліть білизну (W) та чорність (B).

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

function rgbToHwb(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  
  let max = Math.max(r, g, b);
  let min = Math.min(r, g, b);
  let w = min;
  let bComp = 1 - max;

  let h = (max === min) ? 0 :
          (max === r) ? ((g - b) / (max - min)) * 60 + (g < b ? 360 : 0) :
          (max === g) ? ((b - r) / (max - min)) * 60 + 120 :
          ((r - g) / (max - min)) * 60 + 240;
  
  return [Math.round(h), Math.round(w * 100), Math.round(bComp * 100)];
}

console.log(rgbToHwb(51, 102, 255));