卵色とは？名前の由来とカラーコードを紹介

卵色（たまごいろ）は、卵の黄身を思わせる、少し赤みを含んだ明るい黄色の色名です。ただし、資料によってカラーコードが異なり、辞書には卵の殻の色を指す用法もあります。この記事では名前の由来と代表的なHEXコードを整理し、卵料理のレシピページで色を使うときの文字色や背景の選び方を紹介します。

卵色の由来は卵の黄身。資料によってコードが異なる

色名資料のI-IROでは、卵色を卵の黄身に由来する「明るい赤みの黄」と説明しています。和色大辞典の例は卵色■#FCD575、I-IROの例は卵色■#F3C06Eです。両者のRGB値はそれぞれ赤252・緑213・青117と、赤243・緑192・青110です。RGBは画面の色を赤・緑・青の光の強さで表す方式、HEX（ヘックス）は「#」と6桁の英数字で指定する形式です。

2つの卵色■#FCD575と■#F3C06Eのコントラスト比は約1.19:1で、色みは近いものの、明るさは異なります。色名だけで唯一の数値が決まるわけではないため、サイト内の見出しや色見本には、どちらを採用するか決めて統一しましょう。この記事の配色例では和色大辞典の値を基準にします。

一方、国語辞典には「卵色」が卵の殻の白茶色を指す用法も載っています。色名資料では黄身に由来する卵色と、殻を連想する鳥の子色（とりのこいろ）を分けて説明する例があります。I-IROの鳥の子色は■#EFE3B6で、黄みを帯びた白に近い色です。

卵色■#FCD575と鳥の子色■#EFE3B6の比は約1.10:1です。どちらも明るいものの、卵色は黄みがはっきりし、鳥の子色は淡くくすんだ黄みを帯びています。色見本のコード文字には濃いチャコール■#342F29を使い、3つの色見本の中で最も暗いI-IROの卵色の面でも約7.94:1の差を確保しています。

レシピページでは卵色を見出しの面や料理ラベルに使う

例えば、朝食の卵料理を紹介するレシピページを考えます。料理の写真を主役にし、写真に見出しを直接重ねず、写真の外側の色を決めます。ページ全体の背景は温かいオフホワイト■#FAF7EF、見出しと本文は濃いチャコール■#342F29を基本にすると、本文と背景の比は約12.38:1です。

• 卵色を主役にする案：特集タイトルを囲む横長の見出し面を卵色■#FCD575にして、タイトルは濃いチャコール■#342F29にします。この文字と卵色の比は約9.41:1です。各料理の写真は下に並べ、「卵料理」という短いラベルにも卵色を使います。レシピを見るボタンは深いブラウン■#593E2Eの面に白■#FFFFFFの文字を載せ、文字とボタンは約9.75:1、ボタンと卵色の見出し面は約6.93:1の差があります。
• 鳥の子色を背景にする案：レシピ一覧のまとまりを鳥の子色■#EFE3B6の広い面にし、見出しは深いブラウン■#593E2Eを使います。見出しと背景の比は約7.59:1です。卵色■#FCD575は「今週のおすすめ」などの小さなラベルに絞り、ラベル文字は濃いチャコール■#342F29にします。ラベルと鳥の子色の面同士の差は約1.10:1なので、輪郭が必要なら濃いオリーブブラウン■#69553Dの枠を加えます。枠線と鳥の子色は約5.50:1、卵色とは約5.03:1です。

前者は卵料理の特集名を目立たせたいとき、後者は複数のレシピを淡い背景でまとめたいときの一例です。「卵料理」「今週のおすすめ」などの情報は、色だけでなく文字でも示します。写真の中の卵の色は撮影条件や料理によって異なるため、写真自体の色とWebの色指定を同じものと決めつけないようにします。

白文字と淡い背景の境界は別々に確認する

卵色■#FCD575の上に白■#FFFFFFの文字を載せると、コントラスト比は約1.41:1です。通常の文字はもちろん、大きな文字の基準にも足りません。文字を読みやすくするには、今回のように濃いチャコール■#342F29を使います。

卵色■#FCD575とオフホワイト■#FAF7EFの面同士の差も約1.32:1にとどまります。また、鳥の子色■#EFE3B6とオフホワイト■#FAF7EFは約1.20:1しかありません。カードを背景から区別する必要があるなら、濃いオリーブブラウン■#69553Dなどの輪郭を足す方法があります。この線はオフホワイトと約6.61:1の差があります。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が求められます。操作部品を識別するために必要な視覚的手がかりにも、隣り合う色と原則3:1以上のコントラストが必要です。ただし、飾りだけのカードや線のすべてに同じ基準がかかるわけではありません。

HueRollではHEXコードを入力して色を調整し、RGBなどの数値や配色候補、選択した色と白・黒のコントラストを確認できます。色名の直接入力、任意の2色同士の比較、WCAGの自動合否判定には対応していません。今回の色名資料のコードは参考例とし、提案した文字・背景・枠線の組み合わせは別途計算しています。