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