В двух разных представлениях один и тот же цвет запишется по-разному. Например, красный в RGB - #FF0000, а в HSL - (0, 100, 100). Учимся конвертации из HSL в RGB.
Небольшое пояснение:
RGB - red, green, blue
HSL - Hue, Saturation, Luminance
На создание этой заметки сподвигла поставленная передо мной задача, в ходе которой потребовалось найти (или написать) скрипт конвертации. К счастью писать не пришлось, всё нашлось здесь. Ниже привожу код, переписанный для языка JavaScript.
// Функции для перевода цвета из
// HSL-представления в RGB
// Авторские права:
// by Branco Medeiros, 1999, branco@apis.com.br
// (adapted from Java.awt.Color.java)
// adjusted to our definition by Donald, 20011119
function HSLToRGB(Hue, Saturation, Luminance) {
var R, G, B;
var nH, nS, nL;
var nF, nP, nQ, nT;
var lH;
if (Saturation > 0) {
nH = Hue / 60;
nL = Luminance / 100;
nS = Saturation / 100;
lH = parseInt(nH);
nF = nH - lH;
nP = nL * (1 - nS);
nQ = nL * (1 - nS * nF);
nT = nL * (1 - nS * (1 - nF));
switch (lH) {
case 0:
R = nL * 255;
G = nT * 255;
B = nP * 255;
break;
case 1:
R = nQ * 255;
G = nL * 255;
B = nP * 255;
break;
case 2:
R = nP * 255;
G = nL * 255;
B = nT * 255;
break;
case 3:
R = nP * 255;
G = nQ * 255;
B = nL * 255;
break;
case 4:
R = nT * 255;
G = nP * 255;
B = nL * 255;
break;
case 5:
R = nL * 255;
G = nP * 255;
B = nQ * 255;
break;
}
} else {
R = (Luminance * 255) / 100;
G = R;
B = R;
}
// Тестовый вывод
alert (
RGBToLongSafe(R, G, B)
);
return RGBToLongSafe(R, G, B);
}
function RGBToLongSafe(R, G, B) {
R = parseInt(xLimit(R, 0, 255));
G = parseInt(xLimit(G, 0, 255));
B = parseInt(xLimit(B, 0, 255));
return decToHex([R,G,B]);
}
// Дополнительная функция для перевода RGB из десятичного
// в шестнадцатиричный формат
function decToHex(decArray) {
var hex = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
var out = "#";
for (var i = 0; i < decArray.length; i++) {
dec = parseInt(decArray[i]);
out += hex[parseInt(dec / 16)] + hex[dec % 16];
}
return out;
}
function xLimit(Value, Lower, Higher) {
if (Value < Lower) Value = Lower;
if (Value > Higher) Value = Higher;
return Value;
}
// HSL-представления в RGB
// Авторские права:
// by Branco Medeiros, 1999, branco@apis.com.br
// (adapted from Java.awt.Color.java)
// adjusted to our definition by Donald, 20011119
function HSLToRGB(Hue, Saturation, Luminance) {
var R, G, B;
var nH, nS, nL;
var nF, nP, nQ, nT;
var lH;
if (Saturation > 0) {
nH = Hue / 60;
nL = Luminance / 100;
nS = Saturation / 100;
lH = parseInt(nH);
nF = nH - lH;
nP = nL * (1 - nS);
nQ = nL * (1 - nS * nF);
nT = nL * (1 - nS * (1 - nF));
switch (lH) {
case 0:
R = nL * 255;
G = nT * 255;
B = nP * 255;
break;
case 1:
R = nQ * 255;
G = nL * 255;
B = nP * 255;
break;
case 2:
R = nP * 255;
G = nL * 255;
B = nT * 255;
break;
case 3:
R = nP * 255;
G = nQ * 255;
B = nL * 255;
break;
case 4:
R = nT * 255;
G = nP * 255;
B = nL * 255;
break;
case 5:
R = nL * 255;
G = nP * 255;
B = nQ * 255;
break;
}
} else {
R = (Luminance * 255) / 100;
G = R;
B = R;
}
// Тестовый вывод
alert (
RGBToLongSafe(R, G, B)
);
return RGBToLongSafe(R, G, B);
}
function RGBToLongSafe(R, G, B) {
R = parseInt(xLimit(R, 0, 255));
G = parseInt(xLimit(G, 0, 255));
B = parseInt(xLimit(B, 0, 255));
return decToHex([R,G,B]);
}
// Дополнительная функция для перевода RGB из десятичного
// в шестнадцатиричный формат
function decToHex(decArray) {
var hex = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
var out = "#";
for (var i = 0; i < decArray.length; i++) {
dec = parseInt(decArray[i]);
out += hex[parseInt(dec / 16)] + hex[dec % 16];
}
return out;
}
function xLimit(Value, Lower, Higher) {
if (Value < Lower) Value = Lower;
if (Value > Higher) Value = Higher;
return Value;
}
