16進数RGBからHSVへ変換

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

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

functionの定義

JavaScript

var rgb16ToHsv = 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,
		    value      = 0,
		    red2       = 0,
		    green2     = 0,
		    blue2      = 0,
		    diff       = 0;

		red   = parseInt(red,   16) / 255;
		green = parseInt(green, 16) / 255;
		blue  = parseInt(blue,  16) / 255;
		value = Math.max(red, green, blue);
		diff  = value - Math.min(red, green, blue);

		var diffColor = function(color) {
			return (value - color) / 6 / diff + 1 / 2;
		};

		if (diff !== 0) {
			saturation = diff / value;
			red2       = diffColor(red);
			green2     = diffColor(green);
			blue2      = diffColor(blue);

			if (red === value) {
				hue = blue2 - green2;
			} else if (green === value) {
				hue = (1 / 3) + red2 - blue2;
			} else if (blue === value) {
				hue = (2 / 3) + green2 - red2;
			}

			if (hue < 0) {
				hue += 1;
			} else if (hue > 1) {
				hue -= 1;
			}
		}

		result = {
			hue        : Math.round(hue        * 360),
			saturation : Math.round(saturation * 100),
			value      : Math.round(value      * 100)
		};
	}

	return result;
};

使い方

引数名 説明
第一引数
必須
red number 16進数の赤
第一引数
必須
green number 16進数の緑
第一引数
必須
blue number 16進数の青

戻り値

HSVに変換された文字列がハッシュとして返ります。

JavaScript

var result = rgb16ToHsv('7b', 'c8', 'ff');

alert(result.hue);

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