Named colors
<named-color> は CSS のデータ型で、 red, blue, black, lightseagreen のような色の名前です。文法的には、 <named-color> は <ident> の一種です。
<named-color> 値は <color> が使用できる場所ならどこでも使用できます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| CSS タイプ | ||||||
named-color.rebeccapurple | 38 | 12 | 33 | 9 | 38 | 8 |
named-color.transparent | 1 | 12 | 3 | 3.1 | 18 | 2 |
基本構文
CSS
.error {
color: red;
border-color: crimson;
}
.success {
color: forestgreen;
}ライブデモ
実務での使いどころ
-
手軽な色指定とプロトタイピング
プロトタイプやデバッグ時に名前付きカラーを使って素早く色を適用し、開発効率を向上させます。
注意点
- 名前付きカラーの種類は限定的であり、ブランドカラーの正確な再現には16進数やhsl()等の指定を使用してください。
アクセシビリティ
- 名前付きカラーを使用する場合も、テキストと背景のコントラスト比がWCAG AAレベル（4.5:1以上）を満たすことを確認してください。