胡桃色とは？色見本・カラーコード・組み合わせ例
胡桃色（くるみいろ）は、赤みや黄みを含む落ち着いた茶色の名前です。Webで使うときは、色名だけで決めるより、具体的な色見本とカラーコードを選ぶと仕上がりを共有しやすくなります。この記事では胡桃色の由来と2つの色見本を比べ、草木染め作品の展示案内ページに使える背景・文字・ボタンの組み合わせを紹介します。
胡桃色とは？樹皮や果皮による染色に由来する茶色
胡桃色は、クルミの樹皮や果皮を使って染めた、黄みや赤みを帯びた茶色を指します。古くから布や紙の染色に使われ、国語辞典には平安時代の『蜻蛉日記』に胡桃色の紙が登場する例も載っています。食べるクルミの実の中身だけを表した色名ではなく、染め色としての背景を持つ言葉です。
色の濃さは染める材料や条件で変わり、デジタルの色見本にも資料差があります。和色大辞典では胡桃色#A86F4C、別の色名資料では#9D6757が掲載されています。HEX（ヘックス）とはWebで色を6桁の英数字で指定する形式です。どちらも見本の一例なので、「胡桃色」という名前だけで一つのHEX値に決まるわけではありません。
前者の胡桃色#A86F4CはRGBで赤168・緑111・青76、後者#9D6757は赤157・緑103・青87です。RGBとは画面の色を赤・緑・青の光の成分で表す方法です。今回の見本では前者の方が黄み・橙みを感じやすく、後者はやや赤みと灰みを感じる茶色です。2色のコントラスト比は約1.12:1で、明るさの差は小さくなっています。
草木染め作品の展示案内ページに使う組み合わせ例
例1：胡桃色を冒頭の背景にする。「草木染めの布と紙の展示」という見出しを載せる案内帯を胡桃色#A86F4Cにします。見出しと短い説明を黒#000000で表示すると、文字と背景のコントラスト比は約5.04:1です。作品の説明や開催日時は淡い紙色#FAF6EFのエリアに移し、本文を濃い墨色#2B3029で表示すると約12.52:1になります。
「展示内容を見る」ボタンは紙色#FAF6EFの上に濃い茶色#563728で置き、白#FFFFFFの文字を使います。ボタン内の文字と背景の比は約10.64:1、ボタンと周囲の紙色の比は約9.88:1です。中間的な明るさの胡桃色を大きな面にし、詳しい文字と操作部分は明暗差を大きくして分けます。
例2：明るい背景に胡桃色を少量使う。長い展示解説を読んでもらうページでは、背景を紙色#FAF6EFにして、見出しを濃い茶色#563728、本文を墨色#2B3029にします。見出しと背景は約9.88:1です。開催日時のカードは薄いベージュ#F0E5D6にし、文字は墨色#2B3029のままにすると約10.84:1になります。
カードの輪郭にもう一方の胡桃色#9D6757を使うと、枠と内側のベージュ#F0E5D6は約3.74:1、外側の紙色#FAF6EFとは約4.32:1です。胡桃色を全面に敷く代わりに、必要な情報の境界に使う方法です。
白文字と近い茶色同士の区別に注意する
胡桃色#A86F4Cに白#FFFFFFの通常サイズの文字を載せた場合、コントラスト比は約4.16:1で、通常文字の基準には届きません。また、この胡桃色を紙色#FAF6EFの上の小さな文字にすると約3.87:1です。今回の例では黒や濃い茶色を使い、文字の色を背景ごとに確認します。
2つの胡桃色#A86F4Cと#9D6757は約1.12:1の差しかないため、「予約受付中」「受付終了」をこの2色だけで表さず、文字や形も併用します。淡い紙色#FAF6EFとベージュ#F0E5D6の差も約1.15:1と小さく、カードの境界が必要な場合は枠や余白で補いましょう。
WCAG 2.2というWebのアクセシビリティ指針のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上のコントラスト比を求めています。操作に必要な枠など、文字以外の重要な表示には隣接色との3:1以上が必要な場合もあります。HueRollではHEXを入力して選択色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。実際に隣り合う色は別途確認してください。