配色の基本とは?5つのルールと配色ジェネレーターの使い方を初心者向けに解説

配色の基本を知る前に

まずは配色という言葉の意味と、配色を考えるときに使う「色相環」という道具を押さえましょう。

配色とは何か

配色とは、複数の色を組み合わせ、どの色をどこにどれくらいの量で使うかを決めることです。

この記事で紹介する5つのルールは、色相(色みの種類)・明度(明るさ)・彩度(鮮やかさ)と、色を使う面積の組み合わせ方を整理したものです。

配色という言葉の意味や役割、Web以外の身近な配色の例は配色とは?で詳しく解説しています。

色について何から学べばいいか迷ったときは、学ぶ順番をまとめたデザイン初心者のためのカラー学習ロードマップも参考にしてください。

色の関係を見る道具「色相環」

色相環とは、赤・橙・黄・緑・青・紫といった色相を、変化の順番どおりに円形に並べた図のことです。

円の上で「隣り合っているか」「真向かいにあるか」を見るだけで、2つの色を組み合わせたときの印象をある程度予測できます。

色相環にはいくつかの体系があり、naoq.netでは日本の配色学習で広く使われているPCCS(日本色研配色体系)の24色相環を基準に解説しています。

色相環の見方は色相環とは?、PCCSの成り立ちはPCCSとは?で詳しく解説しています。

配色の基本ルール5つ

ここでは、配色のコツとしてまず押さえたい5つのルールを、要点と小さな見本で紹介します。

気になったルールは、リンク先の記事で詳しく確認してください。

ルール1:色相環の位置関係で組み合わせを選ぶ

1つめのルールは、色相環の上での位置関係を根拠にして、組み合わせる色を選ぶことです。

「なんとなく合いそう」で選ぶより、なぜその組み合わせなのかを説明でき、同じ考え方をほかのデザインにも使い回せるからです。

代表的な組み合わせ方は、補色・類似色・トライアドの3つです。

PCCSの24色相環で見た3つの組み合わせ方。数字は色相番号(色はイメージ)

左の補色は真向かいの2色でメリハリが強く、中央の類似色は隣り合う色でまとまりが出て、右のトライアドは離れた3色でにぎやかな印象になります。

補色は、色相環で真向かいにある色の組み合わせです。

お互いを引き立て合うので、ボタンなど目立たせたい部分に向いていますが、鮮やかな補色同士を同じ面積で並べると、境目がチカチカして見づらくなります。

下の見本の青とオレンジも、PCCSの色相環ではほぼ真向かいにある補色の関係です。

補色の例:青とオレンジ(色相環でほぼ真向かい)

補色の仕組みは補色とは?、チカチカを防ぐ使い方は補色配色とは?で解説しています。

類似色は、色相環で隣り合う、または近くにある色の組み合わせです。

色みが近いので失敗しにくく、落ち着いた統一感のある配色になります。

類似色の例:青・青緑・緑(色相環で隣り合う色)

上の見本の青・青緑・緑のように、近い色相でまとめる方法は類似色配色とは?で詳しく解説しています。

トライアドは、色相環を3等分した位置にある3色の組み合わせで、三角形を描くように色を選ぶので「三角配色」とも呼ばれます。

注意したいのは、どの色相環を使うかによって、トライアドになる3色が変わることです。

PCCSの24色相環では、上の見本のように色相番号が8つずつ離れた3色(例:黄・緑みの青・赤紫)がトライアドになります。

一方、絵の具の三原色(赤・黄・青)をもとにした12色相環では、下の見本のような赤・黄・青がトライアドの代表例です。

絵の具の12色相環でのトライアドの例:赤・黄・青

本やツールによって例が違って見えるのは、このように基準にしている色相環が違うためです。

どちらの場合も3色とも主張が強いので、1色を主役にして、残りの2色は面積を小さくするか、鮮やかさを抑えるとまとまります。

3つの組み合わせ方の使い分けは、色相を使った配色とは?で解説しています。

ルール2:明るさと鮮やかさ(トーン)をそろえる

2つめのルールは、組み合わせる色の明るさと鮮やかさの調子をそろえることです。

この明るさと鮮やかさの組み合わせを「トーン」と呼びます。

色相がばらばらでも、トーンがそろっていれば全体にまとまりが出ます。

同じ3つの色相でも、トーンを変えると印象が変わる

左の見本は鮮やかなトーン、右の見本は淡いトーンでそろえたもので、色相は同じでも受ける印象がまったく違います。

反対に、目立たせたい部分だけトーンを変えると、そこに目が向きやすくなります。

トーンの考え方は明度・彩度を使った配色とは?で詳しく解説しています。

ルール3:色に役割を与えて「70:25:5」で使う

3つめのルールは、色にベースカラー・メインカラー・アクセントカラーという役割を与え、使う面積に差をつけることです。

• ベースカラー(約70%):
  背景や余白など、デザインの土台になる色です。
• メインカラー(約25%):
  ヘッダーや見出しなどに使い、サイトの印象を決める主役の色です。
• アクセントカラー(約5%):
  ボタンなど、一番目立たせたい部分にだけ使う色です。

すべての色を同じくらいの面積で使うと、どこが大事なのかが伝わらず、ごちゃごちゃした印象になるからです。

左の画面の色の面積を、右の帯で比率として表したイメージ

左の見本では、生成りの背景が土台になり、紺のヘッダーと見出しが印象を決め、黄色はボタンにだけ使っているので、自然とボタンに目が向きます。

70:25:5はあくまで目安なので、写真が多いサイトなどでは比率が変わってもかまいません。

役割の決め方はベースカラー・メインカラー・アクセントカラーとは?、比率の考え方は色の割合とは?で詳しく解説しています。

ルール4:色数を増やしすぎない

4つめのルールは、使う色の数を絞ることです。

色が増えるほど、それぞれの色の意味(どれが見出しで、どれが押せる部分か)が分かりにくくなり、まとまりも失われるからです。

まずはルール3の3つの役割に沿って、ベース・メイン・アクセントの3色程度から始め、足りないときは同じ色の濃淡で補うと、色数を増やさずに済みます。

色数の絞り方は色数を増やしすぎない考え方とは?で解説しています。

ルール5:読みやすさを数値で確かめ、色だけに頼らない

5つめのルールは、文字と背景の色の組み合わせが読みやすいかを、感覚ではなく数値で確かめることです。

その数値を「コントラスト比」と呼び、文字の色と背景の色の明るさの差を「4.5:1」のような比率で表します。

Webのアクセシビリティ(障害の有無や年齢、利用環境にかかわらず誰でも使えること)の国際的なガイドラインであるWCAGでは、本文の文字は4.5:1以上、大きな文字は3:1以上を最低限の基準にしています(WCAG 2.2 達成基準 1.4.3 コントラスト(最低限)、WAICによる日本語訳)。

ボタンの色は同じでも、文字色によって読みやすさが大きく変わる

左の見本(NG)は黄色のボタンに白い文字をのせたもので、コントラスト比が約1.7:1しかなく、文字がにじんで読みにくくなっています。

右の見本(OK)のように文字を濃い焦げ茶にすると約7.4:1になり、同じボタンの色のまま、はっきり読めるようになります。

あわせて、情報を色だけで伝えないことも大切です(WCAG 2.2 達成基準 1.4.1 色の用途、WAICによる日本語訳)。

たとえばエラーメッセージは赤い色だけでなく「×」のアイコンや「入力してください」といった文字を添え、本文中のリンクには下線を付けると、色の見え方が人と違う人にも伝わります。

コントラスト比の基準はコントラスト比とは?、色以外の手がかりの足し方は色だけに頼らないデザインとは?で解説しています。

配色の基本をWebサイトに応用する

ここからは、5つのルールを実際のWebデザインの配色に当てはめるときの考え方と、サイトの種類ごとの例を紹介します。

届けたい相手と商品から色の方向性を決める

Webサイトの配色は、まず「誰に」「何を」伝えるのかから方向性を決めます。

同じ商品でも、若い世代向けなら明るく軽やかな色、ビジネス向けなら紺やグレーのような落ち着いた色、というように、届けたい相手によって合う色が変わるからです。

色から受ける印象には、次のような一般的な傾向があります。

• 青:
  誠実・落ち着きといった印象を持たれやすく、銀行やIT企業などのサイトでよく使われます。
• 赤:
  目を引き、活気や食欲を感じさせやすいため、飲食店やセールの告知などで使われます。
  ただしWebでは、エラーや警告を知らせる色としても広く使われています。
• 緑:
  自然・安心といった印象を持たれやすく、健康や環境に関わるサービスでよく使われます。

これはよく見られる傾向で、決まりではありません。

同じ色でもトーンや組み合わせる色、見る人の年代や文化によって受け取られ方は変わるので、「この色を使えば必ずこう感じてもらえる」とは考えないようにしましょう。

相手から考える方法はターゲットに合わせた色選びとは?、商品の特徴から考える方法は商品・サービスに合わせた色選びとは?、色の温度感による印象は暖色・寒色とは?で解説しています。

ブランドカラーがあるなら、それを基準にする

ブランドカラー(企業やサービスを象徴する色として、ロゴやサイト全体で使い続ける色)がすでにある場合は、その色を出発点にします。

ロゴと同じ色をメインカラーに使うと、ひと目で「そのブランドのサイトだ」と分かってもらいやすくなるからです。

ブランドカラーが鮮やかすぎて背景や文字に使いにくいときは、明るさを変えた濃淡のバリエーションを作って使い分けます。

濃淡の作り方はブランドカラーをWebに展開する方法とは?で解説しています。

ボタンの色は「周りから浮き上がるか」で選ぶ

購入や申し込みのボタンには、ルール3のアクセントカラーを使い、周りの色との差がはっきり出る色を選びます。

ボタンに何色を使えば必ず押されやすくなる、という正解の色はなく、大切なのは背景やメインカラーから浮き上がって見えるかどうかです。

メインカラーの補色を選ぶと目立たせやすい一方、赤そのものはエラー表示と混同されやすいので、申し込みボタンにはオレンジ寄りの色を選ぶなどの配慮をすると安心です。

色を変えた効果は、ボタンが押された割合を色の変更前後で比べたり、2つの色を半分ずつの訪問者に見せて比べたりして確かめます。

ボタンの色の選び方と確かめ方はCTAを目立たせるカラーとは?で詳しく解説しています。

サイトの種類別に見る配色例

最後に、ECサイト・ブログ・教育系サイトの3つの配色例を、ベース・メイン・アクセントの役割で見てみましょう。

ECサイト(ネットショップ)の例

ECサイトの例:ベースは白とライトグレー、メインはオレンジ、アクセントは購入ボタンの緑

• ベースカラー:白やライトグレーで、商品写真が引き立つ落ち着いた土台を作ります。
• メインカラー:ブランドの色(例:オレンジ)を、ヘッダーや見出しに使います。
• アクセントカラー:購入ボタンだけに、メインカラーと色相の離れた緑を使い、ほかの要素と区別しやすくします。
  緑のボタンには白い文字をのせると、コントラスト比を4.5:1以上にできます。

ブログサイトの例

ブログの例:ベースはアイボリー、メインは見出しの青、アクセントはリンクの暗めのオレンジ

• ベースカラー:アイボリーやごく薄いグレーの背景で、長い文章でも目が疲れにくい落ち着いた印象を作ります。
• メインカラー:見出しを青でそろえ、記事の区切りを分かりやすくします。
• アクセントカラー:リンクを本文と違う色にして、押せる場所だと分かるようにします。
  ただしリンクは本文と同じ大きさの文字なので、背景とのコントラスト比は4.5:1以上が必要です。
  明るいオレンジ(例:#FF4500)はアイボリーの背景に対して約3.3:1しかないため、見本のような暗めのオレンジ(#B83A00で約5.6:1)に調整し、下線も付けましょう。

教育系サイトの例

教育系サイトの例:ベースは白、メインはヘッダーの青、アクセントはポイント枠の黄色(文字は濃い色)

• ベースカラー:白を広く使い、すっきりと読みやすい画面にします。
• メインカラー:青や緑を見出しやヘッダーに使い、落ち着いた印象を作ります。
• アクセントカラー:黄色を、重要なポイントのマーカーや囲みの背景に使います。
  黄色は白い背景の上では文字色として読みにくいので、文字ではなく塗りの部分に使い、上にのせる文字は濃い色にしましょう。

配色ジェネレーターの使い方

配色の基本ルールが分かったら、配色ジェネレーターを使って実際に色の組み合わせを作ってみましょう。

ここでは、定番の3つのツールの使い方を、画面の操作手順に沿って紹介します(画面の名称は2026年10月時点のものです)。

配色ジェネレーターとは何か

配色ジェネレーターとは、基準にしたい色を1つ選ぶと、相性のよい色の組み合わせを自動で提案してくれるツールのことです。

色相環のルールに沿った計算をツールが代わりにしてくれるので、初心者でも短い時間でたくさんの配色案を試せます。

ただし、ツールが出してくれるのは「色の組み合わせ」までで、どの色をどこにどれくらい使うかは自分で決める必要があります。

今回紹介する3つのツールは、それぞれ得意なことが違います。

ツール	得意なこと	使う場面
Adobe Color	色相環のルール(補色・類似色など)から配色を作る	理屈に沿って色を組み立てたいとき
Coolors	スペースキーで配色案を次々に出す	たくさんの案から気に入る組み合わせを探したいとき
WebAIM Contrast Checker	2色のコントラスト比を測る	決めた色が読みやすいか確かめたいとき

Adobe Color:色相環のルールから配色を作る

Adobe Colorは、アドビが提供するブラウザで使える配色ツールで、ルール1の色相環の考え方をそのまま操作できるのが特徴です。

2026年10月時点では、Adobe Colorのページ(color.adobe.com)はAdobe Expressの配色ツールとして案内されており、配色の作成は無料で始められます。

カラーホイールから配色を作る手順は次のとおりです。

1. Adobe Colorの「カラーホイール」のページを開きます。
2. 基準にしたい色(ベースカラー)を選びます。
   ブランドカラーやロゴの色があれば、その色にします。
   ※ツールの「ベースカラー」は配色の起点になる色のことで、ルール3の背景用のベースカラーとは意味が違います。
3. 配色タイプを選びます。
   単色・補色・分割補色・類似色・三色配色(トライアド)などから選ぶと、カラーホイール上で組み合わせる色が自動で決まります。
   たとえば「補色」を選ぶと、ホイールの反対側の色相が選ばれます。
4. ホイール上のカラーストップ(色の位置を示す印)をドラッグしたり、パレットの色を直接調整したりして、好みの色に近づけます。
5. できたパレットをライブラリに保存するか、色のコードを控えて、デザインツールやCSSで使います。

カラーホイールのほかにも、配色づくりに役立つ機能がそろっています。

• パレットを抽出:
  写真をアップロードすると、写真の中の主な色とアクセントになる色を自動で取り出し、パレットにしてくれます。
  画像上の印をドラッグすると、取り出す色を変えられます。
• カラーグラデーションの抽出:
  写真から、グラデーションの色を取り出せます。
• コントラストチェッカー:
  文字の色(前景色)と背景色のコントラスト比を、WCAG 2.1のAA・AAAの基準に照らして確認できます。
• 色覚シミュレーター:
  作ったパレットが、色の見え方の異なる人にどう見えるかをシミュレーションでき、見分けにくい組み合わせに気づけます。
• パレットの探求:
  ほかの人が作った配色を、キーワードや「夏」「レトロ」「ラグジュアリー」といったテーマから探せます。
  英語のキーワード(例:natural)で探すと、多くの例が見つかります。

たとえばネットショップの配色なら、ブランドカラーをベースカラーに指定して「補色」を選び、出てきた反対側の色を購入ボタンのアクセントカラーの候補にする、という使い方ができます。

Coolors:スペースキーで配色案を次々に出す

Coolorsは、スペースキーを押すたびに新しい配色案を作ってくれる、海外の配色ジェネレーターです(画面は英語)。

公式サイトでは、ほとんどの機能が無料で使え、保存できるパレットの数などに制限がある、と案内されています。

基本の「Palette Generator」の手順は次のとおりです。

1. Coolorsのトップページから「Palette Generator」を開くと、縦に並んだ5色の配色案が表示されます。
2. スペースキーを押すたびに、新しい配色案に入れ替わります。
3. 気に入った色があったら、その色の列にある鍵のアイコンをクリックして固定(ロック)します。
   もう一度スペースキーを押すと、ロックした色はそのままで、ほかの色だけがロックした色に合う候補へ入れ替わります。
4. 列をドラッグして色の並び順を変えたり、列の間の「+」で色を足したり、「×」で色を減らしたりして、使う色の数に合わせます。
5. 決まったら「Export」からCSSや画像、URLなどの形で書き出すか、「Save」で保存します。

メインカラーが決まっていてアクセントカラーに迷っているときは、メインカラーだけをロックしてスペースキーを何度か押すと、組み合わせの候補を短時間でたくさん見比べられます。

Coolorsには、ほかにも次のようなツールがあります。

• Explore Palettes:
  ほかの人が作った配色を、色・スタイル・トピック・カラーコードで検索できます。
• Image Picker:
  写真から色を取り出して、パレットにできます。
• Contrast Checker:
  文字色(Text color)と背景色(Background color)のコントラスト比を計算できます。
• Palette Visualizer:
  作った配色を、実際のデザインの見本に当てはめてプレビューできます。

WebAIM Contrast Checker:決めた色の読みやすさを確かめる

WebAIM Contrast Checker(英語)は、アメリカのユタ州立大学を拠点とするWebアクセシビリティの団体WebAIMが公開している、コントラスト比を測るためのツールです。

配色を作るツールではありませんが、ルール5の「数値で確かめる」を手軽に実行できるので、配色ジェネレーターとセットで使うと安心です。

1. 「Foreground」の欄に、文字の色のカラーコード(例:3A332A)を入力します。
   「Color Picker」から色を選んだり、スポイトで画面上の色を取ったりすることもできます。
2. 「Background」の欄に、背景の色のカラーコードを入力します。
3. 「Contrast Ratio」に、2色のコントラスト比が表示されます。
4. 「Normal Text」(本文サイズの文字)と「Large Text」(大きな文字)のそれぞれで、WCAG AA・AAAの基準を満たしているか(Pass)、満たしていないか(Fail)を確認します。
   ボタンの枠線やアイコンなどは「Graphical Objects and User Interface Components」の結果を見ます。
5. Failになったら、「Lightness」のスライダーで色の明るさを少しずつ変え、Passになる色を探します。

WebAIMの説明では、「大きな文字」は18ポイント(一般的に24px)以上、または太字で14ポイント(一般的に約18.66px)以上の文字を指します。

数値の意味や基準の詳しい読み方は、コントラスト比とは?で解説しています。

3つのツールを組み合わせた配色の流れ

3つのツールは、次の順番で使うと、配色の基本ルールに沿った配色を無理なく作れます。

1. 届けたい相手と商品の特徴から、色の方向性を言葉で決めます(例:「落ち着き」「信頼」)。
2. Adobe Colorで基準の色を選び、配色タイプ(補色・類似色など)を選んで組み合わせの候補を作ります。
3. Coolorsで基準の色をロックし、スペースキーで候補を見比べて、色を3色程度に絞ります。
4. 絞った色に、ベース・メイン・アクセントの役割を割り当て、70:25:5を目安に面積を決めます。
5. WebAIM Contrast Checkerで、本文の文字・リンク・ボタンの文字と背景の組み合わせを確かめます。

実践のポイント

配色の基本ルールや配色ジェネレーターを使うときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 配色ジェネレーターが出した5色を、すべて同じくらいの面積で使ってしまうことがあります。
  ツールの案は「色の候補」と考え、役割と面積の差はルール3に沿って自分で決めましょう。
• 色相環のルールどおりに色を選んだのに、文字が読みにくいことがあります。
  色相の組み合わせが正しくても、明るさの差が足りなければ読めないので、文字と背景の組み合わせは必ずコントラスト比で確かめましょう。
• 「青は信頼」「赤は購買意欲」のように、色の印象を決まりのように扱ってしまうことがあります。
  色の印象は一般的な傾向にすぎないので、届けたい相手に実際に見てもらい、意図どおりに伝わるかを確かめましょう。

よくある質問

• Q. 配色ジェネレーターは、どれから使えばいい?
  A. ブランドカラーなど基準の色が決まっているなら、色相環のルールから組み立てられるAdobe Colorが使いやすいです。
  まだ何も決まっておらず、まずはたくさんの案を見たいなら、スペースキーで次々に案が出るCoolorsから始めるとよいでしょう。
  どちらを使った場合も、最後はWebAIM Contrast Checkerなどで読みやすさを確かめます。
• Q. ツールで「トライアド」を選んだら、本で見た例と違う3色が出てきた。間違い?
  A. 間違いではありません。
  色相環にはPCCSや、絵の具の三原色をもとにした12色相環などいくつかの体系があり、色の並び方が少しずつ違います。
  どの体系でも「色相環を3等分した位置の3色」という考え方は同じなので、出てきた色を出発点にして、明るさや面積で調整しましょう。
• Q. ボタンの色は赤がいいと聞いたけれど本当?
  A. 赤にすれば必ず押されやすくなる、という決まった正解はありません。
  Webでは赤がエラーや警告の色としても使われるので、まずは背景やメインカラーから浮き上がって見えるかを基準に選び、効果は実際の数値で確かめるのが確実です。

まとめ

配色の基本は、色相環の位置関係で組み合わせを選ぶ、トーンをそろえる、役割を与えて70:25:5で使う、色数を絞る、読みやすさを数値で確かめる、の5つのルールにまとめられます。

Webサイトに応用するときは、届けたい相手と商品、ブランドカラーから方向性を決め、ボタンには周りから浮き上がる色を選びます。

配色ジェネレーターは、Adobe Colorで組み立て、Coolorsで見比べ、WebAIM Contrast Checkerで確かめる、という流れで使うと迷いにくくなります。

まずは自分のサイトやよく見るサイトのメインカラーを1つ選び、Adobe Colorのカラーホイールで「補色」と「類似色」を表示して、どんな組み合わせが出てくるかを見比べてみましょう。