はじめに
みなさんはCSSでの色指定、どのようにされてるでしょうか？
- rgba
- rgb
- キーワード(black, whiteなど)
- 16進数
などでしょうか。
デザイナーから細かい指定がある場合などはrgb値が明記されていてその通りに書けば済むことも多いですが、デザインに疎い人間がざっくり色指定しなければいけない場合には色味の調整が難しいですよね。
hslとは
そこで今回紹介するのは（筆者の観測範囲では）あまりみないhslという指定方法についてです。
rgbaは「red」「green」「blue」「alpha」の頭文字ですが、hslは
- h : Hue(色相)
- s : Saturation(彩度)
- l : Lightness(輝度)
となります。
指定方法の具体例をみてみましょう。
See the Pen hsl-sample by ririli (@ririli) on CodePen.
ここですね。
hsl( 207, 100%, 50%);
左から色相、彩度、輝度となってます。
それぞれどんな値を入れれば良いのかみていきます。
色相
色相には色相環と呼ばれるものの角度を指定します。色相環について
そのため取りうる値は0~360です。
0が赤、180で青、360で赤というようになってます。
また、角度になっているので360を超えるような値、例えば420などを入れた場合は420-360で60を指定したことと等しくなります。
SCSSなどで繰り返す場合はこれを覚えておくと便利かも。
彩度
彩度には100分率の値を指定します。
取りうる値は0%~100%です。
彩度が低いほど暗く重く、高いほど明るく軽い色になります。
彩度100%がその色相における純色扱いです。
彩度0%はもう元の色はわかりません。
輝度
輝度も100分率の値を指定します。
こちらも取りうる値は0%~100%です。
彩度とは異なり、50%がその色相における純色の扱いになっています。
これが100%に近づくと人の目にとって輝いて見えように白くなっていきます。
逆に0%に近づくと全く輝いて見えないように黒くなっていきます。
hslのなにがいいわけ？
ここまでhslの指定方法についてみてきましたが、hslにすると何が嬉しいんでしょう？
個人的な観点ですが、似た色を簡単に作れることだと思ってます。
二つ目のサンプルをみてみましょう。
See the Pen RwWgpOY by ririli (@ririli) on CodePen.
hoverとactiveに輝度だけを変えた色を指定しました。
CSS上での一覧性も高いし、rgbで若干薄い同系色を作るのも若干手間なので輝度のパーセントだけを変えれば良いhslはパッと同系色を作るのにとても便利。