ダーク・バーミリオンに合う色は？渋みのある赤橙を大人っぽくまとめる色合わせ【#7A411F】

ダーク・バーミリオン（■#7A411F）は、赤橙の温かさを残しながら明るさを抑えた深い色です。Webサイトでは、ホテルや旅館の客室紹介ページで、客室名、プラン見出し、主要な予約ボタンなどに使うと、鮮やかな赤橙よりも落ち着いた大人っぽさへ寄せやすくなります。ただし、木部や照明、夕景写真など暖色の写真が多いページでは、赤橙や茶系を重ねすぎると操作部分が写真に埋もれることがあります。ここでは、ウォームブラッシュ、チャコールトープ、ミューテッドセージを合わせ、渋みのある赤橙を主役にしながら客室情報を整理しやすい配色を考えます。

明るいブラッシュを土台にし、セージで暖色に静かな距離を作る

■#7A411Fには、背景用のウォームブラッシュ■#FFF5F1、本文や補助文字用のチャコールトープ■#443A37、アクセント用のミューテッドセージ■#AFC2B3を合わせる例が考えられます。

■#FFF5F1はわずかに赤みを含む明色で、バーミリオンとのつながりを残しながら客室説明や料金情報の面を軽くできます。■#443A37は暖色寄りの低彩度な濃色なので、設備、定員、チェックイン条件などを赤橙一色にせず整理できます。■#AFC2B3は緑寄りの低彩度色で、赤橙から色相を離しつつ鮮やかさを抑えているため、暖色の写真が続く画面へ静かな変化を加えられます。

客室・宿泊プランでは、バーミリオンを見出しと予約操作に集める

実装では、客室説明やプランカードの広い背景を■#FFF5F1にし、客室名、プラン見出し、主要な「予約する」ボタン背景などへ■#7A411Fを使います。設備説明や利用条件は■#443A37へ分けると、ダーク・バーミリオンを要点と主要操作へ限定できます。UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#7A411Fの面に■#AFC2B3の小さな副ボタンやラベルを置き、その文字を■#443A37にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#7A411Fと■#FFF5F1は約7.52:1、■#443A37と■#FFF5F1は約10.27:1、■#443A37と■#AFC2B3は約5.87:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#7A411Fと■#AFC2B3は約4.30:1なので、濃い赤橙の面に置く意味のあるUI部品の境界として必要な3:1以上も確保できます。

大人っぽくまとめるなら、空室状態と写真の暖色を色だけで整理しない

■#AFC2B3と■#FFF5F1のコントラスト比は約1.75:1です。そのため、明るい背景上の通常文字には使わず、ボタンやカードの存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#7A411Fや■#443A37の枠線・文字を組み合わせます。

また、「空室あり」「残りわずか」「満室」などの状態は、赤橙・緑などの色だけで区別せず、状態名の文字、アイコン、記号なども併用します。客室写真に木部や夕景などの暖色が多い場合は、赤橙の面積を増やすより、■#FFF5F1の余白や情報カードを十分に残すと、写真と操作を分けやすくなります。HueRollでは■#7A411FをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。