リッチ・オレンジに合う色は？深いオレンジを上品にまとめる配色【#B88F14】

リッチ・オレンジ（■#B88F14）は、鮮やかさを残しながら明るさを抑えた深いオレンジです。Webサイトでは、建築設計事務所の施工事例ポートフォリオで、選択中の事例カテゴリ、プロジェクト名、主要な「相談する」ボタンなどに使うと、写真を主役に残しながら深いオレンジを上品にまとめやすくなります。ここでは暗い背景を土台にし、オレンジを大きく広げすぎず、補助色と明るい文字色で役割を分ける配色を考えます。

チャコールスレートを土台にし、クリームとミューテッドティールで面積を分ける

■#B88F14には、広い背景用のチャコールスレート■#252C35、本文や見出し文字用のウォームクリーム■#FFF7E8、補助操作用のミューテッドティール■#7F9F9Bを合わせる例が考えられます。

■#252C35は低彩度の濃色なので、写真の周囲や事例一覧の背景を落ち着かせやすく、■#B88F14を限られた箇所へ置いたときの明度差も作れます。■#FFF7E8はわずかに黄みを含む明色で、暗い背景上の本文や見出しに使えます。■#7F9F9Bは青緑寄りの低彩度色なので、オレンジから色相を離しながらも強く競合しにくく、補助フィルターや二次操作に使いやすい組み合わせです。

施工事例ページでは、リッチ・オレンジを選択状態と主要操作に集める

実装では、写真ギャラリーやプロジェクト一覧の広い背景を■#252C35にし、本文やプロジェクト名は■#FFF7E8で表示します。選択中のカテゴリ、プロジェクト名のアクセント、主要な「相談する」ボタン背景へ■#B88F14を使い、その上の文字は■#252C35にします。UI（ユーザーが操作するボタンやカテゴリ切り替えなどの画面部品）の補助操作には、■#7F9F9Bを「図面を見る」などのボタン背景に使い、文字を■#252C35にすると、主操作と補助操作を色相で分けられます。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#FFF7E8と■#252C35は約13.23:1、■#252C35と■#B88F14は約4.68:1、■#252C35と■#7F9F9Bは約4.92:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、主要ボタンと暗い背景、補助ボタンと暗い背景もそれぞれ3:1以上あるため、意味のあるUI部品の境界として使えます。

上品にまとめるなら、オレンジとティールの色差だけで状態を伝えない

■#B88F14と■#7F9F9Bは明るさが近く、コントラスト比は約1.05:1です。そのため、「選択中」と「未選択」をこの2色の違いだけで伝えるのは避け、文字ラベル、太さの違う枠線、チェックマークなどを併用します。

また、明るい■#FFF7E8の面へ■#B88F14を小さい本文文字として置くと、コントラスト比は約2.83:1で通常文字の4.5:1に届きません。明るいセクションでは文字を■#252C35へ切り替え、オレンジは見出し横の装飾や十分な境界を持つ部品など、役割を限定して使います。HueRollでは■#B88F14をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。