ベリーダーク・バイオレットに合う色は？暗い紫を静かに華やかに見せる色合わせ【#261736】

ベリーダーク・バイオレット（■#261736）は、黒に近い深さの中に青紫の色味を残した濃色です。Webサイトでは、ヘッダーやヒーローセクションの一部に使うと静かな存在感を作りやすい一方、暗い紫だけでまとめると画面全体が沈んで見えることがあります。ここでは、■#261736にパールホワイト、スモーキーライラック、ダスティローズを合わせ、暗い紫を落ち着かせながら少し華やかに見せる配色例を紹介します。

パールホワイト、スモーキーライラック、ダスティローズを合わせる

■#261736には、わずかに紫みを含む明るいパールホワイトの■#F1EDF5、基準色とのつながりを残すスモーキーライラックの■#AFA3C4、赤みを少し足すダスティローズの■#C5A0ACを合わせる例が考えられます。

■#F1EDF5は基準色との明るさの差が大きく、暗い背景上の見出しや本文、明るい情報面の背景に使いやすい色です。■#AFA3C4は青紫系の流れを保ちながら明るさを足せるため、補助テキストや細い区切りに向きます。■#C5A0ACは赤みを含む低彩度色なので、主要ボタンや小さなラベルに使うと、鮮やかなピンクほど強く見せずに華やかさを加えられます。

3色を「明るい面」「同系色の中間色」「赤みのあるアクセント」と分けると、■#261736の静かな深さを保ちながら、暗色だけが連続する状態を避けやすくなります。

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

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

コントラスト比は、文字や図形と背景の相対的な明るさの差を示す数値です。■#261736と■#F1EDF5は約14.44:1、■#261736と■#AFA3C4は約7.04:1、■#261736と■#C5A0ACは約7.15:1です。WCAG 2.2では、通常サイズの文字は4.5:1以上が基準です。この例で暗い基準色と組み合わせる文字用途は4.5:1以上を満たします。

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

静かに華やかに見せるなら、赤みのある色を広げすぎない

■#261736を落ち着いたまま華やかに見せたい場合は、ピンクや赤紫を広い面に増やすより、■#C5A0ACを主要ボタン、小さなラベル、細いラインなどへ絞る方が調整しやすくなります。アクセントの面積を小さくすると、深い青紫を主役にした静かな印象を保ちやすくなります。

■#AFA3C4は同系色の補助として使い、見出しや本文をすべてライラックにしないこともポイントです。写真や商品画像に紫やピンクが多い場合は、補助色をさらに増やさず、■#F1EDF5の明るい面を増やして色の密度を調整してください。

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