きまぐれ引きこもりんご80%

hslaで色指定をしてみよう!

web制作

hslaで色指定

前回、色名を覚えれば感覚的に指定できて便利という記事を書きましたが、色の知識がある方や、DTPの現場におられた方、グラフィックソフトを使われている方には、16進数やrgbよりもhslの方が感覚的に指定できて便利かもしれません。しかもhslaだと透明度まで指定できて更に便利です。

hslaは、hue(色相)、saturation(彩度)、lightness(明度)、alpha(透明度)の略です。

彩度は、0%が無彩色、100%が純色となります。
明度は、一番暗い0%から100%に向かって明るくなります。
透明度は、0〜1の間で指定します。70%の場合は0.7という具合です。
このように、色の明るさや鮮やかさ、透明度をとても感覚的に指定できます。

そして、色相0~360の値で指定します。
360の中で色を覚えるのは大変そうに思えますが、実は意外と簡単です。
まず360°の色相環を頭に思い描き、RGBとCMYの各色相は360°÷3で120°づつ離れている事を念頭にRGBとCMYの位置を数値で覚えます。
Rが0°から始まりGが120°、Bが240°、Cが反対側の180°から始まりMが300°、Yが60°となります。

色相環

上図を踏まえて、例えばオレンジの場合、R(0)とY(60)の間なので30だなと言う感じで色相を決定し、
後は明度と彩度が何%で透明度が何という風に指定すればいいのです。

これで色の図表などを見ずとも色の指定が感覚的に出来るようになりますね。

div {
  background: hsla(色相, 彩度%, 明度%, 透明度);
}

シアンの場合

div {
  background: hsl(180, 100%, 50%);
}

白の場合

div {
  background: hsl(0, 0%, 100%);
}

黒の場合

div {
  background: hsl(0, 0%, 0%);
}

白の50%半透明の場合

div {
  background: hsla(0, 0%, 100%, 0.5);
}