ブラウンに合う色は？落ち着きのある配色例

ブラウンは、赤・黄・黒などの要素を含む幅広い色の呼び方で、明るさや赤みの強さによって印象が変わります。この記事では一例として中程度の明るさのブラウン ■#7A563A を基準にします。落ち着きを出したいときは、ブラウンだけで画面を埋めるのではなく、明るい背景と低彩度の差し色を組み合わせ、色ごとの役割を分けるのがポイントです。

ブラウンには明るいニュートラルと低彩度色を合わせる

■#7A563A のようなブラウンは、ウォームオフホワイト ■#FAF5EE や淡いグレーベージュ ■#E6E0D6 と組み合わせると、温かさを残しながら背景と文字の役割を分けやすくなります。本文にはチャコールブラウン ■#2E2824 を使い、ブラウンは見出し、主要ボタン、カードの見出しなどに絞ると、ページ全体が茶色一色に見えるのを防げます。

差し色には、彩度（色の鮮やかさ）を抑えたセージ系の深い緑 ■#465B55 や、くすんだバイオレット ■#5B5266 が候補です。ブラウンとは色みが違っても、鮮やかさを抑えた色を選ぶことで、強いコントラストを作りすぎず落ち着いた変化を付けられます。

落ち着きのある3つの配色例

1. オフホワイトとチャコールで基本を整える

背景をウォームオフホワイト ■#FAF5EE、本文をチャコールブラウン ■#2E2824、見出しや主要ボタンをブラウン ■#7A563A にします。コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は、本文と背景で約13.40:1、ブラウンと背景で約6.01:1です。ブラウン背景に白 ■#FFFFFF を置く場合も約6.52:1あるため、通常サイズのボタン文字にも使いやすい組み合わせです。

2. 淡いグレーベージュとセージで自然に変化を付ける

カードや補助セクションの背景を淡いグレーベージュ ■#E6E0D6、本文をチャコールブラウン ■#2E2824 にすると、コントラスト比は約11.07:1です。リンクや補助ボタンに深いセージ ■#465B55 を使う場合、ウォームオフホワイト ■#FAF5EE との比率は約6.70:1、白 ■#FFFFFF をセージ背景に置く場合は約7.27:1です。ブラウン中心の暖色だけでまとめず、落ち着いた緑を1色足すことで自然な変化を作れます。

3. くすみバイオレットを小さなアクセントにする

キャンペーン名や短いラベルなど、限られた場所にくすみバイオレット ■#5B5266 を使う方法もあります。ウォームオフホワイト ■#FAF5EE 上では約6.81:1、白 ■#FFFFFF をバイオレット背景に置く場合は約7.38:1です。セージとバイオレットを同じ強さで併用せず、どちらかを主な差し色にすると、色数を抑えたままページに変化を付けやすくなります。

ブラウンと差し色を直接重ねる前に明るさを確認する

ブラウン ■#7A563A とセージ ■#465B55 のコントラスト比は約1.11:1、ブラウンとくすみバイオレット ■#5B5266 は約1.13:1です。色相（赤・黄・緑・青などの色み）が違っていても明るさが近いため、この2色を通常サイズの文字と背景として直接重ねるのは避けます。差し色はボタンやリンクなど独立した要素に使い、文字は白 ■#FFFFFF やチャコールブラウン ■#2E2824 など、隣接する背景とのコントラストを確認した色へ切り替えます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上のコントラスト比が求められます。HueRollではブラウン ■#7A563A を6桁のHEX（Webで色を表す16進数コード）で入力し、ティント、シェード、補色、類似色、各種配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、この記事で示した2色間の比率は別途計算した値です。