16進数RGBからHSLへ変換
16進数RGBからHSLへ変換するには次のような方法で可能です。
- ※ HSLはHue(色相)、Saturation(彩度)、Lightness(輝度)のそれぞれの頭文字を取った名称です。
色相 = 0~360°
彩度 = 0~100%
輝度 = 0~100%
functionの定義
JavaScript
var rgb16ToHsl = function(red, green, blue) {
var result = false;
if (((red || red === 0) && String(red).match(/^[0-9a-f]{2}$/i)) && ((green || green === 0) && String(green).match(/^[0-9a-f]{2}$/i)) && ((blue || blue === 0) && String(blue).match(/^[0-9a-f]{2}$/i))) {
var hue = 0,
saturation = 0,
lightness = 0,
max = 0,
min = 0,
diff = 0;
red = parseInt(red, 16) / 255;
green = parseInt(green, 16) / 255;
blue = parseInt(blue, 16) / 255;
max = Math.max(red, green, blue);
min = Math.min(red, green, blue);
lightness = (max + min) / 2;
if (max !== min) {
diff = max - min;
if (lightness > 0.5) {
saturation = diff / (2 - max - min);
} else {
saturation = diff / (max + min);
}
if (max === red) {
hue = (green - blue) / diff;
} else if (max === green) {
hue = 2 + (blue - red) / diff;
} else {
hue = 4 + (red - green) / diff;
}
hue /= 6;
}
result = {
hue : Math.round(hue * 360),
saturation : Math.round(saturation * 100),
lightness : Math.round(lightness * 100)
};
}
return result;
};
使い方
引数名 | 型 | 説明 | |
---|---|---|---|
第一引数 必須 |
red | number | 16進数の赤 |
第二引数 必須 |
green | number | 16進数の緑 |
第三引数 必須 |
blue | number | 16進数の青 |
戻り値
HSLに変換された文字列がハッシュとして返ります。
サンプルコード
JavaScript
var result = rgb16ToHsl('7b', 'c8', 'ff');
alert(result.hue);