CSS3 の hsl() で色を指定してみる

CSS3 から、カラーコードや rgb() による色指定の他に、hsl() という関数で色指定ができるようになった。コレは「HSL 円柱座標方式」というモノで、Hue (色相)、彩度 (Saturation)、輝度 (Lightness) の3要素から色を指定する方法らしい。色相だけ変えれば、同じ明るさや鮮やかさのカラーバリエーションが得られるし、色相はそのままに明るさや鮮やかさを変えれば、そのテーマ内の明暗カラーを簡単に得られる。

使ってみたサンプルは以下のとおり。

• デモ : CSS HSL
• コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

コレは SCSS と JavaScript を使って、特定の色相における彩度と輝度を1つの表にまとめたモノ。色相を 60% ずつ動かし、6色を試してみた。

普通に CSS 中で指定するなら、background-color: hsl(0%, 100%, 50%); というように、パーセンテージで指定すれば良い。

さらに、アルファチャンネル (透明度) を指定できる rgba() 的な、hsla() という関数もある。background-color: hsla(0%, 100%, 50%, .5); のように指定する。

• 参考 : 配色を考えるのが面倒ならhsl()を使おう
• 参考 : JavaScriptでCSSのHSLカラーを使いこなそう