ロゴが紫のWEBサイトに合う配色は？華やかさを整えるWEBカラー

紫のロゴは、それ自体に存在感があるため、WEBサイト全体まで紫で埋めるとロゴと背景の境界が弱くなったり、画面の色量が多く見えたりすることがあります。基本は、ロゴの紫を主役として残し、背景は白やごく淡い色、本文は濃い無彩色で支えることです。ここでは紫 ■#7C3AED のロゴを例に、華やかさを保ちながら画面を整理する配色を考えます。

紫のロゴには、白や淡いニュートラル背景を合わせる

紫 ■#7C3AED のロゴを目立たせたいなら、大面積の背景は白 ■#FFFFFF が扱いやすい選択です。もう少し色味を加えたい場合は、ごく淡いラベンダー ■#F7F5FF や、暖かみのあるライトグレー ■#F6F4F0 のように、彩度（色の鮮やかさ）を低く抑えた色へ広げると、ロゴと競合しにくくなります。

紫 ■#7C3AED と白 ■#FFFFFF のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約5.70:1、淡いラベンダー ■#F7F5FF では約5.28:1、ライトグレー ■#F6F4F0 では約5.19:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）ではロゴやブランド名そのものは文字コントラスト要件の対象外ですが、背景との明るさの差を確認しておくと、ロゴの輪郭が弱くなる組み合わせを避けやすくなります。

コスメブランドの紹介ページでは、紫をロゴと主要操作に絞る

コスメブランドの紹介ページを例にします。ヘッダーと商品説明の背景は白 ■#FFFFFF、特集セクションだけを淡いラベンダー ■#F7F5FF にすると、ロゴの紫を繰り返しすぎずにページへ統一感を出せます。本文はチャコール ■#262626 にすると、白背景とのコントラスト比は約15.13:1、淡いラベンダーとの比は約14.02:1です。

CTA（Call to Action、購入や申込みなど次の行動へ進むための主要ボタン）は、ロゴより少し暗い紫 ■#5B21B6 を背景にし、文字を白 ■#FFFFFF にすると約8.98:1です。通常サイズの文字に必要な4.5:1以上を上回ります。ロゴとボタンを同じ紫系でまとめつつ、背景を白や淡色に限定すると、どこがブランド表現で、どこが操作なのかを整理しやすくなります。

紫を増やすより、面積と明るさの差を調整する

ロゴが紫だからといって、見出し、カード、リンク、背景まで同じ紫にする必要はありません。紫の面積が増えると、主要ボタンと装飾の区別が弱くなる場合があります。まずは背景を白 ■#FFFFFF、補助面を淡いラベンダー ■#F7F5FF、本文をチャコール ■#262626 のように役割で固定し、紫はロゴと主要操作を中心に使います。

写真を多く使うページでは、写真内の紫とロゴが近づく場所にも注意します。ロゴの背面だけ白 ■#FFFFFF のヘッダーを保つと、写真ごとの色変化の影響を受けにくくなります。また、紫のロゴがホームへのリンクなら、ロゴ自体のコントラスト例外と、キーボード操作時のフォーカス表示は別に確認してください。

HueRollでは候補色のHEX（#で始まるWEBカラーコード）を入力し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、本文やCTAなど実際に組み合わせる2色は別途確認してください。