CSS3Tweetこんにちは、橋本です。今日は、知らない人も多いCSS3の隠れた(?)新機能、HSL色空間による色指定について書いてみたいと思います。Webにおける色指定の方法として一番メジャーなのは、16進数を用いたRGB値による色指定の方法かと思います。説明不要かもしればせんが、#に続けて、赤、緑、青の順に、0から255の数値を16進数を用いて色を指定する方法です。}その他に色キーワードを用いた色指定の方法や、rgb(rgba)関数を用いた色指定の方法があります。}CSS3では、上記の色指定の方法に加えて、HSL色空間による色指定を行うことが可能になりました。順に変化)で、彩度を純色から灰色の範囲で、明度を白から黒の範囲で(中間が純色)表すものです。色相の角度による色の把握がわかりやすく、また、色の鮮やかさや明るさを数値で指定することで増減することができるため、rgbを用いた色指定の方法よりも、直感的に色の指定が行える方法になっています。CSS3でHSLによる色指定を行うには、hsl関数(透明度を指定する際には、hsla)を用いて指定します。引数は、色相(0〜360までの数値)、彩度(0%〜100%)、明度(0%〜100%)の順に指定します。(hsla関数の場合は、上記に加え、透明度を0.0〜1.0の値で指定します。調節することで簡単に色を調節することができます。CSS3による新機能のため、使える場面が限られるのですが、使える場合には是非使ってみていただければと思います。ちなみに、HSLについて調べている中で、RGBからHSLに変換する変換式とHSLからRGBに変換する変換式を見つけたので、javascriptで実装してみました。以下のサンプルページで変換を試すことができるので、ぜひ触ってみてください。