類似色をWEBデザインで使う方法｜自然にまとまる配色の作り方
類似色は、色相環で近くに並ぶ色同士のことです。WEBサイトに取り入れると色のつながりを作りやすい一方、背景も文字も似た明るさにすると、見出しやボタンが埋もれることがあります。この記事では赤みのあるローズ、オレンジ、黄みのあるゴールドを例に、まとまりと読みやすさを両立する方法を紹介します。
類似色は色相を近づけ、使う場所と明るさを分ける
色相環は、赤・黄・青などの色みを円状に並べたものです。類似色は基準色の近くから選びますが、どの角度までを含めるかはツールや考え方によって異なります。例えばHSL（色相・彩度・明度で色を表す方式）でオレンジの20度を基準とし、左右へ30度ずらすと350度と50度になります。
同じ彩度46％（鮮やかさ）、明度33％（明るさ）から作った例が、ローズ#7B2D3A、オレンジ#7B472D、ゴールド系#7B6E2Dです。HEXはWEBで色を指定する16進数のコードで、変換時に数値を丸めています。3色は近い色みでも、それぞれの色と背景との明暗差は同じではありません。
ページの広い場所にはオレンジを使い、ローズを主要な操作、ゴールド系を小さな案内ラベルに割り当てると役割を決めやすくなります。すべての面をこの3色で塗る必要はなく、本文には白に近い背景や暗い文字色を使います。
焼き菓子の事前予約ページに使う配色例
焼き菓子の写真、季節限定セット、受取日時、予約フォームがあるページを想定します。写真と商品情報を中心に、近い色相の3色を必要な場所に配置します。
- ページ冒頭：オレンジ#7B472Dの背景に白#FFFFFFで店名と短い案内を表示します。文字と背景のコントラスト比は約7.55:1です。
- 冒頭の「商品を見る」ボタン：白#FFFFFFの背景にオレンジ#7B472Dの文字を置きます。文字とボタン、ボタンと周囲のオレンジの比率はともに約7.55:1です。
- 商品説明と価格：温かみのあるオフホワイト#FAF7F2を広い背景に、チャコール#2F2927を本文色に使います。文字との比率は約13.39:1です。
- 商品カード：白#FFFFFFにチャコール#2F2927で商品名を載せると約14.31:1です。カードの白#FFFFFFと周囲のオフホワイト#FAF7F2の差は約1.07:1なので、枠線や余白で区切ります。
- 「季節限定」のラベル：ゴールド系#7B6E2Dの背景に白#FFFFFFで表示すると約5.11:1です。限定品の区別は色だけでなく、ラベルの文言でも伝えます。
- 受取日時の案内欄：淡いピーチ#F5EAE1にチャコール#2F2927で情報を載せます。文字の比率は約12.09:1です。必要な輪郭にはグレイッシュブラウン#84776Bを使い、この背景との比率は約3.67:1です。
- 「予約を確定する」ボタン：明るい本文エリアではローズ#7B2D3Aの背景に白#FFFFFFの文字を合わせます。文字は約9.22:1、ボタンと周囲のオフホワイト#FAF7F2は約8.62:1です。
オレンジが店の案内、ゴールド系が商品ラベル、ローズが予約という役割です。近い色相でも、使う面積と位置を変えれば、商品写真を邪魔せず必要な情報を示せます。
色の近さに頼らず、文字・境界・操作を確認する
ローズ#7B2D3Aとオレンジ#7B472Dの色同士のコントラストは約1.22:1です。ローズの予約ボタンをオレンジの冒頭へ移すと、ボタンの形が周囲に埋もれやすくなります。冒頭では白いボタンを使い、ローズは明るい本文エリアに置くなど、背景ごとに調整します。
淡いピーチ#F5EAE1とオフホワイト#FAF7F2の差も約1.11:1です。案内欄は面の色だけで分けず、見出し・余白・必要な枠線を併用しましょう。WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。入力欄の輪郭など、操作に必要な非テキスト情報は隣接色と3:1以上が基準です。
スマートフォンでも価格、受取日時、予約ボタンの位置を確認し、売り切れなどの状態は色だけでなく言葉で示します。HueRollでは基準色の左右15度・30度・45度・60度にある類似色候補を確認できますが、コントラスト比較は選択色と白・黒に限られます。任意の2色の比較やAA・AAAの自動判定はできないため、この記事の色同士の比率は別途計算しています。