鬱金色とはどんな黄色？名前の由来と似た色との違い
鬱金色（うこんいろ）は、少し橙色に寄った鮮やかな黄色です。山吹色や菜の花色と似ていますが、色みや明るさには違いがあります。この記事では名前の由来を確かめ、鬱金色#FABF14、山吹色#F8B500、菜の花色#FFEC47を並べて比較します。色名にはさまざまな色見本があるため、ここでのHEX（ヘックス：Webの色を6桁の英数字で示すコード）は比較用の具体例です。
鬱金色はウコンの染め色に由来する黄色
「鬱金」は、香辛料のターメリックとしても知られる植物のウコンを指します。鬱金色という名前は、ウコンの根茎を利用して染めた強い黄色に由来します。黄みの中に温かみを感じる色ですが、「鬱金色なら必ずこの1色」と決まっているわけではなく、資料や染めの条件によって色見本は変わります。
今回取り上げる鬱金色#FABF14は、RGBで赤250・緑191・青20です。RGBは画面の色を赤・緑・青の3つの光の成分で表す形式で、それぞれ0～255の数値を使います。赤と緑が高く、青が少ないため、明るい黄の中に橙色の方向を感じる色見本です。Web制作では名前だけではなく、採用するHEXコードまで決めて共有すると色違いを防ぎやすくなります。
山吹色・菜の花色と並べて違いを見る
似た黄色でも、同じ面積で並べると違いを確認できます。次の3色を今回の比較見本とします。
- 鬱金色#FABF14：赤250・緑191・青20。3色の中では山吹色とかなり近く、温かみのある強い黄色です。
- 山吹色#F8B500：赤248・緑181・青0。今回の鬱金色より緑と青の数値が低く、少し暗く、橙色寄りに見えます。
- 菜の花色#FFEC47：赤255・緑236・青71。緑と青の数値が高く、残りの2色より明るく、黄みが前に出る見本です。
鬱金色と山吹色は特に近いため、小さな色見本だけで別の情報を示すのは避け、「鬱金色」「山吹色」と文字でも名前を添えましょう。色の差は周囲の背景や画面の表示条件でも見え方が変わります。色名から受ける印象だけでなく、実際に使う色コードを確認することが大切です。
Webで使うときは黄色の上の文字色に注意する
例えば、草木染めの体験講座を紹介するページなら、本文の背景を温かいオフホワイト#FAF7EFにし、見出しと説明文を濃い墨茶色#302B23にします。この文字と背景のコントラスト比は約13.12:1です。コントラスト比は、文字などと隣接する背景の明るさの差を数値で示します。
冒頭の案内帯だけを鬱金色#FABF14にして、講座名を墨茶色#302B23で表示すると約8.38:1です。「申し込む」ボタンは濃い青#27415Aを背景にオフホワイト#FAF7EFの文字を載せると約9.86:1になり、ボタンと鬱金色#FABF14の帯との比も約6.30:1です。黄色は大きな案内面、青は操作する場所と分ける構成です。
反対に、鬱金色#FABF14の上の白#FFFFFFの文字は約1.68:1で、通常の文字には不十分です。また、鬱金色とオフホワイト#FAF7EFの差は約1.57:1なので、黄色い小さな操作部品を淡い背景に置くなら、濃い枠や文字だけでなく形や配置でも区別します。
WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常の文字は4.5:1以上、大きな文字は3:1以上のコントラスト比が原則です。意味を伝える操作部品や図形には、隣接色との3:1以上が必要な場合もあります。HueRollではHEX入力で色を選び、白・黒とのコントラスト比を確認できますが、任意の2色同士の比較やAAの自動判定はできません。最終的な組み合わせは別途確認しましょう。