在CSS中使用颜色名称代替颜色代码是否有任何缺点？

Question

例如,写作red比效率更高#cc0000.它具有较少的字符,占用较少的空间,并且更容易记住.

在十六进制代码或RGB值上使用颜色名称是否有任何不足之处？这包括在多开发人员环境中进行编程.

Answer 1

不同的浏览器可能不同意某些颜色名称的含义.所有1600万种24位颜色都没有名称.事实上,只有17种W3C标准颜色名称.使用它们可能没问题.

我个人在构建时使用模板系统来预处理我的CSS文件,这样我就可以保留一组标准的网站颜色并按名称引用它们.这样我就可以获得两全其美:我确切知道我的RGB颜色值是什么,但我可以在CSS中使用更简单的名称.

(当然,仍然无法确切知道给定用户浏览器的颜色外观.)

编辑 - 在写完这个答案后的5年里,像Less和Sass这样的预处理器变得非常普遍.这些提供了一些非常复杂的工具来管理CSS源中的颜色(和许多其他东西).

CSS 2.1定义了17种颜色的名称和值:http://www.w3.org/TR/CSS2/syndata.html#value-def-color(橙色在2.1中添加).当一个可用时,我倾向于使用颜色名称. (7认同)

Answer 2

我建议您遵循W3C的建议:

所有这些(CSS Level 1,Level 2和Level 3)表明使用颜色名称是完全可以接受的,但哪些是可接受的,这取决于规范.

CSS1规范

CSS1规范建议使用颜色名称作为十六进制代码和RGB代码的有效替代.

6.3颜色单位

建议的关键字颜色名称列表是:浅绿色,黑色,蓝色,紫红色,灰色,绿色,石灰色,栗色,海军蓝色,橄榄色,紫色,红色,银色,蓝绿色,白色和黄色.这16种颜色取自Windows VGA调色板,其RGB值未在本规范中定义.

您orange现在可以使用颜色名称!计数最多为17种颜色.CSS2规范供参考.

CSS3允许SVG 1.0的X11颜色用于CSS的属性(以及hsl()值).这会将颜色名称的数量扩展为147种颜色.任何这些颜色名称都可以在任何支持SVG 1.0规范的浏览器中使用,即IE9或更新版本.

这也意味着问题中提供的颜色列表大多无效.

如果您正在寻求支持旧浏览器,请坚持使用Web安全原始的16种颜色名称,因为不支持X11颜色.否则,您可以自由使用X11规范中指定的147种颜色名称中的任何一种.

所有浏览器都应遵守等效十六进制代码的规范.解析器读取颜色名称所花费的时间实际上与使用十六进制值,rgb值或hsl()值相同(如果不完全相同).

对我来说,以小写形式编写HEX代码更具可读性.例如,#8b88b6显然比#8B88B6更具可读性.此外,我倾向于使用速记HEX颜色而不是完整代码(#666而不是#666666),因为它更有效.

Answer 3

就个人而言,我更喜欢使用十六进制代码,原因有两个

这假设您使用的是其他颜色,简单的红色,黑色,白色等.在多开发人员环境中,我会说十六进制代码更好,因为它们更普遍一致(每个开发人员都知道颜色的确切含义).

Answer 4

以前的答案现在看起来已经过时了。

如果您为支持 CSS3 的浏览器（自 IE9 以来的所有主流浏览器）进行开发，则可以在 CSS 中使用颜色名称。在 HTML 中，仅支持 16 种原始网页颜色。

问题是是否有缺点。我认为有以下几个：

我发现有些颜色名称是错误的。例子：
- 天蓝色通常被认为是更深的颜色。
- 草坪绿色与我见过的草坪完全不同。
- 紫罗兰色看起来更像是我所说的粉红色。
通过更改其十六进制值来创建稍深或稍浅的颜色版本更加困难。例如，#DCDCCDC 的深色变体是#DADADA，但如果我从颜色名称 Gainsboro 开始，我就不会有任何想法。
Javascript 对名称的计算更加困难。