10進数RGBからHSVへ変換

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

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

functionの定義

JavaScript

var rgb10ToHsv = function(red, green, blue) {
	var result = false;

	if (((red || red === 0) && red <= 255) && ((green || green === 0) && green <= 255) && ((blue || blue === 0) && blue <= 255)) {
		var hue        = 0,
		    saturation = 0,
		    value      = 0,
		    red2       = 0,
		    green2     = 0,
		    blue2      = 0,
		    diff       = 0;

		red   = Number(red)   / 255;
		green = Number(green) / 255;
		blue  = Number(blue)  / 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 10進数の赤
第二引数
必須
green number 10進数の緑
第三引数
必須
blue number 10進数の青

戻り値

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

サンプルコード

JavaScript

var result = rgb10ToHsv(123, 200, 255);

alert(result.hue);

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