2色の組み合わせ一覧|相性のいい配色パターン

2色の組み合わせ一覧|相性のいい配色パターンに関係する色を使ったアイキャッチ

2色の組み合わせ一覧|相性のいい配色パターン

2色の組み合わせを作る基本を解説。同系色、類似色、補色、無彩色+アクセントなど、失敗しにくい配色パターンを紹介します。

配色・デザイン

2色配色は、色数が少ないぶん色同士の関係がそのまま印象に出るのが特徴です。相性のよい2色を選ぶときは、色相だけでなく、明度・彩度・面積・用途まで合わせて考えると失敗しにくくなります。

まず結論

2色配色では、①似た色でまとめる、②反対方向の色でメリハリを出す、③無彩色を土台にする、の3パターンを覚えると組みやすくなります。迷ったら「主役1色+支える1色」に役割を分けるのが基本です。

この記事の色

記事テーマを視覚的に理解するための色見本です。概念に固定の公式色がない場合は教材表示として扱います。

← 左右にスライドできます →
青系#315D7A
黄系#E6B45B

2色配色の基本パターン

考え方 特徴 向いている場面
同系色 近い色相や同じ色相で明度・彩度を変える 落ち着き、統一感
類似色 色相環で近い色を組み合わせる 自然、やわらかい印象
高コントラスト 色相差・明度差を大きくする 目立たせたい場面
無彩色+有彩色 白・黒・グレーに色を1つ足す デザイン、服、Web

使いやすい2色の組み合わせ

組み合わせ 印象 使い方
上品・落ち着き ファッション、インテリア、資料
爽やか・活発 スポーツ、Web、広告
強い・シャープ アクセント、見出し、イベント
自然・穏やか アース系、生活雑貨
静か・上品 美容、ファッション、ブランド

「相性がいい」は色名だけでは決まらない

同じブルーでも、淡い水色と濃いネイビーでは印象が大きく異なります。2色配色では、明度彩度をそろえるか、あえて差をつけるかで見え方が変わります。

面積比を変えると印象も変わる

2色を50:50で使うと両方が主張しやすくなります。70:30や80:20のように片方を広くすると、主役とアクセントの関係が明確になります。これらは便利な目安ですが、公式の配色規則ではありません。

読みやすさは「色相差」だけで判断しない

文字と背景の組み合わせでは、補色だから読みやすいとは限りません。重要なのは輝度差・コントラストです。情報を色だけで区別せず、文字・形・アイコンも併用してください。

2色を実際に試す

2色配色は面積比で印象が変わる

同じ2色でも、50:50と80:20では見え方が大きく変わります。『相性がいい色』を探すだけでなく、どちらを主役にするかまで決めると配色がまとまりやすくなります。

50:50|両方を同じ強さで見せる

80:20|ネイビーを主役に

20:80|ベージュを主役に

比率は固定ルールではない

80:20や70:30は配色を考えるための目安です。用途・文字量・余白・写真の有無に合わせて調整してください。

よくある質問

2色は50:50で使うべきですか?

いいえ。50:50は両方を強く見せたい場合に向きます。片方を主役にするなら面積差をつける方が整理しやすいです。

補色なら必ず相性がいいですか?

補色はコントラストが強い関係ですが、彩度が高い同士だと刺激が強くなることがあります。面積や明度を調整すると使いやすくなります。

迷ったら何色を組み合わせればいいですか?

白・黒・グレー・ネイビー・ベージュなどを土台にして、好きな有彩色を1色足す方法が扱いやすいです。