ベリーダーク・パープルに合う色は？黒みのある紫をエレガントに引き立てる配色例【#321736】

ベリーダーク・パープル（■#321736）は、黒に近い深さの中に紫の色味を残した濃色です。Webサイトでは、ヘッダーやヒーローセクションの一部に使うと落ち着いた紫を印象づけやすい一方、暗い紫だけでまとめると階層が見えにくくなることがあります。ここでは、■#321736にパールアイボリー、スモーキーラベンダー、セージグリーンを合わせ、黒みのある紫をエレガントに引き立てる配色例を紹介します。

パールアイボリー、スモーキーラベンダー、セージグリーンを合わせる

■#321736には、わずかに赤みを含む明るいパールアイボリーの■#F2ECF1、紫系のつながりを残すスモーキーラベンダーの■#B6A1C2、紫から色相を離したセージグリーンの■#9CAF91を合わせる例が考えられます。

■#F2ECF1は基準色との明るさの差が大きく、暗い背景上の見出しや本文、明るい情報面の背景に使いやすい色です。■#B6A1C2は基準色と近い紫系なので、補助テキストや細い区切りに使うと色相の流れを保てます。■#9CAF91は彩度を抑えた緑系で、主要ボタンや小さな強調に使うと、鮮やかな緑ほど強く見せずに紫との役割を分けられます。

3色を「明るい面」「同系色の中間色」「緑系のアクセント」と分けると、■#321736の深さを主役にしながら、暗色だけが連続する画面を避けやすくなります。

濃い紫は見せ場に集め、本文は明るい面で読ませる

■#321736を基準色にする場合は、ページ全体を濃い紫にするより、ヘッダーやヒーロー、フッターなどへ集め、長文や数値を読む面を明るく切り替える方が整理しやすくなります。

コントラスト比は、文字や図形と背景の相対的な明るさの差を示す数値です。■#321736と■#F2ECF1は約13.76:1、■#321736と■#B6A1C2は約6.76:1、■#321736と■#9CAF91は約6.83:1です。WCAG 2.2では、通常サイズの文字は4.5:1以上、意味や状態の識別に必要なUI部品やアイコンなどは隣接色との3:1以上が基準です。この例で暗い基準色と組み合わせる文字用途は4.5:1以上を満たします。

一方、■#F2ECF1の上に■#B6A1C2を置くと約2.04:1、■#9CAF91を置くと約2.02:1です。どちらも明るい本文背景上の通常文字には使わず、本文文字は■#321736のような十分に暗い色へ切り替えます。

エレガントに見せるなら、紫の濃淡とアクセントの面積を絞る

■#321736を上品に見せたい場合は、紫の濃淡を何段階も増やすより、役割を絞る方がまとまりを作りやすくなります。■#B6A1C2は補助情報や細い区切りに限定し、主要な文章は■#F2ECF1と■#321736の明暗差で読ませます。

■#9CAF91は主要ボタンや小さなラベルなど、操作や注目箇所へ絞ると基準色との役割が明確になります。写真や商品画像に紫や緑が多い場合は、補助色をさらに増やさず、明るい面積を増やしてページ全体の色密度を調整してください。

HueRollでは■#321736をHEXで指定できます。HEXは#から始まるカラーコードで、Web上の色を表す方法の一つです。関連色や配色候補を確認し、選択した色と白・黒とのコントラストを比べられます。任意の2色同士のコントラスト比較やWCAGの適合レベルの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。