ダークブラウンに合う色は？高級感を出す組み合わせ

ダークブラウンは黒に近い深さを持ちながら、赤みや黄みを含むことで少し温かさも感じられる色です。ただし、色名だけでは範囲が広いため、この記事では一例として ■#3B2A22 を基準にします。暗い色を広く使いすぎて重く見せるのではなく、明るい余白や低彩度の差し色を組み合わせ、落ち着きのある上品な方向へまとめる方法を紹介します。

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

■#3B2A22 のようなダークブラウンは、アイボリー ■#F8F3EB やグレージュ ■#D8CEC4 と合わせると、深い色を残しながら画面全体の明るさを確保しやすくなります。ページ全体を暗色で埋めるより、ダークブラウンは見出し、ナビゲーション、ヒーロー部分などに役割を絞り、明るい背景との面積差を作るのが扱いやすい方法です。

差し色を加える場合は、鮮やかな色を何色も置くより、彩度（色の鮮やかさ）を抑えたティール ■#315E5B や、装飾用の落ち着いたゴールド ■#A67C45 などを少量使うと、ダークブラウンの深さを邪魔しにくくなります。

高級感のある方向へまとめる3つの配色例

1. アイボリーとグレージュで明暗を整える

背景をアイボリー ■#F8F3EB、カードや補助面をグレージュ ■#D8CEC4、本文や見出しをダークブラウン ■#3B2A22 にします。コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は、ダークブラウンとアイボリーで約12.34:1、ダークブラウンとグレージュで約8.79:1です。明るい面を広く残しながら文字を深いブラウンにそろえるため、色数を増やさずに階層を作れます。

2. ダークブラウンの帯に明るい文字を置く

ヒーロー部分やフッターなどをダークブラウン ■#3B2A22 にし、文字を白 ■#FFFFFF にすると、コントラスト比は約13.63:1です。背景を暗くする場所を限定し、その周囲をアイボリー ■#F8F3EB に戻すと、ページ全体が重くなりすぎるのを抑えられます。ゴールド ■#A67C45 は通常文字ではなく、細い装飾線や小さな飾りなど補助的な用途に絞ると使いやすいでしょう。

3. ティールをボタンやリンクの差し色にする

主要ボタンやリンクには、低彩度のティール ■#315E5B を使う方法があります。アイボリー ■#F8F3EB 上のティールは約6.59:1、ティール背景に白 ■#FFFFFF を置く場合は約7.28:1です。ダークブラウンとは異なる色相（赤・黄・緑・青などの色み）を加えながらも彩度を抑えているため、ボタンだけを必要以上に派手にしにくい組み合わせです。

暗い色を増やしすぎず、文字のコントラストを確認する

ダークブラウンを使うときは、同じくらい暗い色を周囲に増やしすぎないことがポイントです。たとえばダークブラウン ■#3B2A22 とティール ■#315E5B のコントラスト比は約1.87:1なので、この2色を通常サイズの文字と背景として直接重ねるのには向きません。色みが違っていても明るさが近い場合があるため、文字は白 ■#FFFFFF や十分に明るい背景との組み合わせに切り替えます。

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