2020-12-16

CSS HSL で色指定してみる

CSS3 で、hsl() や hsla() といった色の指定方法が存在するのは知っていたのだが、カラーコードに慣れてしまった自分はなかなか手を出さずにいた。

今回、灰色のバリエーションを作る際に、HSL の方がやりやすいかなと思ったので、少し調べてみた。

HSL とは

まず、HSL とは次の3要素の略語。

H は 0〜360、S と L は 0〜100 の間で指定する。

次のサイトで HSL 値を動的に操作して確認できるので、コレを使いながら確かめてみると良い。

はじめに H・色相の値で、おおよそ何色を出すか指定する。S を 100、L を 50 とした時の色を見ると分かりやすいだろう。

…という感じで、#ff0000 から順に足される色が移動している感じだ。

S・彩度は、色味の強さ。100 で純色が出て、0 にすると灰色になる。どれくらいグレースケールに落とすか、という数値になる。

S を 0 にすると完全なグレーになり、H の値は何にしても変わらなくなる。

L・輝度は、0 が黒、50 が純色、100 が白、となる。色の明るさだ。

L が 0 や 100 だと、H・S の値は何にしても変わらなくなる。

それでは、グレーのバリエーションを作ってみよう。

最も手っ取り早く作るなら、H は適当・S は 0 にして、L の値だけ動かしてやれば良いが、完全なグレースケールなので面白みがない。ベースとなる色相は何らか決めてやって、ほんのりその色味のついたグレーにしてやる。

今回は試しに、#0088ff 相当の色をベースに残すことにした。CSS で HSL を表記すると、hsl(208, 100%, 50%) となる。

H はこの 208 で固定。次に S を限りなく 0 に近付ける。10 前後だとかなりその色相の色が残るので、この辺で設定してやると良いだろう。

あとは L を 10% ずつくらい動かしてやれば、良い感じのグレーのパレットが出来上がる。

以下にサンプルを作ってみた。青系のグレーだけだとパッと見が分かりにくいので、H・色相を動かした赤系と緑系のグレースケールも作ってみた。

L 90% 〜 20% くらいのところが使いやすいだろうか。かなり便利なことが体験できたので、これからは積極的に HSL を使っていこうと思う。

(オッサンなので、ついつい3の倍数で3桁表記できるカラーコードを使いがちだが、もうウェブセーフカラーとか考えなくていい時代よね…。#06f とか #f09 とかから卒業したい)