青紫に合う色は？落ち着きと華やかさを両立する組み合わせ

青紫は、青の静けさと紫の華やかさをあわせ持つため、落ち着いた画面に少し個性を加えたいときに使いやすい色です。ただし、周囲まで濃い紫や鮮やかな色でそろえると、全体が重く見えたり、アクセント同士が競合したりすることがあります。この記事では、青紫の一例として ■#5149A8 を使い、オフホワイト、淡いライラック、くすみゴールドを合わせて、落ち着きと華やかさを両立する方法を紹介します。

青紫には、明るい背景と少量の暖色を合わせる

CSSで使われるHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、色相は色の種類、彩度は鮮やかさ、明度は明るさを表します。青紫のように寒色寄りで深さのある色は、背景を明るくすると画面全体の重さを抑えやすくなります。

統一感を優先するなら、青紫に近い淡いライラックなどの類似色を補助面に使う方法があります。一方、華やかさを足したい場合は、色相環で離れた黄みの色を小さな面積で使うと、青紫との差を作れます。HueRollの補色・類似色ガイドでも、補色のように差の強い色は小さなアクセントへ、類似色は背景やセクションなどの連続性を作る用途へ分ける考え方が紹介されています。

落ち着きと華やかさを両立する3つの配色例

本文色のダークチャコール ■#2D2A3A とオフホワイト ■#F6F3FA のコントラスト比は約12.71:1です。淡いライラック ■#E8DFF2 上では約10.82:1、くすみゴールド ■#E8D7A8 上では約9.79:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

青紫 ■#5149A8 をリンクやCTA（行動を促すボタン）に使う場合、オフホワイト ■#F6F3FA との比率は約6.67:1、淡いライラック ■#E8DFF2 とは約5.67:1、くすみゴールド ■#E8D7A8 とは約5.13:1です。白文字 ■#FFFFFF を青紫 ■#5149A8 のボタン上に置く場合も約7.32:1あるため、通常サイズの文字に使えます。

華やかさは色数ではなく、面積と役割で足す

青紫を華やかに見せたいとき、色を次々に増やす必要はありません。青紫をCTAや見出しの一部に使い、淡い類似色を補助面、くすみゴールドをバッジや小さな装飾へ限定すると、落ち着いた土台を残しながら変化を作れます。60–30–10の考え方を使う場合も、比率を厳密に測るのではなく、背景・補助・アクセントの役割を分ける目安として使うと整理しやすくなります。

また、選択中・未選択や重要度の違いを、青紫と別の色の違いだけで伝えないようにします。WCAGでは、色を情報伝達の唯一の視覚的手段にしないことが求められています。文字ラベル、アイコン、下線、枠線などを併用してください。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。青紫を選んだら、類似色で落ち着いた補助面を探し、補色側の候補は小さなアクセントとして比較すると使い分けやすくなります。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。