【Design】「無彩色」と「有彩色」/色の三属性「色相」「明度」「彩度」と対比による効果

✓「無彩色」「有彩色」って?
✓色の三属性とは?
✓色の対比によって起こる効果

色味のない黒、白、グレーやRGBカラーですべて同じ値の色、彩度を0%の色を「無彩色」といいます。

それ以外の色みのあるものは「有彩色」と呼ばれます。

色には、色みを表す「色相」、明暗を表す「明度」、鮮やかさを表す「彩度」のバランスで成り立ち、この3つが「色の三属性」です。

色の「色相」「彩度」「明度」の対比によって起こる現象があります。

〈色相:Hue〉(色み/色の種類)

赤、緑、黄、青といった「色相環」で表される色み(色の種類)で、白っぽさや黒っぽさ、くすみなどのもっとも混じりけのない色みを「色相:Hue」いいます。

色相環はサークル上に並んだ色の表で、サークルの中で向かい合った色を「補色」といい、いわゆる反対色にあたります。理論上では補色どうしを混ぜると黒になる。

虹色の7色はで色相環では以下の配置になっています。

色相環のおぼえかたはせき・とう・おう・りょく・せい・らん・し」がよく用いられ、それぞれの間に「赤みの橙」「黄緑」「青緑」「緑みの青」「赤紫」があるよ。
リュウジ
リュウジ
マンセル表色系の12色相環ではなく24色相環もあるが、
基本的にはそれぞれの間の色相になるのでまずは12色相環を覚える。

RGBカラーでの見え方。

CMYKに変換したときの見え方。

 

色を表す表示体系を表色系(カラーオーダーシステム)と呼ばれ色相環や色立体によって表されます。

一般的にはマンセル表色系が使われていますが、オストワルト表色系、CIE(YXZ)表色系、PCCS(日本色研体形)などの種類もあります。

イッテンの12色環は、三角が第一次色でこの色環においての3原色になる。
3原色を2色混ぜてできた中間色が第二次色になる。それぞれの三角形の頂点を色相環に配置し、さらにその中間色を色相環に配置して出来る。

〈明度:Value〉(色の明るさ)

「明度:Value」は色の明るさの度合いになり、もっとも明るくすると白、最も暗くすると黒になります。

明度を上げる場合、白を足していき、明度を下げたい場合は黒を足していく。

〈彩度:Saturation〉(色の鮮やかさ)

「彩度:Saturation」は色の鮮やかさのことで、他の色が混ざっていないときがもっとも鮮やかに見え混色すると彩度は落ちていきます。

また、彩度がない状態を「無彩色」といい白から黒のグラデーションの中の白黒グレーで表され、彩度は無彩色を混ぜるか補色どうしを混ぜることで落としていくことができます。

色の対比による効果

人間の眼は一般的に強い色(光)を見たときに残像を残し、その残像の色は補色になっている「補色残像現象」がおこってしまいます。

下の図で、赤い丸を30秒ほど見つめたあと何もない白い空間を見ると補色にあたる青緑色の影がみえる

 

次の例では、赤い四角を30秒ほど見たあと薄い黄色を見る。そのとき本来の薄い黄色ではなく赤の補色にあたる青緑(下の長方形の青緑のよう
な色)の影が重なってみえる。

 

これらのように一つの強い色(光)を見続けたのちに他の色を見ても補色残像が残り本来の色とは違って見えことを「継時対比」と呼ばれます。

また2色以上を同時に並べてみたとき、その残像が互いに影響しあって1色で見るときとは違う色に見える。

このことを「同時対比」と呼び「色相」「明度」「彩度」「補色」「縁辺(えんぺん)」のそれぞれに対比現象がおこります。

【色相対比】

色相対比は中央が同じ色であっても周囲にある色の影響を受け色が少し変わって見える現象で、中心の色に周りの補色残像が見えてきます。

両方の黄色を同時に眺める、同じ黄色であっても左は緑の補色の橙(赤みがかった黄色)、右は赤の補色の緑がかった黄色に見える。

【明度対比】

明度対比は色の明度による対比で、中央が同じ色でも周囲の明度が高いと中央は暗く見え、その逆で周囲の明度が低いと中央は明るく見える現象です。

中央は同じ色です。周囲の明度が高いと中央は暗く見え、周囲の明度が低いと中央は明るく見える。この現象は有機色でも無彩色でも起こります。

【彩度対比】

彩度対比は色の彩度の高低による対比で、中央が同じ色であっても周囲の彩度が高いと中央の彩度は低く感じ、その逆で周囲の彩度が低いと中央の彩度が高く感じます。

中央は同じ色です。

【補色対比】

補色対比は色相環において補色関係にある色の組み合わせで、互いに色の残像が影響しより色が強調されることからもっとも強い対比となります。

明度差があまりなく彩度が高いと境界の対比が強くなり、目がチカチカするといったことが起こります。

レオ♀
レオ♀
文字に使用した場合読みにくさが出てしまうニャー。

 

左の補色対比の方が冴えて見える。

 

料理などにおいては、鮮度がよく(鮮やか)見えるように緑の葉などが添えられています。

【縁辺対比】

縁辺対比は、明るい色と暗い色が接して配置されたとき接地面の境界線付近の明るさが違って見えます。

明るい色と暗い色の接した境界線で明るさの印象が変化して見える。

 

まとめ

色には「無彩色」と「有彩色」に分けられ、色みを表す「色相」、明暗を表す「明度」、鮮やかさを表す「彩度」のバランスで成り立ち、この3つが「色の三属性」になります。

「色相」「彩度」「明度」によって起こる対比効果があるので、場合によっては見にくさを強めてしまうので注意が必要です。

【AdobeCC基礎マスター講座】

Adobe Creative Cloud(学生・教職員個人向けライセンスプログラム)を間36,346円(税込39,980円)で同時に全3ヶ月(動画閲覧 1ヶ月+課題作成 2ヶ月)基礎がしっかり学べるお得なパッケージプランです。

最新情報をチェックしよう!
>           チャンネル登録して応援お願いします。

           チャンネル登録して応援お願いします。

                  ご視聴と感想をお待ちしております。チャンネル登録・高評価もお願いします。