2011-12-01

色相環とHSLカラーピッカー

色を上手く選べるようになりたいと思っていたところHSB(HSV)だと色を選びやすいと聞いたので最近はHSBで色を選ぶようにしているんですが、色相(hue)の値が覚えられないので画像を作って覚えることにしました。

画像を作った後でプログラム作ったほうがわかりやすいんじゃないかと思ってTM LifeさんのCSS3 で追加された HSL の使い方にあるサンプルプログラムを参考にカラーピッカーを作りました。ただ<canvas>, <input type=range>などを使っていてChromeでしかしっかり動かないです…。

あと作ったプログラムの色空間はHSB(Hue, Sturation, Brightness)ではなく今のところHSL(Hue, Saturation, Lightness)です。HSBだとS=0%/B=100%が白、S=0%/B=50%が灰色、B=0%が黒ですがHSLだとL=100%が白、S=0%/L=50%が灰色、L=0%が黒です。