HSLから16進数RGBへ変換
HSLから16進数RGBへ変換するには次のような方法で可能です。
- ※ HSLはHue(色相)、Saturation(彩度)、Lightness(輝度)のそれぞれの頭文字を取った名称です。
色相 = 0~360°
彩度 = 0~100%
輝度 = 0~100%
functionの定義
JavaScript
var hslToRgb16 = function(hue, saturation, lightness) {
var result = false;
if (((hue || hue === 0) && hue <= 360) && ((saturation || saturation === 0) && saturation <= 100) && ((lightness || lightness === 0) && lightness <= 100)) {
var red = 0,
green = 0,
blue = 0,
q = 0,
p = 0,
hueToRgb;
hue = Number(hue) / 360;
saturation = Number(saturation) / 100;
lightness = Number(lightness) / 100;
if (saturation === 0) {
red = lightness;
green = lightness;
blue = lightness;
} else {
hueToRgb = function(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) {
p += (q - p) * 6 * t;
} else if (t < 1 / 2) {
p = q;
} else if (t < 2 / 3) {
p += (q - p) * (2 / 3 - t) * 6;
}
return p;
};
if (lightness < 0.5) {
q = lightness * (1 + saturation);
} else {
q = lightness + saturation - lightness * saturation;
}
p = 2 * lightness - q;
red = hueToRgb(p, q, hue + 1 / 3);
green = hueToRgb(p, q, hue);
blue = hueToRgb(p, q, hue - 1 / 3);
}
result = {
red : Math.round(red * 255).toString(16),
green : Math.round(green * 255).toString(16),
blue : Math.round(blue * 255).toString(16)
};
}
return result;
};
使い方
引数名 | 型 | 説明 | |
---|---|---|---|
第一引数 必須 |
hue | number | 色合い(hue) |
第二引数 必須 |
saturation | number | 彩度(saturation) |
第三引数 必須 |
lightness | number | 明度(lightness) |
戻り値
16進数のRGBに変換された文字列がハッシュとして返ります。
サンプルコード
JavaScript
var result = hslToRgb16(205, 100, 74);
alert(result.red);