ベリーダーク・マゼンタに合う色は？深い赤紫を艶やかにまとめる組み合わせ【#36172E】

ベリーダーク・マゼンタ（■#36172E）は、黒に近い深さの中に赤紫の色味を残した濃色です。Webサイトでは、ヘッダーやファーストビューの一部に使うと深い赤紫を印象づけやすい一方、紫系だけでまとめると全体が暗く単調に見えることがあります。ここでは、■#36172Eにウォームクリーム、ダスティモーブ、アンティークゴールドを合わせ、深い赤紫を艶やかに見せながら情報を整理する配色例を紹介します。

ウォームクリーム、ダスティモーブ、アンティークゴールドを合わせる

■#36172Eには、明るいウォームクリームの■#F5E9E0、赤紫の流れをつなぐダスティモーブの■#C18FA9、黄みを抑えたアンティークゴールドの■#B6A36Dを合わせる例が考えられます。

■#F5E9E0は基準色との明るさの差が大きく、暗い背景上の見出しや本文、明るい情報面の背景に使いやすい色です。■#C18FA9は基準色と同じ赤紫寄りなので、補助テキストや細い区切りへ使うと色相のつながりを保てます。■#B6A36Dは赤紫から色相を離しつつ鮮やかさを抑えた黄系で、主要ボタンや小さな強調に使うと、明るい黄色ほど強く見せずに役割を分けられます。

3色を「明るい面」「同系色の中間色」「黄系のアクセント」と分けると、■#36172Eを主役にしながら、暗い赤紫だけで画面が埋まるのを避けやすくなります。

赤紫は見せ場に集め、本文は明るい面へ切り替える

■#36172Eを基準色にする場合は、ページ全体を暗くするより、ヘッダーやヒーローセクション、フッターなどへ濃色を集め、長い文章や数値を読む面を明るく分ける方が使いやすくなります。

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

一方、■#F5E9E0の上に■#C18FA9を置くと約2.27:1、■#B6A36Dを置くと約2.08:1です。どちらも明るい本文背景上の通常文字には使わず、本文文字は■#36172Eのような十分に暗い色へ切り替えます。

艶やかに見せるなら、金色系は小さく使い赤紫を主役にする

■#36172Eを艶やかな方向へまとめたい場合でも、金色系を広い面へ増やす必要はありません。■#B6A36Dは主要ボタン、細いライン、小さなラベルなどへ絞り、基準色より面積を小さくすると赤紫の深さを保ちやすくなります。

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

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