ストロング・ローズに合う色は？濃いローズを華やかに引き立てる配色【#DA0B59】

ストロング・ローズ（■#DA0B59）は、赤紫寄りの鮮やかさを保ちながら明るさを抑えた濃いローズです。Webサイトでは、コスメや美容サービスの特集ページで、キャンペーン名、商品名のアクセント、主要な「商品を見る」ボタンなどに使うと、華やかさを出しながら情報の優先順位を作りやすくなります。ただし、濃いローズを広い面積へ使うと写真や商品色と競合しやすいため、明るい背景と低彩度の濃色を土台にし、ローズを要点へ集めるのが扱いやすい方法です。ここでは、ペールブラッシュ、ディーププラム、ブルーグレーを合わせます。

ペールブラッシュを広く使い、ディーププラムとブルーグレーで強さを整える

■#DA0B59には、背景用のペールブラッシュ■#FFF7FA、本文や見出し用のディーププラム■#351A2A、補助操作用のブルーグレー■#4F6B7Aを合わせる例が考えられます。

■#FFF7FAはローズの赤みをわずかに感じさせる明るい背景色で、主役の色を残しながら余白を広く取れます。■#351A2Aは赤紫を含む低彩度の濃色なので、商品説明や価格、成分など長く読む情報を主役のローズより落ち着かせて整理できます。■#4F6B7Aは青みのある低彩度色で、ローズから色相を離しつつ鮮やかさを抑えているため、補助ボタンやフィルターなどを別の役割として見せやすくなります。

コスメ特集では、ストロング・ローズを商品名と主要CTAに集める

実装では、商品写真の周囲や説明エリアを■#FFF7FAにし、特集名、商品名の一部、主要なCTA（Call to Action、購入や詳細表示など次の行動を促す操作）の背景へ■#DA0B59を使います。ボタン上の文字を■#FFFFFFにすると、コントラスト比は約5.03:1です。通常サイズの文字に必要な4.5:1以上を満たし、ローズの面も■#FFF7FAに対して約4.78:1あるため、主要操作を背景から識別できます。

本文や価格は■#351A2A、補助の「成分を見る」ボタンなどは■#4F6B7Aを背景にして、その上の文字を■#FFFFFFにします。ブルーグレーと白のコントラスト比は約5.65:1、ブルーグレーとペールブラッシュは約5.36:1なので、補助操作も文字とボタン面の両方を見分けやすくできます。

コントラスト比は、文字やUI（ユーザーが操作するボタンや切り替えなどの画面部品）と背景の相対的な明るさの差を示す数値です。■#351A2Aと■#FFF7FAは約14.96:1、■#DA0B59と■#FFF7FAは約4.78:1、■#4F6B7Aと■#FFF7FAは約5.36:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上、意味のあるUI部品や状態を示す視覚情報には隣接色との3:1以上が求められます。ここで文字や操作に使う組み合わせは、それぞれの用途でこの基準を満たします。

華やかさを保つなら、ローズとブルーグレーの色差だけで状態を伝えない

■#DA0B59と■#4F6B7Aのコントラスト比は約1.12:1です。そのため、「選択中」と「未選択」、「在庫あり」と「残りわずか」などの状態をこの2色だけで分けるのは避け、状態名の文字、チェックマーク、枠線、アイコンなども併用します。

また、口紅やパッケージ写真そのものにローズ系の色が多い場合は、ページ背景まで■#DA0B59で広く埋めるより、■#FFF7FAの余白を残す方が、商品色と操作色を分けやすくなります。HueRollでは■#DA0B59をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。