HSV→RGB


動作ブラウザ 【 IE:3.0  NN:2.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows - - -
Macintosh - - -
UNIX - - - - - - - -
Dreamcast - - - - - - - - - - -

ポイント r = g = b = 0; if (s < 0) s = 0; if (s > 1) s = 1; if (v < 0) v = 0; if (v > 1) v = 1; h = h % 360; if (h < 0) h = h + 360; h = h / 60; i = Math.floor(h); f = h - i; p1 = v * (1 - s); p2 = v * (1 - s*f); p3 = v * (1 - s*(1 - f)); if (i == 0) { r = v; g = p3; b = p1; } if (i == 1) { r = p2;g = v; b = p1; } if (i == 2) { r = p1;g = v; b = p3; } if (i == 3) { r = p1;g = p2; b = v; } if (i == 4) { r = p3;g = p1; b = v; } if (i == 5) { r = v; g = p1; b = p2; }
説  明 このプログラムは技術評論社「C言語による最新プログラム辞典」第二巻を参考にJavaScript風にアレンジしましたものです。
カラーチャートサンプルを表示
サンプル <html> <head> <title>HSV→RGB</title> <script Language="JavaScript"><!-- function HSVtoRGB() { h = eval(document.myFORM.H.value); s = eval(document.myFORM.S.value); v = eval(document.myFORM.V.value); r = g = b = 0; if (s < 0) s = 0; if (s > 1) s = 1; if (v < 0) v = 0; if (v > 1) v = 1; h = h % 360; if (h < 0) h = h + 360; h = h / 60; i = Math.floor(h); f = h - i; p1 = v * (1 - s); p2 = v * (1 - s*f); p3 = v * (1 - s*(1 - f)); if (i == 0) { r = v; g = p3; b = p1; } if (i == 1) { r = p2;g = v; b = p1; } if (i == 2) { r = p1;g = v; b = p3; } if (i == 3) { r = p1;g = p2; b = v; } if (i == 4) { r = p3;g = p1; b = v; } if (i == 5) { r = v; g = p1; b = p2; } document.myFORM.red.value = r; document.myFORM.green.value = g; document.myFORM.blue.value = b; } // --></script> </head> <body> HSV (Hue, Saturation, Value) → RGB <form name="myFORM"> H:<input type="text" name="H"><br> S:<input type="text" name="S"><br> V:<input type="text" name="V"><br> <input type="button" onClick="HSVtoRGB()" 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!

写真素材 PIXTA