バーントオレンジに合う色は？深みを活かした配色

バーントオレンジは、鮮やかなオレンジよりも深く落ち着いた印象を作りやすい色です。ただし色名だけでは幅があるため、この記事ではWebで扱う基準色としてバーントオレンジ ■#CC5500 を使います。深みを活かすには、近い暖色を増やしすぎず、明るい背景と十分に暗い文字色を組み合わせて、バーントオレンジの役割をはっきりさせることが大切です。

バーントオレンジは明るい背景と深い文字色に合わせると使いやすい

HSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、基準のバーントオレンジ ■#CC5500 は、色相25度・彩度100%・明度40%です。オレンジらしい温かさを残しつつ暗さもあるため、背景の一部、ライン、バッジ、装飾などのアクセントとして使うと、鮮やかなオレンジより落ち着いた印象にまとめやすくなります。見出しや重要な数字の文字色は、まず十分に濃い色を基本にします。

文字を重ねる場合はコントラストの確認が必要です。バーントオレンジ ■#CC5500 と黒 ■#000000 のコントラスト比は約4.87:1、白 ■#FFFFFF とは約4.31:1です。さらに、この記事の例示背景に #CC5500 を文字色として使う場合のコントラスト比は約3.77〜3.95:1です。WCAG 2.2では通常文字に4.5:1、大きな文字に3:1が必要なため、通常サイズの見出しや重要な数字は濃色にします。バーントオレンジを文字色にする場合は、実際の背景との比が3:1以上であることを確認したうえで、通常の太さで24px以上、太字で約18.67px以上の大きな文字に限定します。

深みを活かしやすい3つの配色例

1. クリーム＋ダークブラウンで温かくまとめる

背景をクリーム ■#FFF3E6、本文と見出しをダークブラウン ■#2F241F、強調をバーントオレンジ ■#CC5500 にします。背景と文字のコントラスト比は約13.79:1です。黄みのある明るい背景と深い茶系を土台にすると、バーントオレンジの温かさを残しながら、画面全体を落ち着かせやすくなります。

2. セージ系背景＋ディープオリーブで自然に見せる

背景を淡いセージ ■#EEF1E6、本文と見出しをディープオリーブ ■#303C2F、アクセントをバーントオレンジ ■#CC5500 にする組み合わせです。背景と文字は約10.13:1です。オレンジとは異なる低彩度の緑を加えることで、暖色だけで固めるよりも自然な変化を作れます。

3. ペールブルーグレー＋ディープティールで引き締める

背景をペールブルーグレー ■#EEF3F5、本文と見出しをディープティール ■#263F4A、強調をバーントオレンジ ■#CC5500 にします。背景と文字は約9.92:1です。冷たい青緑系を土台にすると、バーントオレンジの暖かさが相対的に際立ち、ボタンや重要な情報を見つけやすくできます。

深い色ほど面積と文字コントラストを分けて考える

バーントオレンジは大きな面積で使うほど存在感が強くなります。ページ全体の背景へ広げるより、購入や申込みを促す主要ボタン（CTA）の背景、バッジ、区切り線など役割を限定した方が、深みを活かしやすくなります。見出しや重要な数字は濃色を基本にし、バーントオレンジの文字を使う場合だけ、上記の大きな文字の条件を満たすか確認します。広い背景に使いたい場合は、ティントや低彩度のオレンジ系へ調整し、基準のバーントオレンジは小さな強調として残す方法があります。

また、ブラウンや赤など近い暖色を追加するときは、同じ明るさの色を並べすぎないことも重要です。背景は明るく、本文は暗く、バーントオレンジは強調というように明度差と役割を分けると、色数が増えても散らかりにくくなります。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。バーントオレンジを選んだら、候補色をすべて使うのではなく、「背景」「本文」「強調」の役割を先に決めてから絞り込むと実用的です。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。