こんにちは。綺麗なグラデーションが作りたいと思いました。CSS で。
今まではなんとなく感覚でグラデーションの色を決めていたんですが、綺麗なグラデーションには法則があるはずと思い、調べてみる事にしました。
tl;dr
ツール作りました。
隣同士の色を使う
調べてみると、どうやら「隣同士」の色を使うのが王道なようです。ここで疑問に思う方もいると思います。色の「隣」ってなんだよと。それを説明するには HSL 空間への理解が必要になります。
WEB 上での「色」とは
HSL 空間を説明する前に、WEB 上での「色」について説明をしようと思います。例えば黄色は #FFFF00 と表現できます。これが、WEB 上での「色」です。じゃあこの #FFFF00 ってなんだよというと RGB という表現法で黄色を表現した時の値になります。
RGB で表した黄色
RGB というのは、赤(Red)、緑(Green)、青(Blue)の三つの原色を混ぜて、色んな色を表現する方法です。それぞれ、赤、緑、青が 0 から 255 の値を取る事で、様々な色を表現できます。ちなみに、赤緑青、全部の色の絵の具を混ぜれば黒になりますし、赤緑青、全部の色の光を混ぜれば白になりますね。
さて、先程の黄色ですが RGB では 赤: 255, 緑: 255, 青: 0 の値で表現できます。赤と緑の絵の具を混ぜれば黄色ですもんね。ここで「おいおい、さっきの #FFFF00 はどこいったんだよ」となるかもしれませんが #FFFF00 と 赤: 255, 緑: 255, 青: 0 は同じ意味になります。
10 進数と 16 進数
#FFFF00 は最初の # を除いて FF と FF と 00 に分解できます。これは左から順に赤、緑、青となります。そしてこれらは 16 進数であり、10 進数に変換すると FF=255, FF=255, 00=0 となり、#FFFF00 と 赤: 255, 緑: 255, 青: 0 は同じであると言えるのです。
HSL で表した黄色
では RGB ではなく 先程の HSL で黄色を表現すると、どうなるのか。 H:60, S:100, L:50 となります。意味分かんないですよね。大丈夫です。今から説明します。HSL とは、色相（Hue）、彩度（Saturation）、輝度（Lightness/Luminance または Intensity）の3つの成分からなる色空間 (by Wikipedia) です。彩度と輝度はなんとなくわかりますよね。彩度が高いと色が鮮やかに、低いと灰色になります。輝度は高いと白色に、低いと黒色になります。じゃあ色相ってなんだっていうとですね。
色相
色相とはよく見るこれです。色味を 0 ～ 360 度の範囲の角度で表しています。0 度は赤で、その反対側に位置する 180 度は赤の反対色にあたる青緑です。
先程の黄色 H:60, S:100, L:50 はつまり、色相が 60 度で、鮮やかさが 100 % で、明るさが 50% と言う事になります。
ようやく「隣」の話
ここまで理解すれば色の「隣」も理解できますね。色相で言う前後の角度が「隣」の色となってきます。ただ、ここで問題になるのが、どれぐらい「隣」なら良いのかという問題です。
12 色相環
そこで出てくるのが 12 色相環 というものです。先程の円だと色が多すぎるので、12個の色 で円を作りましょうというものになります。これならば「隣」の色がわかりやすいですね。
「隣」を計算するのがめんどくさい
さて、綺麗なグラデーションの原理はわかりましたので、いざ実践！と思いましたが、ぴったり「隣」の色を出すのが、べらぼうにめんどくさいという事がわかりました。これを毎回手作業でやるのは御免こうむります。
めんどくさいならプログラムを作る
というわけでツールを作りました。
です。
「隣」の色とのグラデーションや、ひとつ飛ばしの「隣」の色とのグラデーションが簡単につくれます。これでもうグラデーションを作る時に悩まなくて済みそうです。
おわりに
今年の UI トレンドでもグラデーションはありますので、この機会に皆さんぜひ先程のツールで遊んでみてください。