CSS3 の hsl() で色を指定してみる
CSS3 から、カラーコードや rgb() による色指定の他に、hsl() という関数で色指定ができるようになった。コレは「HSL 円柱座標方式」というモノで、Hue (色相)、彩度 (Saturation)、輝度 (Lightness) の3要素から色を指定する方法らしい。色相だけ変えれば、同じ明るさや鮮やかさのカラーバリエーションが得られるし、色相はそのままに明るさや鮮やかさを変えれば、そのテーマ内の明暗カラーを簡単に得られる。
使ってみたサンプルは以下のとおり。
コレは SCSS と JavaScript を使って、特定の色相における彩度と輝度を1つの表にまとめたモノ。色相を 60% ずつ動かし、6色を試してみた。
普通に CSS 中で指定するなら、background-color: hsl(0%, 100%, 50%); というように、パーセンテージで指定すれば良い。
さらに、アルファチャンネル (透明度) を指定できる rgba() 的な、hsla() という関数もある。background-color: hsla(0%, 100%, 50%, .5); のように指定する。