黄蘗色とは?読み方・名前の由来・カラーコード

TIPS

黄蘗色は「きはだいろ」と読む、少し緑みを帯びた明るい黄色です。昔から使われてきた植物染料に由来する色名ですが、Webで使う色見本の数値は資料によって異なる場合があります。読み方と名前の背景を確かめ、代表的なカラーコードと、文字・背景に組み合わせる方法を紹介します。

黄蘗色の読み方と、キハダの木に由来する名前

黄蘗色は一般に「きはだいろ」と読み、辞典には「きわだいろ」という読み方もあります。「黄檗色」と書かれることもあります。黄蘗(キハダ)はミカン科の木で、その樹皮の内側が黄色いことから、古くから黄色い染料として利用されてきました。「おうばく」は木や生薬としての呼び方にも使われますが、色名を読むときは「きはだいろ」が基本です。

奈良国立博物館の正倉院展用語解説では、キハダの内皮を砕いて煮出した染料が経巻の紙にも使われ、虫を防ぐ効果を期待したと考えられることが説明されています。黄蘗色という名前は、そうした染色の材料に結び付いた呼び名です。画面上の色は樹皮そのものを測定した値ではありません。

黄蘗色のHEXコードと色見本を比べる

HEX(ヘックス)は、Webの色を「#」と6桁の英数字で示すカラーコードです。和色大辞典は「黄檗色」の見本として#FEF263を掲載しています。一方、日本伝統色図鑑には#F9E577の例もあります。RGBは赤・緑・青の光の成分を数値で示す方法です。

黄蘗色の見本A

#FEF263

RGB 254・242・99|和色大辞典

黄檗色の見本B

#F9E577

RGB 249・229・119|日本伝統色図鑑

見本Aの#FEF263は黄緑寄りの明るさがあり、見本Bの#F9E577は少し穏やかな黄色に見えます。2色のコントラスト比は約1.10:1で、並べたときの明るさの差は小さめです。コントラスト比とは、隣り合う2色の相対的な明るさを比べた数値です。色名だけで判断せず、採用した資料とHEXをセットで記録すると、制作中の色のずれを防ぎやすくなります。

例A:植物染めの工程を紹介するWeb記事。ページ背景は温かいオフホワイト#F8F5ED、本文は濃いチャコール#26312Dにします。染色の「材料」や「工程」を示す短い見出し帯に黄蘗色#FEF263を置き、見出し文字はチャコール#26312Dにします。本文と背景は約12.36:1、黄色い帯と見出し文字は約11.60:1です。写真のそばに黄色を小面積で添え、解説の読み順を妨げない構成です。

例B:古文書展示の案内バナー。背景を深い青緑#234843にして、展示名と会期をオフホワイト#F8F5EDで表示します。「展示情報を見る」ボタンはもう一つの黄蘗色の見本#F9E577を背景に使い、文字をチャコール#26312Dにします。バナーの文字と背景は約9.27:1、ボタン文字と黄色の面は約10.58:1、ボタンの黄色と周囲の青緑は約7.94:1です。

明るい黄色に白文字を載せず、境界も確認する

黄蘗色#FEF263に白#FFFFFFの文字を載せるとコントラスト比は約1.16:1です。WCAG(Webコンテンツを利用しやすくするための指針)2.2のレベルAAが通常サイズの文字に求める4.5:1以上には届きません。大きな文字の基準も3:1なので、今回の黄色い面には濃い文字を使います。

また、黄蘗色#FEF263とオフホワイト#F8F5EDの面同士は約1.07:1しかありません。情報を分ける枠や操作部品の輪郭として境界が必要なら、濃い線や十分な余白を加えます。操作部品を識別するのに必要な視覚情報は、隣接する色と原則3:1以上が目安になります。

HueRollではHEXを入力して色を調整し、選んだ色と白・黒とのコントラストを確認できます。ただし、任意の2色の比較やWCAGの自動合否判定はできません。掲載した配色は実際に使う文字色と背景色の組み合わせを別途計算しています。