イエローのカラーコード（黄色系の色）

黄色は鮮やかな色の中で最も明るく、淡いレモンシフォンから濃いマスタードやサフランまで幅があります。このページでは、yellow、gold、lightyellow、khakiといったCSSの色名の黄色7色に、カナリア、レモン、マスタード、サフラン、ジョンキル、ナポリイエロー、サイバーイエロー、スクールバスイエローを加えた27色の黄色を、HEX・RGB・HSL・HSV・CMYK・OKLCHのコード、ティントとシェード、白地の上の文字として使ったときの見え方とともに紹介します。

使い方

1. リストから黄色系の色を選びます。
2. HEX、RGB、HSL、またはCMYKのコードをコピーします。
3. 「白地の上の文字として」を確認します。ほとんどの黄色は背景やハイライトにしか使えません。
4. より暗く読みやすいバージョンは、シェードの表を使います。

計算式

コントラスト比 = (L₁ + 0.05) ÷ (L₂ + 0.05) · シェード = c × (1 − p)

LはWCAGの相対輝度です。黄色がこれほど明るいのは、目が最も敏感な緑のチャンネルがほぼ最大の強さだからです。白地の上で黄色を読みやすくするには、暗くする（シェードにする）しかありません。

計算例

マスタード #FFDB58 = rgb(255, 219, 88) の相対輝度は0.726なので、白地の上の文字にすると 1.35:1 にとどまり、WCAGの最低基準4.5:1を大きく下回ります。純粋なCSSの yellow は白に対してわずか1.07:1ですが、黄色の背景の上の黒い文字は 19.55:1 に達します。