琥珀色はどんな色？Webで使うカラーコードと配色例

琥珀色（こはくいろ）は、琥珀という樹脂の化石に由来する、赤みを帯びた黄褐色の呼び名です。Webではオレンジと茶色の中間のような色として、見出しの装飾や小さなラベルに取り入れられます。ただし、琥珀色を文字色にすると、背景によっては明るさの差が足りません。まず色見本とカラーコードを確認し、商品紹介ページでどのように使うか考えましょう。

琥珀色は赤みのある黄褐色。HEXとRGBで違いを確認する

和色大辞典で紹介される琥珀色の例は■#BF783Aで、RGBでは赤191・緑120・青58です。RGBは赤・緑・青の光の成分を数値で表す方法、HEX（ヘックス）はそれを「#」と6桁の英数字で指定する方法です。一方、色名資料I-IROの例は■#B07C44です。色名だけで唯一のコードが決まるわけではないため、Web制作では採用した数値を共有することが大切です。

次の3色は、基準例を中心に明るさを変えた色見本です。上と下の2色は比較のために作った調整例であり、それぞれが正式な伝統色として定義されているわけではありません。

明るい■#E7B778は黄みを感じやすい方向、基準の■#BF783Aは赤みと茶色みを含む方向、濃い■#77431Eは深みを足した方向です。色見本の中に表示するコードも背景とのコントラストを確認しており、明るい色見本と濃い文字■#2D3436は約6.91:1、基準色と暗い文字■#141414は約5.23:1、濃い色見本と白■#FFFFFFは約8.06:1です。

琥珀色のガラス雑貨を紹介するWebページの配色例

例えば琥珀色のガラス製の一輪挿しの商品ページなら、写真を主役にし、周囲の広い背景は温かいオフホワイト■#FAF6EEにします。見出しには濃いチャコール■#2D3436、商品説明には青みのある濃いグレー■#37464Aを使います。背景との比率は見出しが約11.76:1、本文が約9.11:1で、琥珀色を文章の色に使わなくても全体をまとめられます。

• 色名のラベル：写真の横に「琥珀色」と書いた小さなラベルを置き、背景を琥珀色■#BF783A、文字をほぼ黒の■#141414にします。文字とラベルの比は約5.23:1、ラベルと周囲のオフホワイト■#FAF6EEは約3.27:1です。色だけで種類を伝えず、名称も明記します。
• 仕様を載せるカード：寸法や素材をまとめるカードは白■#FFFFFFにします。周囲のオフホワイト■#FAF6EEとの比は約1.08:1なので、輪郭が必要な場合は青みのあるグレー■#687B7Dの線を添えます。線と白は約4.45:1、線とオフホワイトは約4.13:1です。
• 購入ボタン：琥珀色をさらに濃くした茶系■#77431Eを塗り面にして、白■#FFFFFFの文字を載せます。文字とボタンの比は約8.06:1、ボタンと周囲のオフホワイト■#FAF6EEの比は約7.48:1です。ラベルとボタンの色に濃淡差を付けると、役割を分けられます。

商品仕様の補足欄には、淡いブルーグレー■#E2EAEBを少し添える案もあります。暖色の琥珀色とは違う色みを控えめに加え、説明をまとめるための面です。この背景に濃いグレー■#37464Aの文字を置いた比率は約8.05:1です。ただし、オフホワイト■#FAF6EEとの面同士の差は約1.13:1なので、境界が必要なら余白や見出しも活用します。

琥珀色を文字に使う場合は明るさの差を確認する

基準の琥珀色■#BF783Aをオフホワイト■#FAF6EE上の通常文字にすると、コントラスト比は約3.27:1です。逆に琥珀色■#BF783Aを背景にして白■#FFFFFFの文字を使っても約3.52:1にとどまります。コントラスト比は文字と背景の相対的な明るさの差を表す値で、どちらの組み合わせも通常の文字には不足します。

WCAG（Webコンテンツを多くの人が利用しやすくするための指針）2.2のレベルAAでは、通常文字には原則4.5:1以上、大きな文字には3:1以上のコントラスト比が求められます。色見本の装飾と、内容を読む文字の色は別々に決めましょう。ボタンや輪郭も、文字と面、面と周囲を分けて確認します。

琥珀やガラスに見られる透明感や光の反射は、単色のHEXコードだけでは表現できません。実物の質感は写真で伝え、画面の琥珀色はラベルや装飾をそろえる目的で使うと整理しやすくなります。

HueRollではHEXを入力して調整し、RGBなどの数値や配色候補、選択色と白・黒のコントラストを確認できます。ただし色名の直接入力、任意の2色同士の比較、WCAGの自動判定には対応していません。今回の配色例は隣り合う2色ごとに別途コントラストを計算しました。