translate

綺麗なグラデーションが作りたい
2021年 7月 29日

こんにちは。綺麗なグラデーションが作りたいと思いました。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) です。彩度と輝度はなんとなくわかりますよね。彩度が高いと色が鮮やかに、低いと灰色になります。輝度は高いと白色に、低いと黒色になります。じゃあ色相ってなんだっていうとですね。

色相

HLS-Model.png

色相とはよく見るこれです。色味を 0 ~ 360 度の範囲の角度で表しています。0 度は赤で、その反対側に位置する 180 度は赤の反対色にあたる青緑です。

先程の黄色 H:60, S:100, L:50 はつまり、色相が 60 度で、鮮やかさが 100 % で、明るさが 50% と言う事になります。

ようやく「隣」の話

ここまで理解すれば色の「隣」も理解できますね。色相で言う前後の角度が「隣」の色となってきます。ただ、ここで問題になるのが、どれぐらい「隣」なら良いのかという問題です。

12 色相環

スクリーンショット 2021-07-29 17.09.28

そこで出てくるのが 12 色相環 というものです。先程の円だと色が多すぎるので、12個の色 で円を作りましょうというものになります。これならば「隣」の色がわかりやすいですね。

「隣」を計算するのがめんどくさい

さて、綺麗なグラデーションの原理はわかりましたので、いざ実践!と思いましたが、ぴったり「隣」の色を出すのが、べらぼうにめんどくさいという事がわかりました。これを毎回手作業でやるのは御免こうむります。

めんどくさいならプログラムを作る

というわけでツールを作りました。

いい感じのグラデーションジェネレーター

です。

「隣」の色とのグラデーションや、ひとつ飛ばしの「隣」の色とのグラデーションが簡単につくれます。これでもうグラデーションを作る時に悩まなくて済みそうです。

おわりに

今年の UI トレンドでもグラデーションはありますので、この機会に皆さんぜひ先程のツールで遊んでみてください。