HSVから16進数RGBへ変換

HSVから16進数RGBへ変換するには次のような方法で可能です。

  • ※ HSLはHue(色相)、Saturation(彩度)、Value(明度)のそれぞれの頭文字を取った名称です。

functionの定義

JavaScript

var hsvToRgb16 = function(hue, saturation, value) {
	var result = false;

	if (((hue || hue === 0) && hue <= 360) && ((saturation || saturation === 0) && saturation <= 100) && ((value || value === 0) && value <= 100)) {
		var red   = 0,
		    green = 0,
		    blue  = 0,
		    i     = 0,
		    f     = 0,
		    q     = 0,
		    p     = 0,
		    t     = 0;

		hue        = Number(hue)        / 60;
		saturation = Number(saturation) / 100;
		value      = Number(value)      / 100;

		if (saturation === 0) {
			red   = value;
			green = value;
			blue  = value;
		} else {
			i = Math.floor(hue);
			f = hue - i;
			p = value * (1 - saturation);
			q = value * (1 - saturation * f);
			t = value * (1 - saturation * (1 - f));

			switch (i) {
				case 0 :
					red   = value;
					green = t;
					blue  = p;
					break;
				case 1 :
					red   = q;
					green = value;
					blue  = p;
					break;
				case 2 :
					red   = p;
					green = value;
					blue  = t;
					break;
				case 3 :
					red   = p;
					green = q;
					blue  = value;
					break;
				case 4 :
					red   = t;
					green = p;
					blue  = value;
					break;
				case 5 :
					red   = value;
					green = p;
					blue  = q;
					break;
			}
		}

		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)
第三引数
必須
value number 明度(value)

戻り値

16進数のRGBに変換された文字列がハッシュとして返ります。

サンプルコード

JavaScript

var result = hsvToRgb16(205, 52, 100);

alert(result.red);

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