カラーコードとパレット
イエロー系の色一覧
イエローは穏やかなクリーム色から鮮やかなレモン、アースカラーのマスタードまで広がります。明るい黄色は視覚的に強く目を引くため、読みやすい濃い色の文字と組み合わせ、意図的なハイライトとして使うのが効果的です。
イエロー
#EAB308
カラー形式
同じベースカラーを主要な Web 形式で表しています。
濃淡
| カラー | 名前 | HEX | RGB | HSL | コピー |
|---|---|---|---|---|---|
| Cream | #FEFCE8 | 254, 252, 232 | 55, 92%, 95% | ||
| Ivory | #FEF9C3 | 254, 249, 195 | 55, 97%, 88% | ||
| Lemon Light | #FEF08A | 254, 240, 138 | 53, 98%, 77% | ||
| Lemon | #FDE047 | 253, 224, 71 | 50, 98%, 64% | ||
| Canary | #FACC15 | 250, 204, 21 | 48, 96%, 53% | ||
| Yellow | #EAB308 | 234, 179, 8 | 45, 93%, 47% | ||
| Mustard | #CA8A04 | 202, 138, 4 | 41, 96%, 40% | ||
| Gold Dark | #A16207 | 161, 98, 7 | 35, 92%, 33% | ||
| Olive Yellow | #854D0E | 133, 77, 14 | 32, 81%, 29% | ||
| Dark Yellow | #713F12 | 113, 63, 18 | 28, 73%, 26% | ||
| Lime Light | #F7FEE7 | 247, 254, 231 | 78, 92%, 95% | ||
| Lime Cream | #ECFCCB | 236, 252, 203 | 80, 89%, 89% | ||
| Lime Pale | #D9F99D | 217, 249, 157 | 81, 88%, 80% | ||
| Lime | #BEF264 | 190, 242, 100 | 82, 85%, 67% | ||
| Lime Bright | #A3E635 | 163, 230, 53 | 83, 78%, 55% | ||
| Chartreuse | #84CC16 | 132, 204, 22 | 84, 81%, 44% | ||
| Yellow Green | #65A30D | 101, 163, 13 | 85, 85%, 35% | ||
| Olive | #4D7C0F | 77, 124, 15 | 86, 78%, 27% | ||
| Army Green | #3F6212 | 63, 98, 18 | 86, 69%, 23% | ||
| Dark Olive | #365314 | 54, 83, 20 | 88, 61%, 20% |
CSS キーワード: yellow
CSS ではキーワード yellow で指定できます。
文字のコントラスト
これらの比率は WCAG の相対輝度の式で計算しています。
Aa 白い文字 1.92:1
不合格
Aa 黒い文字 10.95:1
AAA
イエローの使い方
ハイライト、バッジ、注意喚起
明るい印象のエディトリアルイラスト
ブラウンやネイビーと合わせた暖かいニュートラル配色
イエロー と相性のよい色
#EAB308 をもとにした色相環の配色。スウォッチをクリックしてコピーするか、カラーホイールで開けます。