リッチ・パープルに合う色は？濃厚な紫をエレガントに見せる配色例【#A314B8】

リッチ・パープル（■#A314B8）は、赤みを含んだ濃い紫です。Webサイトでは、ジュエリーECのコレクション一覧や商品詳細で、コレクション名、選択中の商品、主要な「購入手続きへ」ボタンなどに使うと、写真を主役に残しながら深い紫を印象的に見せやすくなります。ただし、紫を広い面積へ重ねると、宝石や金属の色よりUIの存在感が強くなりやすいため、明るい余白と低彩度の補助色を組み合わせて使う場所を絞ることが大切です。ここでは、パールライラック、インクチャコール、シャンパンベージュを合わせ、濃厚な紫をエレガントに見せる配色を考えます。

パールライラックを土台にし、シャンパンベージュで紫に温かい差を加える

■#A314B8には、背景用のパールライラック■#FBF7FC、本文や補助文字用のインクチャコール■#2B2630、補助操作用のシャンパンベージュ■#C7B7A3を合わせる例が考えられます。

■#FBF7FCはごく淡い紫みを含む明色で、リッチ・パープルとの色相のつながりを残しながら大きな明度差を作れます。■#2B2630は紫をわずかに含む濃色なので、商品名、価格、素材、サイズなどを落ち着いて整理できます。■#C7B7A3は黄みを含む低彩度のベージュで、紫から色相を離しつつ鮮やかさを抑えているため、深い紫と競合しにくい補助色として使えます。

ジュエリー商品ページでは、リッチ・パープルを主要操作と選択状態に集める

実装では、商品写真の周囲や商品情報カードの広い背景を■#FBF7FCにし、コレクション名、選択中の商品名、主要な「購入手続きへ」ボタン背景などへ■#A314B8を使います。その上の文字は■#FBF7FCにすると、通常サイズの文字に必要なコントラストを確保できます。価格、素材、サイズ、配送案内は■#2B2630へ分けると、紫を要点へ限定できます。

UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#A314B8の帯やパネル上に、■#C7B7A3の「素材を見る」ボタンや小さなラベルを置き、その文字を■#2B2630にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#A314B8と■#FBF7FCは約5.91:1、■#2B2630と■#FBF7FCは約13.93:1、■#2B2630と■#C7B7A3は約7.54:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#A314B8と■#C7B7A3は約3.20:1なので、濃い紫の面に置く意味のあるUI部品を識別するための視覚情報として必要な3:1以上も確保できます。

エレガントに見せるなら、ベージュを明るい背景上の境界色として使わない

■#C7B7A3と■#FBF7FCのコントラスト比は約1.85:1です。そのため、明るい背景上でシャンパンベージュの面だけを使ってボタンや選択欄の存在を示すのは避け、■#2B2630の枠線や文字を組み合わせます。

また、「選択中」「在庫あり」「予約商品」などの状態は、紫とベージュの色分けだけに頼らず、状態名の文字、チェックマーク、太めの枠線なども併用します。宝石やアクセサリー写真に紫が多い場合は、ページ全体へさらに■#A314B8を広げるより、■#FBF7FCの余白を十分に残す方が、商品写真と操作を分けやすくなります。HueRollでは■#A314B8をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。