オールドローズに合う色は？落ち着いたピンクの配色例

オールドローズには、温かみのあるアイボリー、くすんだセージグリーン、深いプラム色などが合わせられます。少し灰色を含む落ち着いたピンクなので、淡い色だけでまとめるか、濃い色で画面を引き締めるかによって見え方が変わります。ここでは花束の予約ページと読書イベントの告知バナーを例に、背景・見出し・ボタンの色を具体的に考えます。

アイボリー・セージグリーン・深いプラム色を役割で選ぶ

オールドローズは赤みを抑えた、少しくすんだピンク系の色名です。今回の基準色は■#B77B86とします。組み合わせる色は、広い背景向けのアイボリー■#FFF8EF、補助的な面に使う淡いセージグリーン■#DCE7DD、文字やボタンを引き締める深いプラム色■#57394Bです。これはWebデザイン用に選んだ色見本で、色名ごとに唯一の数値が決まっているわけではありません。

HEX（ヘックス）は、Webで色を指定する「#」と6桁の英数字で表すカラーコードです。色同士の明るさの差を示すコントラスト比は、オールドローズ■#B77B86とアイボリー■#FFF8EFで約3.22：1、セージグリーン■#DCE7DDとアイボリー■#FFF8EFでは約1.21：1です。淡い2色はまとまりやすい一方、境界が必要な場所では余白や枠線を使って区切ります。

花束の予約ページと読書イベントの配色例

例A：花束のオンライン予約ページ。ページ背景をアイボリー■#FFF8EFにし、花束の紹介見出しをオールドローズ■#B77B86の帯に濃いチャコール■#211C24で載せます。配送日やサイズの説明欄はセージグリーン■#DCE7DDの淡い面に、同じチャコール■#211C24の文字を配置します。「花束を予約する」ボタンはアイボリーの背景上に深いプラム色■#57394Bで置き、ボタン文字はアイボリー■#FFF8EFにします。文字と背景の比は、見出しが約4.93：1、説明欄が約13.15：1、ボタンが約9.52：1です。写真の周囲には明るい余白を残し、プラム色は主な操作に限定します。

例B：夜の読書イベントの告知バナー。バナーの広い背景を深いプラム色■#57394Bにし、イベント名と開催日をアイボリー■#FFF8EFの文字で表示します。オールドローズ■#B77B86は細い装飾帯に使い、参加方法などの長い情報は別のアイボリー■#FFF8EFの領域に濃いチャコール■#211C24でまとめます。「参加案内を見る」ボタンをプラム色の面に置くなら、アイボリー■#FFF8EFの背景とプラム色■#57394Bの文字を使います。プラム色とアイボリーの文字コントラスト比は約9.52：1です。オールドローズの帯は装飾にとどめ、受付状況などの意味を色だけでは伝えません。

淡い面の境界と、オールドローズ上の文字色を確認する

オールドローズ■#B77B86の上に白■#FFFFFFの通常サイズの文字を置くと約3.39：1で、WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAが求める4.5：1以上には届きません。濃いチャコール■#211C24なら約4.93：1です。大きな文字の数値基準は3：1ですが、実際の文字サイズ・太さも確認してください。

セージグリーン■#DCE7DDとアイボリー■#FFF8EFの境界は約1.21：1です。入力欄など、境界が操作に必要ならプラム色■#57394Bの輪郭を加える方法があります。この線はセージグリーンに対して約7.90：1、アイボリーに対して約9.52：1です。操作部品の識別に必要な視覚情報は、隣接色と原則3：1以上のコントラストが基準です。装飾用の面すべてに濃い枠が必要なわけではありません。

HueRollではHEX入力で候補色を調整し、選択色と白・黒のコントラストを確認できます。任意の2色の比較やWCAGの自動合否判定には対応していないため、今回の文字・ボタン・背景の組み合わせは別途計算しました。