ディープ・マゼンタに合う色は？濃い赤紫を艶やかに見せる組み合わせ【#981B78】

ディープ・マゼンタ（■#981B78）は、赤紫の華やかさを保ちながら深さを持たせた色です。Webサイトでは、ファッションブランドのルックブックやコレクションページで、コレクション名、ルック番号、主要な「商品を見る」ボタンなどに使うと、鮮やかなマゼンタよりも落ち着きを残しながら艶やかな方向へ寄せやすくなります。ただし、赤紫やピンクを広い面積へ重ねると、服やモデル写真よりUIの色が強く見えたり、選択中のカテゴリが色だけで示されたりしやすくなります。ここでは、ペールラベンダー、チャコールプラム、ミューテッドセージを合わせ、濃い赤紫を主役にしながら写真と操作を整理しやすい配色を考えます。

ペールラベンダーを土台にし、セージで赤紫に静かな色相差を作る

■#981B78には、背景用のペールラベンダー■#F7F1F6、本文や補助文字用のチャコールプラム■#3C343A、アクセント用のミューテッドセージ■#B5C8B3を合わせる例が考えられます。

■#F7F1F6はごく薄い紫みを含む明色で、ディープ・マゼンタとのつながりを残しながら写真周りや商品情報の面を明るくできます。■#3C343Aは赤紫をわずかに含む低彩度の濃色なので、商品名、価格、素材説明などを主役色より控えめに整理できます。■#B5C8B3は緑寄りの低彩度色で、赤紫から色相を離しながら鮮やかさを上げすぎず、マゼンタ中心の画面へ静かな変化を加えられます。

ルックブックでは、ディープ・マゼンタをコレクション名と主要操作に集める

実装では、商品情報やルック詳細カードの広い背景を■#F7F1F6にし、コレクション名、ルック番号、主要な「商品を見る」ボタン背景などへ■#981B78を使います。価格や素材、補足説明は■#3C343Aへ分けると、ディープ・マゼンタを要点と主要操作へ限定できます。UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#981B78の面に■#B5C8B3の小さな副ボタンやラベルを置き、その文字を■#3C343Aにする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#981B78と■#F7F1F6は約6.83:1、■#3C343Aと■#F7F1F6は約10.82:1、■#3C343Aと■#B5C8B3は約6.81:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#981B78と■#B5C8B3は約4.30:1なので、濃いマゼンタの面に置く意味のあるUI部品の境界として必要な3:1以上も確保できます。

艶やかさを保つなら、写真と選択状態をマゼンタだけで整理しない

■#B5C8B3と■#F7F1F6のコントラスト比は約1.59:1です。そのため、明るい背景上の通常文字には使わず、ボタンやカードの存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#981B78や■#3C343Aの枠線・文字を組み合わせます。

また、シーズンやカテゴリの「選択中」を示す場合は、色だけに意味を持たせず、太めの枠線、チェックマーク、「選択中」の文字なども併用します。ルック写真に赤紫、ピンク、黒などが多い場合は、ページ全体へさらにマゼンタを増やすより、■#F7F1F6の余白を十分に残す方が写真と操作を分けやすくなります。HueRollでは■#981B78をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。