色の超基本知識を説明！【色相・彩度・明度？補色・類似色・対照色？】

このブログではイラストレーターやPhotoshopなどの画像系のアプリについて説明しています。

画像系のアプリを触る上で欠かせないのが…色です。

という人も多いのではないでしょうか？

この記事では、色についての基本知識と用語について説明していきます。

色の基本「色相・彩度・明度」

色相とは

色相は「色あい」のことです。「赤」「橙」「黄色」「緑」「青」「紫」などのいわゆる色の違いを色相といいます。

色相を円状にまとめた色相環というものがあります。色相環は配色の参考にするのにとても便利なツールです。

彩度とは

彩度は「鮮やかさ」です。彩度が高いほど色鮮やかになり、低いほど褪せた色（後述する明度が高ければ白っぽく、明度が低ければ灰色や黒っぽい色）になります。

ちなみに、全く彩度がない白〜灰色〜黒を無彩色といいます。この無彩色はデザインの超基本の色になります。

一方、無彩色でない色を有彩色といいます。白〜黒以外でちょっとでも色がついていれば有彩色です。

明度とは

明度は「明るさ」のことです。明度が高いほど明るく（彩度が高ければ鮮やかに、低ければ白っぽく）なり、低いほど暗くなります。

色の基本「トーン」

色相・彩度・明度は色を決める三属性（とか三要素）といわれるほど重要な考え方です。この彩度・明度ごとに色相環を分類した考え方がトーンです。

もう少し詳しく説明すると、「同じ彩度と明度の色相環」を一つの「トーン」といいます。それぞれのトーンは彩度・明度によって次のようにまとめられます。

もちろん、同一トーンでの配色は親和性が高いです。また、同じ色相（例えば「赤」など）でも、トーンが違えば印象が変わりますが、同じ色相なのでこちらも親和性が高いです。

色の基本「補色・類似色・対照色」

色の基本「補色」

色相環の反対（とその両隣）を補色といいます。正確には補色色相配色、といいます。

補色の組み合わせは互いを引き立てるので、とても目立つ配色になります。

色の基本「類似色」

色相環の角度で３０〜６０度の色を類似色といいます。正確には類似色相配色、といいます。

類似色は色同士の馴染みがいい配色になります。色の選択肢も多いので使いやすい配色です。

色の基本「対照色」

色相環の角度で１２０〜１５０度の色を対照色といいます。正確には対照色相配色、といいます。

対照色は補色ほどのインパクトはありませんが、かなり目立つ配色です。しかも色の選択肢が多いので、こちらも類似色と同様使いやすい配色です。

おまけ．隣接色相配色

色相環で隣り合う色を隣接色相配色といいます。

「補色」「類似色」「対照色」はなんとなく「真逆」「同じような色」「真逆ほどじゃないけど目立つ色」という印象でも話ができますが（もちろんある程度色相環がイメージできたうえで）、隣接色相配色は「色相環上で隣」という意味があります。

後述する「同系色」とまとめられることもあります。

色の基本「反対色・同系色」

補色・類似色・対照色の他に「反対色・同系色」といった色の組み合わせを表す言葉もあります。

補色・類似色・対照色は色相（色あい）のみに着目した言葉ですが、反対色・同系色は彩度、明度にも着目した少し範囲の広い言葉です。

色の基本「反対色」

反対色…は広い意味で「反対の性質をもった色」として使うことが多いです。

• 色相環の大体反対にある色。補色色相配色、対照色相配色をまとめて反対色といったりします。
• 彩度が高い、低いの配色も反対色といったりします。
• 明度が高い、低いの配色も反対色といったりします。

色の基本「同系色」

同系色…こちらも比較的広い意味で「同じような性質をもった色」として使うことが多いです。

• 隣接色相配色のことを同系色といったりします。
• 同じ色相で明度、彩度の違う組み合わせを同系色といったりします。

色の基本知識まとめ

色の基本知識でした。

色に関して、「なんとなく色を選ぶ」のか「論理的に選ぶ」のかでは全く話が変わってきます。