ダスキー・オレンジに合う色は？くすみのある橙を穏やかに引き立てる配色【#605020】

ダスキー・オレンジ（■#605020）は、橙の温かさを残しながら明るさと鮮やかさを抑えた、深みのある色です。Webサイトでは、ECサイトのキャンペーン見出し、クーポンカード、期間限定特集の主要ボタンなどに使うと、鮮やかなオレンジよりも落ち着いた強調色として扱いやすくなります。ただし、橙・ベージュ・茶系だけでまとめると、画面全体の明度差が小さくなり、価格や購入導線が周囲に埋もれることがあります。ここでは、ウォームアイボリー、ココアグレー、ダスティティールを合わせ、くすみのある橙を穏やかに引き立てながら、販促情報と本文を分けやすい配色を考えます。

明るいアイボリーを土台にし、ティールで穏やかな色相差を作る

■#605020には、背景用のウォームアイボリー■#F4F0EA、本文や補助文字用のココアグレー■#423B36、アクセント用のダスティティール■#9EBDB8を合わせる例が考えられます。

■#F4F0EAは黄みをわずかに含む明るい背景で、ダスキー・オレンジとの明度差を作りながら、真っ白よりもやわらかな面を作れます。■#423B36は低彩度の濃い茶系グレーなので、商品説明、条件文、注記を基準色より控えめに整理できます。■#9EBDB8は青緑寄りの低彩度色で、橙から色相を離しながら鮮やかさを上げすぎず、暖色に偏った画面へ静かな変化を加えられます。

キャンペーンLPでは、オレンジを価格の要点と主要操作に集める

実装では、特集カードやクーポンエリアの広い背景を■#F4F0EAにし、キャンペーン名、割引率の見出し、主要ボタン背景などへ■#605020を使います。本文や適用条件は■#423B36へ分けると、ダスキー・オレンジの役割を販促の要点と操作に限定できます。UI（ユーザーが操作するボタンや入力欄などの画面部品）の補助操作には、濃い■#605020の面に■#9EBDB8の小さなラベルや副ボタンを置き、その上の文字を■#423B36にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差です。■#605020と■#F4F0EAは約6.94:1、■#423B36と■#F4F0EAは約9.68:1、■#423B36と■#9EBDB8は約5.46:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#605020と■#9EBDB8は約3.91:1なので、濃いオレンジの面に置く意味のあるUI部品の境界として必要な3:1以上を確保できます。

ダスティティールは明るい背景上の文字や境界だけに頼らない

■#9EBDB8は、橙中心の画面へ穏やかな色相差を加えるアクセントです。広い面積に増やすより、濃い■#605020の中に置く短いラベルや副操作へ絞ると、ダスキー・オレンジの落ち着いた主役感を保ちやすくなります。

一方、■#9EBDB8と■#F4F0EAのコントラスト比は約1.77:1です。そのため、明るい背景上の通常文字には使わず、ボタンや入力欄の存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#605020や■#423B36の枠線・文字など、十分な明度差を持つ色を組み合わせます。