これは何
- UIを作るにあたって最初期にカラーパレットを整えておくと便利
- そしてカラーパレットを展開する際は、明度だけではなく色相も少しだけ変えてあげる方が自然に見えやすい
- その理由をまとめた記事
色温度という概念
色温度（いろおんど、しきおんど、英語：color temperature）とは、ある光源が発している光の色を定量的な数値で表現する尺度（単位）である。単位には熱力学的温度の K（ケルビン） を用いる。 色温度 - Wikipedia
小難しい書き方ですが「光源によって光の色が変わるんだな」とだけ理解してもらえれば大丈夫です。
太陽の色温度
だいたい5~6000K。つまり、黄色。
理屈はともかく「太陽の光は黄色いんですよ」と言われたら「あーなんとなく分かる」と感じるのではないでしょうか？
ナチュラルハーモニー
色彩学には「自然の中で、明るい場所の色は黄色く、暗い場所の色は青っぽい」という理屈があり、ナチュラルハーモニーと呼ばれます。
ナチュラルというだけあって、この理屈に沿えばだいたい自然に見えます。
なぜ黄色→青色？
以下に示したような内容が絡み合っています。
- ものが固有色を持っていて、太陽の光（＝黄色い光）が当たるので、当たった箇所が黄色く見える
- 人間の目の錯覚として、光の色の逆側の色相を陰側に感じる
- 黄色い光の陰に補色として青や紫を錯視する
説明はしましたが私自身詳細まで理解しているわけではありません。
もし間違いや補足などありましたら、コメントで指摘 or 編集リクエストをいただけると嬉しいです。
全部あわせて、明度+色相変化
テキストだけ読むより、ものを見た方が早いでしょう。
QiitaのVIカラーである#55c500を中心にして、明るい暗いを展開してみました。
7つのカラーチップがあるうち、真ん中が#55c500で、左にいくにつれて明るく、右にいくにつれて暗くしています。
また上段は明度の変化だけ、下段は明るい方を黄色く暗い方を青くしています。
上段もそこまで違和感があるわけではありませんが、若干くすんで見えるのではないでしょうか？
特に1番左にあるカラーチップ同士を見比べると分かりやすい気がします。
まとめ
- 色の明度展開をするとき、色相も一緒に変わっている方が自然に見えやすい
- 明るい方が黄色、暗い方が青色
- 色相を変化させず明度だけ変化させても悪くはないけど少し表情が乏しく見えるかもしれない