【速報】手抜きコーダーぼく、色指定にhsla()を使うとめちゃくちゃ楽なことに気付いてしまう
16進表記もRGBA()もいらなかったんや…っていうのは嘘なんですけど、HSLA()での色指定がすげえ便利っていうのはガチです。
目次
まずは色指定に使える値のおさらい
こんな記事を見てる人ならWeb上での色指定に使える値なんて全部知ってると思うんですが、一応復習しておきます。
色の名前で指定
- black
- white
- red
- green
- blue
まぁほぼ使うことはない。記述が短いのだけが取り柄？
16進数表記
- #000000（黒）
- #ffffff（白）
- #ff0000（赤）
- #00ff00（緑）
- #0000ff（青）
赤、緑、青の値を00～ffの256段階で表してるやつ。多分Webサイトで使われている色指定の82%くらいはこれ。
RGB（RGBA）表記
- rgb(0,0,0)（黒）
- rgb(255,255,255)（白）
- rgb(255,0,0)（赤）
- rgb(0,255,0)（緑）
- rgb(0,0,255)（青）
例ではRGBしか載せてないけど、rgba(0,0,0,0.5)とかにすれば半透明に出来たりする。これもよく使うし、16進数表記だと出来なかった透過の指定が出来るのはめちゃくちゃ便利。
HSL（HSLA）表記
- hsl(0,0%,0%)（黒）
- hsl(0,0%,100%)（白）
- hsl(0,100%,50%)（赤）
- hsl(120,100%,50%)（緑）
- hsl(240,100%,50%)（青）
今回オススメしたいのはこれ。H（色相）S（彩度）L（輝度）から構成されていて、RGBAのように不透明度のAを追加することも出来ます。
例えばhsla(0,0,0,0.5)なら半透明の黒です。
なんでHSLA表記が便利なのか
最初に言っておくと、仕事としてWebサイトを作るときはだいたいデザイナーさんからしっかりと各パーツのカラーコードが指定されるので、それに従って書いておきましょう。ほぼ確実に16進数表記かRGB値が渡されますが、わざわざカラーコードを変換してまでHSLを使う理由はないかな…HSLでの色指定が真価を発揮するのは、このブログみたいに自分で好き勝手にデザインを決めているときです。
まず、サイトのメインカラーを決めましょう。
See the Pen Untitled by Leo_8192 (@Leo_8192) on CodePen.
はい、メインカラーはこれにしました。
そしてよくあるのが「この色をベースにして、もうちょっと明るい（暗い）色を使いたいな…」って状況。そんなときは、L（輝度）だけ変えればOKです。
See the Pen Untitled by Leo_8192 (@Leo_8192) on CodePen.
こんな感じで、L（輝度）をいじるだけでちょうどいい感じの色が簡単に作れます。最高かな？
もちろん、色をしっかりと管理している人ならこんな事をしなくてもいいのかもしれませんが、管理人@Leo_8192はその場のノリで色を決めているので、この記述方法がめちゃくちゃ楽でした。まだブログのCSSにはあまり反映させていないんですが、少しづつ置き換えていこうかな～と思ってます。
ちなみにSassを使っている人ならlighten($color, $amount)とdarken($color, $amount)を覚えておけばもっと幸せになれます。おわり。
