ココアブラウンのカラーコード｜赤みとくすみを色見本で比べる

ココアブラウンは、赤みを含む落ち着いた茶色です。ただし「ココアブラウン」という色名だけでは、Webで使うHEXコードが一つに決まりません。資料による違いに加え、赤みを足した色と灰みを強めた色を比較すると、同じ茶系でも見出しや商品写真の周りの印象が変わります。今回は色見本と数値の違いを確認し、具体的なWebページでの使い方も紹介します。

資料別のココアブラウンと、赤み・くすみの色見本を比較する

I-IROではココアブラウンを「暗い灰みの黄赤」と説明し、■#74493A（RGB：赤116・緑73・青58）を掲載しています。カラーサイト.comでは■#875647（RGB：赤135・緑86・青71）が見本です。どちらも実際に掲載されている値ですが、同じ色名でも一致しません。

さらに比較用として、赤みをローズ寄りに変えた■#A05B68、彩度を抑えて灰みを強めた■#80716Dを作りました。後者の2色はこのページで作った提案色であり、資料がココアブラウンの標準値として掲載しているものではありません。HEX（ヘックス）は「#」と6桁の英数字で示すWebカラーコード、RGBは赤・緑・青の光の成分です。HSLは色相（色みの方向）・彩度（鮮やかさ）・明度（数式上の明るさ）で色を表す方式です。

表中のHSLはそれぞれのHEXから計算して整数に丸めた比較値です。資料に載る2色■#74493Aと■#875647は、コントラスト比が約1.25：1で明るさの差が小さい見本です。対して、赤みを加えた■#A05B68は色相が赤紫寄りへ移り、灰みを強めた■#80716DはHSL彩度が約8％まで下がります。彩度は「くすみ」を考える手掛かりですが、色相や周囲の背景によっても見え方は変わるため、数値だけで印象を決めないようにしましょう。

ココアのレシピページと文具の商品ページで色を変える

例A：ホットココアのレシピ紹介ページ。ページの大きな見出し帯をI-IROのココアブラウン■#74493Aにし、レシピ名は白■#FFFFFFで表示します。この組み合わせの文字コントラスト比は約7.62：1です。材料と手順は明るいクリーム色■#F3E7D9の面に濃いチャコール■#29262Aで置き、約12.27：1の比を確保します。「材料一覧を見る」ボタンはさらに濃い茶色■#643C34を背景にして、白■#FFFFFFの文字を合わせます。ボタン文字は約9.38：1、ボタン面とクリーム色の背景は約7.71：1です。赤みを含むココアブラウンを見出しに使いつつ、長い文章は明るい面に分けます。

例B：ヴィンテージ文具の商品紹介ページ。写真や商品説明の背景を温かいオフホワイト■#FAF5EDにし、本文はチャコール■#29262Aで表示します。文字と背景は約13.77：1です。落ち着いた雰囲気にしたい商品群では、灰みを強めた提案色■#80716Dを小さな装飾帯に使い、商品名や価格は濃い文字のままにします。新しいシリーズの短い「新入荷」ラベルを付けるなら、赤みを加えた提案色■#A05B68の面に白■#FFFFFFの文字を組み合わせる方法もあります。ラベル文字は約5.01：1です。色だけで新旧を区別せず、「新入荷」という言葉も残します。

例Aはココアブラウンを大きな見出しに、例Bは灰みのある色を装飾に限定した構成です。どちらも商品写真の色や文章量に合わせた提案であり、赤みが強いほどよい、彩度が低いほど上品、という一律の評価ではありません。

くすみを調整した後は、背景と文字のコントラストを再確認する

4つの茶色の面に白■#FFFFFFの文字を載せると、I-IROの見本■#74493Aが約7.62：1、カラーサイト.comの見本■#875647が約6.08：1、赤みを加えた提案色■#A05B68が約5.01：1、灰みを強めた提案色■#80716Dが約4.67：1です。いずれもWCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAで通常サイズの文字に必要な4.5：1以上ですが、最後の組み合わせは余裕が小さめです。大きな文字は3：1以上が基準です。

背景を替えると判定も変わります。I-IROのココアブラウン■#74493Aをクリーム色■#F3E7D9の上の通常文字に使うと約6.25：1となり、4.5：1の基準を上回ります。一方、オフホワイト■#FAF5EDの上では約7.02：1です。灰みを強めた提案色■#80716Dも、オフホワイト■#FAF5ED上の文字にすると約4.30：1で不足します。迷ったら本文はチャコール■#29262Aにし、茶色は帯や装飾に回します。

コントラスト比とは2色の相対的な明るさの差です。入力欄や選択状態など、操作部品の識別に必要な境界には、隣接色と原則3：1以上が求められます。今回の2つの資料のココアブラウンは相互に約1.25：1しかなく、色の差だけで状態を表す用途には向きません。HueRollではHEXで色を調整し、選んだ色と白・黒のコントラストを確認できますが、任意の2色の直接比較やWCAGの自動合否判定には対応していません。ここに挙げた組み合わせの値は別途計算しています。