栗色とブラウンはどう違う？赤みと明るさを見比べる

栗色とブラウンは、どちらも茶色の仲間です。しかし、色見本を並べると赤みや明るさに違いがあります。Webサイトで選ぶときは、色名の印象だけではなく、同じ背景の上に置いて比べることが大切です。栗色の由来と代表的なコードを確認し、商品ページと告知バナーでの使い分けを紹介します。

栗色は具体的な和色名、ブラウンは幅広い茶色の呼び方

栗色（くりいろ）は栗の実の表皮に由来する赤みのある暗い茶色です。「和色大辞典」では■#762F07、「I-IRO」ではやや明るく灰みのある■#74493Aを色見本にしています。伝統色の名前に唯一のデジタル値があるわけではありませんが、前者は赤み・橙みが強く、後者はやや灰みがかった茶色です。

一方、ブラウンは明るい茶色から暗い茶色までを含む広い呼び方で、栗色もその一種と考えられます。ただしCSS（Webページの見た目を指定するスタイルの仕組み）にある色名「brown」は■#A52A2Aという決まった値です。ここではこのCSSの「brown」を比較相手にします。HEX（16進数で色を指定するコード）でそろえて比較すれば、曖昧な色名の違いを整理できます。

RGB（赤・緑・青の強さを0～255で表す色の形式）で見ると、栗色■#762F07は赤118・緑47・青7、CSSのbrown■#A52A2Aは赤165・緑42・青42です。栗色は緑が青より多く、橙みを含む濃い茶色です。CSSのbrownは赤の成分が多く、色相は赤寄りで、今回の2色ではこちらのほうが明るくなります。赤みだけでなく明るさも一緒に比べましょう。

同じ茶色でも使う場所で変わる配色例

栗色を使う焼き菓子の商品ページ

落ち着いた商品紹介では、ページ背景にアイボリー■#FAF5ED、見出しに栗色■#762F07、本文に濃いグレー■#302A25を使います。アイボリーと栗色のコントラスト比（隣り合う色の明るさの差）は約8.88:1、本文色との比は約13.04:1です。栗色の面積を見出しや購入ボタンに絞ると、写真や説明文を邪魔しにくくなります。

補足のラベルには淡い金色■#EACD92を置き、濃いグレー■#302A25の文字を載せると約9.20:1です。ただし金色とアイボリーの差は約1.42:1なので、重要な囲みには濃い茶灰■#8B6A56の枠を使うか、余白と「ポイント」などの見出しを添えます。栗色■#762F07の購入ボタンに白■#FFFFFFの文字を置く場合、文字とボタン背景は約9.63:1です。

CSSのbrownを使うキャンペーンバナー

赤みを少し強く見せたい告知では、背景を淡いグレーベージュ■#F5F0E8、見出しをCSSのbrown■#A52A2A、本文を濃いグレー■#302A25にします。見出しと背景の比は約6.24:1、本文と背景は約12.48:1です。栗色を使う例よりも、赤寄りの茶色を見出しや短い強調部分に配置する案です。

強調帯をCSSのbrown■#A52A2Aで塗り、白■#FFFFFFの文字を載せると約7.08:1です。案内欄には淡いベージュ■#EEE0CCと濃いグレー■#302A25を組み合わせると、文字との比は約10.90:1になります。案内欄の輪郭が必要なら茶灰■#8B6A56で区切ると、ベージュとの比は約3.77:1です。

赤みと明るさは、隣り合う色も含めて確認する

今回の栗色■#762F07とCSSのbrown■#A52A2Aを直接重ねた場合のコントラスト比は約1.36:1です。どちらも濃いからといって、2色だけで図表の線や状態を区別できるとは限りません。同じ背景に別々に置いて比較し、図表ではラベルや線種も加えましょう。色の印象は背景と使う面積によっても変わります。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常の文字は背景に対して4.5:1以上、大きな文字は3:1以上が基準です。HueRollでは色名を直接入力するのではなくHEXで色を指定し、関連する配色候補と選択色の白・黒に対するコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、完成した組み合わせは別途検証してください。