これらの名前がこれほど歴史的で無秩序に感じられる理由
これらの名前の元になったX11のカラーリストは、1980年代に初期のUnixグラフィカルシステム向けに作られたもので、体系的な色相の理論に基づいてではなく、身近な物や布地、顔料などにちなんだ感覚的な命名によってまとめられました。CSSも、その前身であるSVGも、このリストを再設計するのではなく互換性と手軽さのためにそのまま採用したため、意図的に整理された配色システムというよりは、歴史的な遺産のような印象を今でも残しています。
ネームドカラーが役立つ場面と、HEXやRGBのほうがよい場面
素早いプロトタイピングや、読みやすいサンプルコード、あるいはtransparentやcurrentColorのように数値で書き表せないCSSキーワードには、ネームドカラーは本当に便利です。一方でブランドの正確な色や、デザインシステムのパレットを厳密に再現したい場合、細かい色の調整が必要な場合には、ネームドカラーのパレットは固定されていてほとんどの色を正確には表せないため、HEXやRGB値を使うほうが信頼できます。
よくある質問
CSSで使えるネームドカラーは実際にはいくつありますか?
CSSのColor仕様では147のカラーキーワードが定義されていますが、grayとgreyのようなつづり違いを1色として数えるか2色として数えるかによって、数え方は多少変わります。どちらも同じHEX値に解決されます。
ネームドカラーはどのブラウザでも同じ見た目になりますか?
はい。ネームドカラーはCSS仕様の中で固定のHEX値として標準化されているため、モダンブラウザであればどれでも同じ色として表示されます。システムフォントやフォーム部品の既定スタイルのようなブラウザ間の違いはありません。