Named colors

概要

CSSでは148の色を名前で指定できます。red、blue、greenなどの基本色から、cornflowerblue、mediumseagreen、papayawhipなどの詳細な色名まで用意されています。プロトタイプの作成や学習用途で手軽に使える一方、本番のデザインシステムではカスタムプロパティによる色管理が推奨されます。

対応ブラウザ

基本構文

.error {
  color: red;
  border-color: crimson;
}
.success {
  color: forestgreen;
}

実務での使いどころ

• 手軽な色指定とプロトタイピング

  プロトタイプやデバッグ時に名前付きカラーを使って素早く色を適用し、開発効率を向上させます。

注意点

アクセシビリティ

• 名前付きカラーを使用する場合も、テキストと背景のコントラスト比がWCAG AAレベル（4.5:1以上）を満たすことを確認してください。

参考リンク

• MDN Web Docs — Named colors
• Can I use — Named colors