Я создаю инструмент Color Picker и для слайдера HSL мне нужно иметь возможность конвертировать RGB в HSL. Когда я искал SO для способа сделать преобразование, я нашел этот вопрос преобразование цвета HSL в RGB.
Хотя он предоставляет функцию для преобразования из RGB в HSL, я не вижу объяснения тому, что действительно происходит в расчете. Чтобы лучше это понять, я прочитал HSL и HSV в Википедии.
Позже я переписал функцию из "Преобразование цветов HSL в RGB", используя расчеты со страницы "HSL и HSV".
Я застрял в расчете оттенка, если R является максимальным значением. См. расчет на странице "HSL и HSV":
Это из другой вики-страницы на голландском языке:
и это из ответов на "Преобразование цветов HSL в RGB":
case r: h = (g - b) / d + (g < b ? 6 : 0); break; // d = max-min = c
Я протестировал все три с несколькими значениями RGB, и они, похоже, дают схожие (если не точные) результаты. Что мне интересно, они выполняют одно и то же? Получу ли я другие результаты для некоторых конкретных значений RGB? Какой из них мне следует использовать?
hue = (g - b) / c; // dutch wiki
hue = ((g - b) / c) % 6; // eng wiki
hue = (g - b) / c + (g < b ? 6 : 0); // SO answer
function rgb2hsl(r, g, b) {
// see https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
// convert r,g,b [0,255] range to [0,1]
r = r / 255,
g = g / 255,
b = b / 255;
// get the min and max of r,g,b
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
// lightness is the average of the largest and smallest color components
var lum = (max + min) / 2;
var hue;
var sat;
if (max == min) { // no saturation
hue = 0;
sat = 0;
} else {
var c = max - min; // chroma
// saturation is simply the chroma scaled to fill
// the interval [0, 1] for every combination of hue and lightness
sat = c / (1 - Math.abs(2 * lum - 1));
switch(max) {
case r:
// hue = (g - b) / c;
// hue = ((g - b) / c) % 6;
// hue = (g - b) / c + (g < b ? 6 : 0);
break;
case g:
hue = (b - r) / c + 2;
break;
case b:
hue = (r - g) / c + 4;
break;
}
}
hue = Math.round(hue * 60); // °
sat = Math.round(sat * 100); // %
lum = Math.round(lum * 100); // %
return [hue, sat, lum];
}
