「ブログやサイトの色が決まらず、何時間も悩んでしまう」「自分で選んだ色の組み合わせが、なぜかしっくりこない」——配色は道具も知識もなしに闇雲に選ぶと、時間だけが過ぎていきます。しかし、色の選び方には色相環（しそうかん）をもとにした基本的な型があり、型に当てはめれば迷いはぐっと減ります。
この記事では、配色の基本になる補色・類似色・トライアド・モノクロームの4つの考え方を、色相の角度という具体的な数値つきで解説します。Webサイトや資料で使いやすい配分のルール、文字と背景のコントラストの考え方まで、初心者向けにまとめました。
色相環とは？配色の基本になる仕組み
色相（しそう）は、赤・橙・黄・緑・青・紫といった「色合い」を円環状に並べた概念です。この円を色相環と呼び、配色の基本は「色相環のどこに、どの角度で色を置くか」で決まります。角度はカラーピッカーの色相の値や、カラーコードのHSL形式（Hが色相）で確認できます。
代表的な4つの組み合わせと、色相環上での角度は次のとおりです。
| 組み合わせ | 色相の角度 | 与える印象 | 使いどころ |
|---|---|---|---|
| 補色 | 180度（正反対） | 強いコントラスト、力強い | 目立たせたいボタン・アイコンのアクセント |
| 類似色 | ±30度前後（隣接） | おだやか、統一感がある | 背景や本文など面の広い部分 |
| トライアド | 120度ずつ（3等分） | にぎやか、バランスがよい | 3色使いたい場合の安全な選び方 |
| モノクローム | 同じ色相（明度・彩度のみ変化） | 落ち着き、高度 | 背景の段差や情報の整理 |
角度の目安：色相環を360度として、補色は正反対の180度、類似色は隣り合う±30度前後、トライアドは3等分の120度ずつです。厳密な角度ではなく、この近くの色を選んでも配色として成立します。
具体的に、ベースを青（色相210度）とした場合の例で見てみます。
- 補色: 210 + 180 = 30度方向のオレンジ系。青い画面の中で、オレンジのボタンはよく目立ちます
- 類似色: 180度〜240度方向の青緑や青紫。背景と見出しの差をつけるのに向いています
- トライアド: 90度と330度方向の色。青を主役に、黄緑と赤紫を小さく添えるとにぎやかになります
- モノクローム: 同じ青のまま、明るくした色・暗くした色で段差を作ります
このように、基準の色相が決まれば、残りの色は「角度を足す」だけで機械的に導出できます。感覚で探すより、組み合わせが破綻しにくくなるのが色相環で選ぶ利点です。
実践：配色を決める手順と注意点
基本は「60-30-10」の配分
色を3つ用意したら、面積のおおよその目安をメイン60%・サブ30%・アクセント10%で配分します。背景や大きな面にメインカラー、見出しやカードにサブカラー、ボタンやリンクにアクセントカラーを置くと、主従がはっきりして統一感が出ます。
逆に失敗しやすいのが、アクセントに近い強い色を広い面積で使うケースです。彩度の高い色は面積が大きいほど刺激が強く感じられます。強い色は「使いたい面積の3分の1」に縮める、という調整でも印象は落ち着きます。決める順番は「背景 → 文字 → アクセント」の順にすると、迷いがさらに減ります。
文字と背景のコントラストを確認する
色の組み合わせが決まったら、文字が読めるかを確認します。目安として、本文レベルの文字と背景の明るさの差（コントラスト比）は4.5:1以上がW3Cのアクセシビリティ基準（WCAG）で推奨されています。淡い色同士の組み合わせは、見た目の印象にかかわらず読みにくくなりがちなので、コントラストチェックツールで数値を確認すると安心です。
色だけで情報を伝えない：エラーの表示を赤だけにする、必須項目を色だけで示す、といった設計は、色の見え方が異なる利用者に情報が届かなくなります。アイコンやラベル、下線などをあわせて使うと、多くの人に伝わりやすいページになります。
ベースカラーの決め方
配色で初心者が陥りやすいのは、次の3つのパターンです。
- 彩度の高い色を多色使う: すべてが主張し合い、どこを見ればよいかわからないページになります
- 色数を増やしすぎる: 色は3色まで（白・黒・グレーは除く）に絞ると統一感が出ます
- 文字と背景の色が近い: 薄いグレーの文字を白背景に置くなど、読みにくさにつながります
いずれも色相環の型を使えば防げます。組み合わせに迷ったら、色数を減らして彩度を一段落とす——これだけで落ち着いた印象に近づきます。
迷ったときの起点は、次の3つです。
- ブランドやテーマの色：ロゴやサービスのイメージカラーがすでにあるなら、そこから始める
- 用途の印象：青系は信頼や冷静さ、緑系は自然や安心、オレンジ系は活動的、という一般的な傾向を参考にする
- 好きな写真や素材から拾う：使いたい画像の中の色を1つ拾い、それを基準に展開する
基準の色が決まれば、あとは色相環の型に当てはめるだけです。
ツールで配色を生成する
色相環の角度を手で計算するのは手間なので、Tools Hubのカラーパレット生成ツールを使えば、ベースカラー1色から補色・類似色・トライアド・モノクロームのパレットを即座に生成できます。生成された色はHEX・RGB・HSLコードでコピーでき、コードはCSSやデザインツールにそのまま貼り付けられます。計算はすべてブラウザ内で完結し、選んだ色が送信されることはありません。
使い方（3ステップ）
ベースカラーを選択
カラーパレット生成ツールを開き、カラーピッカーかHEXコードで基準になる色を選びます。
配色方式を選択
補色・類似色・トライアド・モノクロームから、目的に合う方式を選びます。迷ったら類似色から始めるのが安全です。
コードをコピー
生成された色のHEX・RGB・HSLコードをコピーし、CSSやデザインツールに貼り付けます。
この記事で紹介したツール
カラーパレット生成ツール
補色・類似色・トライアド・モノクロームを即座に生成。HEX・RGB・HSLコードをコピーでき、ブラウザで完結・無料です。
生成した色コードの形式を変換したいときは色変換ツール、HEXとRGBの対応そのものを理解したいときは色変換ガイドで仕組みを解説しています。
まとめ
- 配色の基本は色相環。どこに・どの角度で色を置くかで決まる
- 補色（180度）はアクセント、類似色（±30度）は統一感、トライアド（120度）は3色のバランス型
- 面積の配分は「メイン60%・サブ30%・アクセント10%」が目安
- 文字と背景はコントラスト比4.5:1以上を目安に確認する
- Tools Hubのカラーパレット生成ツールなら、ベース1色から4方式のパレットを無料で生成できる
まずは好きな色を1色選び、類似色のパレットでページ全体の雰囲気を作ってみてください。
よくある質問
補色と類似色、どちらを使えばよいですか？
目的が異なります。目立たせたい要素（ボタン・警告・強調）には補色、背景や本文など面の広い部分には類似色が向いています。ページ全体を補色で埋めると刺激が強くなるため、基本は類似色でまとめ、補色はアクセントとして少量使うのが無難です。
「60-30-10ルール」とは何ですか？
配色の面積配分の目安で、メインカラー60%・サブカラー30%・アクセントカラー10%と分ける考え方です。厳密な規則ではなくデザインの経験則ですが、色の主従がはっきりして統一感のあるページになりやすいため、最初の配分としてよく使われます。
文字と背景の色はどう選べばよいですか？
本文レベルの文字と背景は、明るさの差（コントラスト比）が4.5:1以上になる組み合わせを目安にします。W3CのWCAGというアクセシビリティ基準で推奨されている値です。淡い色同士は避け、完成後にコントラストチェックツールで数値を確認すると安心です。
無料で配色を試せるツールはありますか？
Tools Hubのカラーパレット生成ツールは、ベースの色1つから補色・類似色・トライアド・モノクロームのパレットを生成でき、HEX・RGB・HSLコードをコピーできます。登録不要でブラウザだけで完結します。
