#FFFF00
Yellow — カラーコードとパレット
#FFFF00 · rgb(255, 255, 0) · hsl(60, 100%, 50%)
カラーコード
| 形式 | 値 | |
|---|---|---|
| HEX | #FFFF00 | |
| RGB | rgb(255, 255, 0) | |
| HSL | hsl(60, 100%, 50%) |
Yellowのシェード（暗色系）
| #E6E600 | #CCCC00 | #B3B300 | #999900 | #808000 | #666600 | #4D4D00 | #333300 |
Yellowのティント（淡色系）
| #FFFF1A | #FFFF33 | #FFFF4D | #FFFF66 | #FFFF80 | #FFFF99 | #FFFFB3 | #FFFFCC |
カラーペアリングとハーモニー
|
補色
#0000FF
|
類似色 +30°
#80FF00
|
類似色 −30°
#FF8000
|
トライアド +120°
#00FFFF
|
トライアド −120°
#FF00FF
|
コントラストとアクセシビリティ（WCAG 2.1）
白（#FFFFFF）との対比
1.07:1 — 不合格
黒（#000000）との対比
19.56:1 — 通常テキストでAAAパス
CSSスニペット
.element {
color: #FFFF00;
}
.element-bg {
background-color: #FFFF00;
color: #000000;
}
.element-border {
border: 2px solid #FFFF00;
}
Yellowについて
Yellowはhsl(60, 100%, 50%)（色相60°、彩度100%、明度50%）で定義される中間の明度のの鮮やかで高彩度カラーで、HEXコードは#FFFF00です。正確なカラーモデル値はRGBでrgb(255, 255, 0)、HSLでhsl(60, 100%, 50%)です。白背景でのコントラスト比は1.07:1 — 不合格、黒背景では19.56:1 — 通常テキストでAAAパスです。YellowはUI要素・背景・テキスト・ボーダー・装飾アクセントなど多用途に活用できます。下のシェードセクションでは徐々に暗くなるバリエーションを、ティントストリップでは徐々に明るくなるバリエーションを確認でき、トーンパレットの構築に役立ちます。ハーモニースウォッチはHSL色相環に基づく補色・類似色・トライアドを提供します。
色をインタラクティブに確認したい、パレットを生成したい、カラー形式を変換したいですか？DevArborのカラーピッカーをご活用ください。
カラーピッカーを開く →よくある質問
YellowのRGB値は何ですか？
Yellow（#FFFF00）のRGB値は rgb(255, 255, 0) です。Red・Green・Blueそれぞれの光の量を0〜255のスケールで表しています。
Yellowは白背景でアクセシブルですか？
Yellowと白（#FFFFFF）のコントラスト比は 1.07:1 — 不合格 です。黒（#000000）との比は 19.56:1 — 通常テキストでAAAパス です。WCAG 2.1ではAA（通常テキスト）に4.5:1、AAAに7:1以上が必要とされています。
Yellowに合う色は何ですか？
カラー理論に基づくと、Yellow（hsl(60, 100%, 50%)）は補色・類似色・トライアドと相性がよいです。各ペアリングタイプの正確なHEX値は上のハーモニースウォッチを参照してください。