WEBデザイン

2色の組み合わせの法則|相性を理論で決めるとおしゃれになる!

2色の色を組み合わせるときに、何か法則はないのかな?

と、お悩みの方へ。

 

りよ
相性を決める法則があります!

 

今回はロジカル色彩シリーズ第2弾として「2色の色を組み合わせる法則」について、大学で色彩化学を学び、色彩検定やパーソナルカラーの資格を持っているりよが説明します!

 

色の組み合わせで『印象』を操る法則【りよのロジカル色彩】

続きを見る

 

\ 不合格なら全額返金

キャリカレ『色彩検定2・3級+カラーコーディネーター講座』

公式ページを詳しく見てみる

資料請求はカンタン10秒(無料)

《LIYOMEMO限定クーポン》

ambR9m0

申し込み時に入力すると13,300円割引になります
*キャリカレの他の講座でも利用できます

 

色の組み合わせ方(配色)の基本

配色の基本は「同一」「類似」「対照」の観点で組み立てられています。

どんな複雑に見える配色も、整理するとほぼこれらの分類に当てはまります。

 

また、色の組み合わせは

  1. 色相やトーンを主体にした配色
  2. 色相環をベースにした配色

の大きく2つに分けられ、2色の組み合わせの配色パターンは1の「色相やトーンを主体とした配色」がほとんどです。

 

この記事では、2色で作ることができる基本的な色の組み合わせ(配色)を説明していきます!

 

取扱う配色

  1. トーンオントーン/トーンイントーン
  2. トーナル
  3. カマイユ/フォカマイユ
  4. ビコロール
  5. ナチュラルハーモニー/コンプレックスハーモニー
  6. ダイアード

 

簡単単語チェック!

  • 色相
    色の4つの属性「色相」「明度」「彩度」「清濁」のうちの一つで、いわゆる赤、青などの色味のこと。
  • 色相環
    色相を似た色味の順に環状に配置したもの
  • トーン
    明度・彩度・清濁のレベルが近いグループ

    出典:日本色研事業株式会社

 

トーンについての詳細はこちらの記事で説明しています。

 

配色法1-1:トーンオントーン

色相が一緒で、トーンが離れている

同じ色相で、トーンが対照的な色の組み合わせです。

明度差のある組み合わせを意識するとよりまとまりやすい配色です。

 

3色、4色…と色を増やしていくとグラデーションになり、色相を統一されているという意味で「色相ドミナント配色」とも言われます。

sample

 

配色法1-2:トーンイントーン

トーンが同じ(似てる)で、色相は自由

トーンを同一か類似の範囲で統一し、色相を自由に組み合わせます。

トーンが持つ印象(感情効果)を伝えやすい配色で、トーンを統一されているという意味で別名「トーンドミナント配色」とも言います。

sample

ただ、高彩度トーンで色相の明度差を大きくしてしまうと、この配色の持ち味が薄れてしまうので注意が必要です。

 

NG例

例は高彩度であるビビットトーンの黄色と紫です。

高彩度のトーンは、同じトーン内でも色味によって明度の差が大きいです。

そのため、同じトーンとはいえ、明度が高い黄色と明度が低い紫を合わせた時に大きな明度差が生まれてしまい「同じトーンでまとめている」という印象が薄れてしまいます。

 

 

配色法2:トーナル

濁色トーン同士の組み合わせ

トーンは同じか類似の、濁色同士の配色です。

具体的にはダルトーンを中心に、ソフトトーン、ライトグレイッシュトーン、グレイッシュトーンなどを合わせます。

落ち着き・控えめ・地味な印象を与えやすく、トーンドミナント配色の一つです。

sample

 

 

配色法3-1:カマイユ

ほぼ同じような色(低彩度)同士の配色

フランス語で「単色画法」という意味で、色相・明度・彩度・清濁のいずれもほとんど差のない配色です。

一見すると単色に見えるほどの似た色の組み合わせ。

 

厳密には色相を統一してその他の色の要素(明度・彩度・清濁)を微妙に変化させ、色調の違いを表現する配色ですが、低彩度色同士であれば多少色相が違っても構いません。

 

sample

 

配色法3-2:フォ・カマイユ

類似色同士の配色(カマイユよりは差がある)

「フォ(faux)」は「まがいの」という意味があります。

つまり「カマイユまがいの配色」ということです。

 

カマイユ配色は遠目に見たら1色に見えるくらい色調が近い組み合わせですが、フォカマイユになると「遠くから見ても色が違うのはわかるけど、似た色の組み合わせ」ということ。

具体的にいうと「色相もトーンも類似の組み合わせ」で、ファッションコーディネートで伝統的に用いられる配色です。

 

sample

 

配色法4:ビコロール

コントラスト差がある色同士の配色

フランス語で「2色配色」の意味のビコロールは、コントラスト感のある明快な色の組み合わせを指します。

(3色の場合はトリコロールと言います。)

 

具体的なコントラストの付け方は、高彩度同士で対照的な色相を用いたり、明度差のあるトーンを用いる方法が一般的です。

白や黒などの無彩色が積極的に用いられるのも特徴です。

sample

 

メモ

黄色と紫のサンプルはトーンイントーンでNG例に出したものと同じですが
コントラスト差を必要とするビコロール配色では、高彩度の補色はgoodな組み合わせです!

 

配色法5-1:ナチュラルハーモニー

黄みよりの色を明るく、青みよりの色を暗く

 

その名の通り自然界の法則に従った配色です。

自然界では日光に照らされた部分は黄みを帯びて明るく、日陰の部分は青みを帯びて暗いです。

その自然界の法則の通り、2色を比べて黄みによっている色を明るく、青みによっている色を暗くした配色です。

 

二つの色を比べて、より黄みより・青みよりと考えるので、必ずしも黄や青を含む配色でなくても構いません。

なじみのよい、調和的な配色が作れます。

sample

 

 

配色法5-2:コンプレックスハーモニー

黄みよりの色を暗く、青みよりの色を明るく

ナチュラルハーモニーとは逆で、2色を比べて黄みによっている方を暗く、青みによっているようを明るくした配色です。

自然の法則と逆をいっており「複雑」であることからコンプレックスハーモニーという名前がついています。

 

斬新でデザイン性が高い配色効果を生みます。

sample

 

配色法6:ダイアード

補色同士の組み合わせ

色相環で対角線上に位置する2色の組み合わせをダイアードと言います。

下図の色相環で向かい合った色同士の配色のことで、いわゆる「補色」同士の組み合わせです。

(色相環を3等分した3色の組み合わせはトライアード、4等分した4色の組み合わせはテトラードと言います。)


出典:日本色研事業株式会社

 

補色同士の組み合わせはただでさえ強い印象になりやすいので、彩度が高いと強すぎる配色になってしまいます。

必要に応じて、トーンを調整して利用しましょう。

sample

 

ちなみに強すぎる高彩度同士で組み合わせると…

こんな感じになります。

 

この配色はビコロール配色で例として取り上げられながらも、ダイアード・トーンイントーン配色ではどちらかというとNGの組み合わせ方になっています。

理由は単純に「高彩度同士」「補色同士」の配色は印象が強く、取り扱いが難しいから。

意図を持って利用する分には構いませんが、慎重に利用しましょう。

 

りよ
【豆知識】
補色同士を混ぜると無彩色(白〜グレイ〜黒)になります!

 

まとめ

今回は2色で作ることができる基本的な配色方法を紹介いたしました!

教科書的に配色理論を説明した記事になりましたが、どの配色方法を覚えておいて損はない基本的な知識です。

 

一通り配色の知識を頭に入れておくと応用も効きやすく、デザイン系の仕事でもクライアントさんに納得感を持ってもらえる説明をしやすくなりますし、コンペ形式の場合プレゼンの説得力も上がります。

ぜひ基本の配色知識を学び、仕事や趣味、実生活に役立ててみてくださいね!

 

要点まとめ

  • 色の組み合わせは「色相やトーンを主体にした配色」「色相環をベースにした配色」の大きく2つに分けられる
  • 紹介した2色で作れる配色はトーンオントーン・トーンイントーン・トーナル・カマイユ・フォカマイユ・ビコロール・ナチュラルハーモニ・コンプレックスハーモニー・ダイアード
  • 紹介した9つの配色のうち、ダイアード以外は「色相やトーンを主体とした配色」
  • 紹介した9つの配色のうち、ダイアード以外は、3色4色…と多数色への応用も可能
  • ダイアードだけは「色相環をベースにした配色」で多色に応用しない

 

このように、色彩理論を知りたい方は、色彩検定で学ぶことができます。

誰でも受けられる検定なので、気軽にチャレンジしてみてくださいね!

 

\色彩検定がとれる通信講座 一発チェック/

 
資格サービスキャリカレユーキャン
コース名カラーコーディネーターW合格指導講座色彩検定3級・2級パックコース
取得できる資格色彩検定2・3級(AFT)
カラーコーディネーター(東商)
色彩検定2・3級(AFT)
価格(税込)

49,600円36,300円
(月々1,910円〜)

ambR9m0
↑こちらのクーポンコードをご利用いただいた価格です。

46,000円
(月々3,200円〜)
特典不合格なら全額返金
資料請求(無料)

資料請求する

資料請求する

公式ページ

詳しく見てみる

詳しく見てみる

 

-WEBデザイン
-,