リッチ・ローズに合う色は？濃いローズを上品に華やかに見せる配色【#B81452】

リッチ・ローズ（■#B81452）は、赤紫寄りの色相を持つ濃いローズです。Webサイトでは、オンラインギフトショップのラッピング選択やメッセージカード設定の画面で、商品写真を邪魔しすぎずに華やかさを加えたいときの主役色として使えます。ただし、ローズを広い面積へ重ねると、商品写真や入力内容より色の存在感が強くなり、選択中・未選択などの状態も色だけで判断させやすくなります。ここでは、ブラッシュホワイト、インクプラム、ソフトセージを合わせ、濃いローズを上品に見せながら操作の優先順位を整理しやすい配色を考えます。

ブラッシュホワイトを土台にし、セージでローズの華やかさを落ち着かせる

■#B81452には、背景用のブラッシュホワイト■#FFF7F8、本文や補助文字用のインクプラム■#33242B、補助操作用のソフトセージ■#AFC8B3を合わせる例が考えられます。

■#FFF7F8はごく淡い赤みを含む明色なので、ローズとの色相をつなぎながら十分な明度差を作れます。■#33242Bは赤紫をわずかに含む濃色で、商品名、配送条件、入力ラベルなどをローズ一色にせず整理できます。■#AFC8B3は緑寄りの低彩度色で、ローズから色相を離しつつ鮮やかさを抑えているため、華やかさを残したまま画面へ休息点を作れます。

ギフト設定では、リッチ・ローズを選択結果と主要操作に絞って使う

実装では、商品カードや入力エリアの広い背景を■#FFF7F8にし、選択中のラッピング名、確認見出し、主要な「ギフト設定を追加」ボタン背景などへ■#B81452を使います。その上の文字は■#FFF7F8にすると、濃いローズの面でも通常文字に必要なコントラストを確保できます。商品説明、配送日時、メッセージカードの入力案内は■#33242Bへ分けると、ローズを重要な選択結果と主要操作へ集められます。

補助操作には、■#AFC8B3を「カード文面を確認」などのボタン背景や選択チップに使い、文字と枠線を■#33242Bにする方法があります。明るい背景上ではセージと背景の差が小さいため、枠線を加えて操作部品の輪郭も残します。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#B81452と■#FFF7F8は約6.11:1、■#33242Bと■#FFF7F8は約13.94:1、■#33242Bと■#AFC8B3は約8.22:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#B81452と■#AFC8B3は約3.60:1なので、隣接する意味のあるUI部品を識別するための視覚情報として必要な3:1以上も確保できます。

上品に見せるなら、選択状態をローズとセージだけで伝えない

■#AFC8B3と■#FFF7F8のコントラスト比は約1.69:1です。そのため、明るい背景上でセージの面だけを使ってボタンや選択欄の存在を示すのは避け、■#33242Bの枠線、文字、フォーカス表示などを組み合わせます。

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