HSLカラーバーを描く


動作ブラウザ 【 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 - - - - - - - - - - -

ポイント for (H=0; H<360 ; H+=10) { document.write("<tr>"); for (L = 0; L<1; L+= 0.05) { HSLtoRGB(H,1,L); r = Math.floor(r * 255).toString(16); g = Math.floor(g * 255).toString(16); b = Math.floor(b * 255).toString(16); if (r.length < 2) r = "0" + r; if (g.length < 2) g = "0" + g; if (b.length < 2) b = "0" + b; c = "#"+r+g+b; document.write("<td bgcolor='"+c+"'><img src='chip.gif' width='8' height='8'></td>"); } document.write("</tr>"); }
説  明 HSLカラーバーを描くには■変換のHSLからRGBに変換する式を使いS(彩度)とL(明度)を変化させdocument.write()を使ってタグごと書き出します。書き出す際にtdタグのbgcolorで色を指定、セル内には透過gif画像を表示することでカラーバーを描くことができます。
サンプル <html> <head> <title>HSLカラーバーを描く</title> </head> <body> <table border="0" cellspacing="0" cellpadding="0"> <script language="JavaScript"><!-- r = g = b = 0; function HSLtoRGB(h,s,l) { 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; } for (H=0; H<360 ; H+=10) { document.write("<tr>"); for (L = 0; L<1; L+= 0.05) { HSLtoRGB(H,1,L); r = Math.floor(r * 255).toString(16); g = Math.floor(g * 255).toString(16); b = Math.floor(b * 255).toString(16); if (r.length < 2) r = "0" + r; if (g.length < 2) g = "0" + g; if (b.length < 2) b = "0" + b; c = "#"+r+g+b; document.write("<td bgcolor='"+c+"'><img src='chip.gif' width='4' height='4'></td>"); } document.write("</tr>"); } // --></script> </table> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA