| ポイント |
<![CDATA[
r = g = b = 0;
if (s < 0) s = 0;
if (s > 1) s = 1;
if (l < 0) l = 0;
if (l > 1) l = 1;
h = h % 360;
if (h < 0) h = h + 360;
if (l <= 0.5)
{
cmin = l * ( 1 - s );
cmax = 2 * l - cmin;
}else{
cmax = l * ( 1 - s ) + s;
cmin = 2 * l - cmax;
}
r = h2v(h+120,cmin,cmax);
g = h2v(h,cmin,cmax);
b = h2v(h-120,cmin,cmax);
function h2v(hh,min,max)
{
hh = hh % 360;
if (hh < 0) hh = hh + 360;
if (hh < 60) return min + (max - min) * hh / 60;
if (hh >= 60 && hh < 180) return max;
if (hh >=180 && hh < 240) return min+(max-min)*(240-hh)/60;
return min;
}
]]>
|
| 説 明 |
このプログラムは技術評論社「C言語による最新プログラム辞典」第二巻を参考にJavaScript風にアレンジしたものです。
カラーチャートサンプルを表示 |
| サンプル |
<![CDATA[
<html>
<head>
<title>HSL→RGB</title>
<script Language="JavaScript"><!--
function HSLtoRGB()
{
h = eval(document.myFORM.H.value);
l = eval(document.myFORM.L.value);
s = eval(document.myFORM.S.value);
r = g = b = 0;
if (s < 0) s = 0;
if (s > 1) s = 1;
if (l < 0) l = 0;
if (l > 1) l = 1;
h = h % 360;
if (h < 0) h = h + 360;
if (l <= 0.5)
{
cmin = l * ( 1 - s );
cmax = 2 * l - cmin;
}else{
cmax = l * ( 1 - s ) + s;
cmin = 2 * l - cmax;
}
r = h2v(h+120,cmin,cmax);
g = h2v(h,cmin,cmax);
b = h2v(h-120,cmin,cmax);
document.myFORM.red.value = r;
document.myFORM.green.value = g;
document.myFORM.blue.value = b;
}
function h2v(hh,min,max)
{
hh = hh % 360;
if (hh < 0) hh = hh + 360;
if (hh < 60) return min + (max - min) * hh / 60;
if (hh >= 60 && hh < 180) return max;
if (hh >=180 && hh < 240) return min+(max-min)*(240-hh)/60;
return min;
}
// --></script>
</head>
<body>
HSL (Hue, Saturation, Lightness) → RGB
<form name="myFORM">
H：<input type="text" name="H"><br>
S：<input type="text" name="S"><br>
L：<input type="text" name="L"><br>
<input type="button" onClick="HSLtoRGB()" VALUE="RGBに変換"><br>
赤(R)：<input type="text" name="red"><br>
緑(G)：<input type="text" name="green"><br>
青(B)：<input type="text" name="blue"><br>
</form>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
HSL→RGB