オレンジブラウンに合う色は？秋らしい配色の作り方

オレンジブラウンは、オレンジの温かさとブラウンの落ち着きを併せ持つ色です。ただし「オレンジブラウン」には幅があるため、この記事ではWebで再現しやすい基準色として、CSSの色キーワード sienna に対応するオレンジブラウン ■#A0522D を使います。秋を連想させる方向にまとめたい場合は、クリーム、オリーブ系、深い青緑などを役割ごとに分け、暖色だけで画面を埋めないことがポイントです。

オレンジブラウンは淡い背景と深い文字色を合わせると使いやすい

HSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、オレンジブラウン ■#A0522D は、色相約19.3度・彩度約56.1%・明度約40.2%です。鮮やかなオレンジより暗さがあるため、背景全面に強く広げるより、見出し、主要ボタン、バッジなどの強調色として使うと扱いやすくなります。

この基準色と白 ■#FFFFFF のコントラスト比は約5.62:1、黒 ■#000000 とは約3.74:1です。WCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1を基準にすると、今回のオレンジブラウンをボタン背景に使う場合は、黒より白文字の方が組み合わせやすいことが分かります。

秋らしくまとめやすい3つの配色例

1. クリーム＋エスプレッソで温かく落ち着かせる

背景をクリーム ■#FFF4E6、本文と見出しをエスプレッソブラウン ■#3B2A22、主要な強調をオレンジブラウン ■#A0522D にします。背景と文字のコントラスト比は約12.55:1です。同じ暖色寄りでも、背景は明るく、文字は十分に深くすると、温かさを残しながら情報を整理できます。

2. オートベージュ＋オリーブチャコールで自然にまとめる

背景をオートベージュ ■#F3EFE3、本文と見出しをオリーブチャコール ■#3F4A2F、強調をオレンジブラウン ■#A0522D にする組み合わせです。背景と文字は約8.18:1です。黄みを含むベージュと低彩度の緑を合わせると、色数を増やしすぎず、秋を意識した落ち着いた方向へ調整しやすくなります。

3. ペールブルーグレー＋ダークティールでオレンジブラウンを引き立てる

背景をペールブルーグレー ■#EEF3F3、本文と見出しをダークティール ■#2F4F4F、アクセントをオレンジブラウン ■#A0522D にします。背景と文字は約7.97:1です。暖色のオレンジブラウンに冷たい青緑系を少量合わせることで、色相差が生まれ、主要な強調色を見つけやすくできます。

秋らしさは色数より面積と明度差で調整する

秋らしい雰囲気を作ろうとして、オレンジ、赤、黄色、ブラウンを同じ強さで並べると、どこを見ればよいか分かりにくくなることがあります。基準のオレンジブラウン ■#A0522D を強調色に決めたら、背景は淡く、本文は深くし、近い暖色は装飾や小さな面積に絞るとまとまりやすくなります。

広い背景にもオレンジ系を使いたい場合は、基準色そのものを全面に敷くのではなく、ティントや彩度を抑えた黄みの背景へ置き換え、基準色はボタンや見出しへ残す方法があります。また、写真に赤茶や黄葉などの暖色が多いときは、本文色や余白を無彩色・青緑系へ寄せると、写真とUIが競合しにくくなります。

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