配色パターン一覧：色の組み合わせ方とカラーコードの決め方

配色パターンは「色相」より先に用途で選ぶ

同じ色の組み合わせでも、WebサイトのUI、SNS画像、Excel表、印刷物では適した配色が変わります。背景に広く使う色と、ボタンや見出しに少量使う色を分けないまま色数だけ増やすと、画面が散らかり、文字も読みにくくなります。

まずは「どこを見てほしいか」「どのくらい落ち着いた印象にしたいか」を決め、そのあとに色相環の関係を選びます。迷ったときの入口は次の表です。具体的な配色案を作る場合も、主色・背景色・アクセント色の役割を先に分けておくと調整しやすくなります。

代表的な配色パターン6種類

ここで紹介するカラーコードは、仕組みを理解するための出発点です。ディスプレイの設定、周囲の色、印刷用紙によって見え方が変わるため、最終的には実際のレイアウトで確認してください。

類似色配色：まとまりを優先したいとき

色相環で近い色を並べる配色です。青から青緑、緑のように隣り合う色を使うと、自然で落ち着いた印象になります。企業サイトの背景、カード、ナビゲーションなど、長く見続ける画面と相性がよいパターンです。

例：#2F5D8C（主色）・#4779A8（補助色）・#A8C6B5（淡い背景）

補色配色：アクセントを強く見せたいとき

色相環で反対側にある色を組み合わせます。青とオレンジ、紫と黄のように差が大きく、CTAやキャンペーン画像の視線誘導に使いやすい一方、両方を同じ面積で使うと刺激が強くなります。主色を広く、補色を小さなアクセントにすると扱いやすくなります。

例：#2F5D8C（主色）・#F28C28（アクセント）・#F7F3EA（背景）

分裂補色・トライアド：3色以上を整理したいとき

補色の片側を2色に分ける分裂補色は、メリハリを保ちながら少し柔らかくできます。トライアドは色相環上でおおむね均等な3色を使う考え方で、ポスターや子ども向け資料など、複数の要素を楽しく見せたい場面に向きます。どちらも色を均等な面積で使わず、主色・補助色・アクセントに役割を分けるのがコツです。

例：分裂補色は #2F5D8C・#E8B04A・#D95D7A、トライアドは #2F5D8C・#D9A441・#9C5AA6

モノクロ配色：明度差で情報を見せるとき

1つの色相を濃淡で展開する配色です。ブランドの統一感を保ちやすく、管理画面や資料の階層表現にも向きます。ただし、薄い背景と薄い文字を重ねると差が不足するため、色相が同じでも明度差は十分に取ります。

例：#17324D・#2F5D8C・#6E95B5・#DCE8F0

4色配色：役割を分けてUIや資料を作るとき

4色を使う場合は、色相の理論よりも役割管理が重要です。背景、主色、アクセント、状態表示の4つを最初に決め、本文文字は別に読みやすい濃色で固定します。成功・注意・エラーの状態まで同じ色数に含めると、実際の画面で迷いにくくなります。

例：#F7F3EA（背景）・#2F5D8C（主色）・#F28C28（アクセント）・#3E8E67（補助・成功）

用途別に使いやすい配色パターン

WebサイトやアプリのUI

UIでは、背景・面・主色・アクセント・文字色を分けます。画面全体を鮮やかな主色で塗るより、背景を無彩色または低彩度にして、ボタンやリンクだけに主色を使う方が操作箇所を見つけやすくなります。配色をコードに落とすときは、HEX値を決めたあとに通常文字、見出し、ボタンの組み合わせを確認してください。

SNS画像やバナー

SNS画像は一瞬で内容を伝える必要があるため、主色1色とアクセント1色の組み合わせから始めます。背景と文字の明度差を確保し、写真やイラストが入る場合は、画像から1色を拾って補助色にすると全体がまとまりやすくなります。

Excelやプレゼン資料

資料では、見出し行、本文、強調、注意の役割を固定すると、ページが変わっても読み方が揺れません。淡い色を交互行に使う場合は、文字色を白に寄せすぎないことが重要です。用途がExcelに絞られる場合は、エクセル向けパステルカラー配色の具体例も参考になります。

印刷物

画面で選んだHEXやRGBが、そのまま紙の上で同じ色になるとは限りません。印刷用データではCMYKへの変換、用紙、インク、印刷方式の影響を確認します。Web用の色と印刷用の近似値を分けて管理したい場合は、RGB⇔CMYK変換で数値を確認し、重要な色は必ず校正紙や試し刷りで判断してください。

カラーコードを決める5ステップ

1. 目的を一文で決める：「落ち着いた問い合わせ画面」「明るいイベント告知」のように、色より先に役割と印象を言葉にします。
2. ベースカラーを1色選ぶ：ロゴ、写真、既存ブランドなど、変えにくい要素から主色を決めます。
3. 配色パターンを1つ選ぶ：迷ったら類似色から始め、視線を集めたい箇所がある場合だけ補色や分裂補色を追加します。
4. 色の役割と面積を分ける：背景、面、主色、アクセント、文字色を同じ強さで使わないようにします。
5. HEXを固定して実寸で確認する：候補をカラーパレット ジェネレーターで作り、実際のレイアウトに置いてから、文字色はコントラスト比 チェッカーで確認します。

配色ジェネレーターは候補を短時間で増やすのに便利ですが、生成された組み合わせがそのまま正解になるわけではありません。色の面積、画像との重なり、ユーザーが見る順番まで含めて最終判断を行います。

すぐ使える3色配色のカラーコード例

印刷では画面上の見え方と紙面の見え方がずれることがあります。CMYK値が必要な場合は、用途別に変換値を持ち、印刷会社の指定や色校正を優先してください。

配色で失敗しやすいポイント

• 色数を増やせば整うと思う：色を増やす前に、既存の色がどの役割を持っているかを確認します。役割が重複している場合は、削る方が見やすくなります。
• 配色パターンだけで可読性を判断する：美しい色相関係でも、淡い背景と白文字の組み合わせは読みにくくなることがあります。実際の文字サイズで確認してください。
• HEXだけで印刷結果を決める：モニターの発色と紙・インクの再現は別の条件です。Web用と印刷用の値を分け、必要なら試し刷りを行います。
• 自動生成結果をそのまま採用する：ジェネレーターは候補作りに使い、目的、面積、写真との相性、状態表示まで人が確認します。

配色パターンのFAQ

まとめ

配色パターンは、色相環のルールだけでなく、用途、面積、役割、文字の読みやすさまで合わせて選ぶと実務で使いやすくなります。最初は類似色やモノクロで土台を作り、視線を集めたい場所だけ補色やアクセントを少量使うと調整しやすいでしょう。

HEXカラーコードの候補作りにはカラーパレット ジェネレーター、2色の見え方の確認には色を混ぜるシミュレーション、文字と背景の確認にはコントラスト比 チェッカーを使い分けると、配色決定から検証までを一つの流れにできます。