補色、類似色、単色、分裂補色、トライアド、テトラード。色をひとつ選ぶだけで、それぞれの配色パターンがカラーホイール上でどうなるかがすぐにわかり、カラーコードもそのままコピーできます。
虹色のバーを動かすか、どれかのホイールを指で回してください。6つの配色がまとめて変わります。
迷ったときの目安：色数が多く、ホイール上で離れているほどコントラストが強くなり、バランスを取るのが難しくなります。
| 種類 | メインの色数 | コントラスト | 難しさ | 向いている用途 |
|---|---|---|---|---|
| 補色 | 2色 | 高 | ふつう | 目立たせたいときに：ボタン、セール告知、インパクトのあるロゴ。 |
| 類似色 | 隣り合う3〜5色 | 低 | 簡単 | 自然で落ち着いた雰囲気に：風景、ウェルネス、インテリア。 |
| 単色（モノクロマティック） | 1色 | 低 | 簡単 | すっきり上品にまとめたいときに。ほとんど失敗しません。 |
| 分裂補色 | 3色 | 中 | ふつう | 補色のようなコントラストがありつつ、バランスが取りやすい配色。 |
| トライアド | 3色 | 高 | 大胆 | 明るく元気な雰囲気に：子ども向け、ゲーム、パーティー。 |
| テトラード（正方形） | 4色 | 高 | 大胆 | バリエーション豊かに：イラスト、ゲーム、カラフルなブランド。 |
参考になる実例の配色です。色をタップするとカラーコードをコピーできます。
よく使われるのは、補色、類似色、単色（モノクロマティック）、分裂補色、トライアド、テトラード（正方形）の6種類です。どれもカラーホイール上の色の位置関係から生まれます。
単色配色です。ひとつの色の明るいトーンと暗いトーンだけを使うので、まずぶつかりません。次に簡単なのは類似色配色で、隣り合う色どうしは自然になじみます。
補色はある色とカラーホイールで真向かいにある色を組み合わせます。分裂補色はその反対色の代わりに両隣の2色を使います。コントラストは残りつつ、やわらかくバランスが取りやすくなります。
ひとつの色をメイン（約60%）にし、もうひとつをサブ（30%）、残りは小さなアクセントだけに使います。テトラード配色では、白、グレー、ベージュなどのニュートラルカラーを加えるとまとまりやすくなります。
4色で構成する配色の呼び方です。正方形はカラーホイール上で等間隔に並ぶ4色、長方形は補色のペアを2組使います。
サイトの利用状況を知るために、Google AnalyticsのCookieを使用しています。同意しますか？ 詳しく見る