10進数RGBからHSLへ変換

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

  • ※ HSLはHue(色相)、Saturation(彩度)、Lightness(輝度)のそれぞれの頭文字を取った名称です。
    色相 = 0~360°
    彩度 = 0~100%
    輝度 = 0~100%

functionの定義

JavaScript

/**
 * 10進数RGBからHSLへ変換
 * @param {number} red 10進数の赤
 * @param {number} green 10進数の緑
 * @param {number} blue 10進数の青
 * @return {boolean|{hue:number,saturation:number,lightness:number}} HSLへ変換された値を返す(失敗した場合はfalseを返す)
 */
var rgb10ToHsl = function(red, green, blue) {
	if (!String(red).match(/^[0-9]{1,3}$/))   return false;
	if (!String(green).match(/^[0-9]{1,3}$/)) return false;
	if (!String(blue).match(/^[0-9]{1,3}$/))  return false;

	if (red < 0   || red > 255)   return false;
	if (green < 0 || green > 255) return false;
	if (blue < 0  || blue > 255)  return false;

	var hue = 0, saturation = 0, lightness = 0,
	    max = 0, min = 0, diff = 0;

	red       = Number(red)   / 255;
	green     = Number(green) / 255;
	blue      = Number(blue)  / 255;
	max       = Math.max(red, green, blue);
	min       = Math.min(red, green, blue);
	lightness = (max + min) / 2;

	if (max !== min) {
		diff = max - min;

		saturation = diff / (lightness > 0.5 ? 2 - max - min : 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;
	}

	return {
		hue        : Math.round(hue        * 360),
		saturation : Math.round(saturation * 100),
		lightness  : Math.round(lightness  * 100)
	};
};

使い方

JavaScript

var result = rgb10ToHsl( red , green , blue );

引数

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

戻り値

HSLに変換された文字列がハッシュとして返します。
失敗した場合はfalseを返します。

サンプルコード

JavaScript

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

alert(result.hue);

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