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

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