WEBサイトの配色を色相環から決める方法｜初心者向けの色選び

WEBサイトの配色で迷ったときは、最初から何色も感覚で選ぶより、基準色を1色決めて色相環から候補を広げると整理しやすくなります。色相環は、赤・黄・緑・青・紫などの色みを円状に並べたものです。ここでは青 ■#2563EB を基準に、近い色と反対側の色を使い分けながら、初心者でも配色を組み立てやすい手順を説明します。

色相環は、基準色から候補を探す地図として使う

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、色相は0〜360度の角度で表されます。色相環では、基準色の近くにある色はまとまりを作りやすく、反対側にある色は強い差を作りやすい、という位置関係を確認できます。

HueRollで青 ■#2563EB を選ぶと、類似色にはシアン寄りの ■#25C6EB や青紫寄りの ■#4A25EB が含まれ、補色には黄橙 ■#EBAD25 が表示されます。色相環だけで完成した配色が決まるわけではありませんが、「近い色でまとめるか」「反対側の色で目立たせるか」を考える出発点になります。

初心者は、基準色・補助色・アクセントの順に決める

サービスサイトを例にすると、まず基準色を青 ■#2563EB に決めます。次に、補助色として近い青緑 ■#25C6EB を小さな情報セクションや装飾へ使います。最後に、反対側の黄橙 ■#EBAD25 をCTA（Call to Action、問い合わせや申込みなど次の行動へ進む主要ボタン）や重要なバッジへ限定します。

ページの大部分は、色相環の色だけで埋めず、明るい背景 ■#F8FAFC と濃いネイビー ■#172033 の本文で支えます。この本文色と背景色のコントラスト比は約15.55:1です。主要ボタンを青 ■#2563EB にする場合、白文字 ■#FFFFFF との比は約5.17:1です。補色の黄橙 ■#EBAD25 を使う場合は、濃いネイビー ■#172033 の文字を合わせると約8.16:1になります。

色相だけで決めず、明度・彩度・面積とコントラストも確認する

色相環で相性のよい候補を見つけても、そのまま使えば読みやすいとは限りません。同じ色相でも、明度を上げれば背景向けの淡い色になり、彩度を下げれば主張を抑えられます。逆に、鮮やかな色を大面積に使うと、アクセントとしての効果が弱くなることがあります。

特に文字色は、隣接する背景とのコントラストを実際に確認します。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）では、通常サイズの文字に4.5:1以上が求められます。また、選択状態やエラーなど重要な意味を色だけで伝えず、下線・アイコン・ラベルなども併用します。

HueRollでは、補色・類似色・各種配色候補を確認でき、選択色と白・黒とのコントラスト比も表示できます。ただし、任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していません。色相環で候補を見つけた後は、実際に組み合わせる背景・文字・ボタンの2色を別途確認してください。