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);

JavaScript逆引きリファレンス一覧へ戻る