こんにちは!デザイナーのヒロです。
色の三属性って知ってますか?プロのデザイナーは、この三属性に注目して色選びをしています!ぜひ、知っておいてください!
Webデザインをこれからはじめようと思っているアナタ!
RGBとCMYKの違い、わかりますか?
もしわからなければ、こちらの記事をご覧ください。
さて今回は、色の三属性をご紹介します!
赤色でも、いろんな赤があるんだな、と理解できますよ。
色相・彩度・明度
色相(しきそう)、彩度(さいど)、明度(明度)。
この3つの言葉を聞いたことがありますか?
これらは、色の三属性と呼ばれており、
色を表現する上で、すごく大切になってくるので、ぜひ覚えましょう!
色相
色相(しきそう)は、色味の違いのことです。
実は色は、赤→黄色→緑→青→紫と徐々に変わっていき、
また赤に戻るように循環しているんです。
これを「色相環(しきそうかん)」と呼びます。
彩度
彩度(さいど)は、色の鮮やかさを表します。
彩度が高いと、色味の強い、鮮やかな色になります。
彩度が低いと、色味の弱い、くすんだ色になっていき、最終的に白・グレー・黒になります。
明度
明度(めいど)は、色の明るさのことです。
明度が高いと、明るく白っぽい色になっていき、最終的に白になります。
明度が低いと、暗く黒っぽい色になっていき、最終的に黒になります。
この3つを英語で言うと、
色相は、Hue。
彩度は、Saturation。
明度は、Value。(もしくは、Brightness)
この3つの頭文字を取り、「HSV(HSB)」と呼ばれます。
HSV(HSB)は、Webサイトの配色を考えるときにすごく便利です!
色相、彩度、明度。
それぞれの数値を変えていくだけで、赤色でも、いろんな赤色を見つけることができます。
輝度は、光の明るさ
その他にも「HSL」と呼ばれる色の考え方もあります。
これは、
色相は、Hue。
彩度は、Saturation。
そして、明度の代わりに、輝度(きど)が使われます。英語でLuminanceです。
輝度は、光源の明るさの度合いです。
輝度が高いと、明るくなり、どんどん白っぽくなり、最終的に白に。
輝度が低いと、暗くなり、どんどん黒っぽくなり、最終的に黒になります。
ここまでは、明度と一緒ですよね。
赤・黄色・緑・青・紫。
これらの色が並んだとき、あなたはどの色を明るく感じますか?
おそらく、黄色が明るく感じ、青や紫が暗く感じていると思います。
輝度はこれらの色の明るさも考慮して数値化します。
少し難しいですね。
Photoshopなどの制作ツールで、
同じ色を、HSVで明度を変えた場合、
HSLで輝度を変えた場合を比較すると、わかりやすいと思います。
ぜひ試してみてください!
また、HSLは、このあと別の記事で説明しますが、
Webサイトの色を指定するときに使うことができます!
なので、ぜひHSLも覚えておいてください!
いかがだったでしょうか?
赤色にもいろんな種類があって、それらの色をHSVやHSLと言った指標で表せる。
このことを理解できると、なんだかプロのデザイナーになった気分になりませんか?
次回は、実際にPhotoshopなどの制作ツールや、
Webサイトへの色の指定の仕方をレクチャーします!
ぜひこちらもチェックしてみてくださいね!
コメント