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

时间:2010-07-12 17:55:06

标签: css colors

例如,撰写red#cc0000更有效率。它具有更少的字符,占用更少的空间,更容易记住。

在十六进制代码或RGB值上使用color names是否有任何不足之处?这包括在多开发人员环境中进行编程。

10 个答案:

答案 0 :(得分:20)

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

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

(当然,仍然不可能知道完全在给定用户的浏览器上颜色的外观。)

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

答案 1 :(得分:14)

我建议您遵循W3C建议:

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

CSS1规范

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

  

6.3色彩单位

     

建议的关键字颜色名称列表为:浅绿色,黑色,蓝色,   紫红色,灰色,绿色,石灰,栗色,海军蓝,橄榄色,紫色,红色,银色,   蓝绿色,白色和黄色。这些 16种颜色取自Windows   VGA调色板及其RGB值未在此定义   说明书

CSS2规范

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

CSS3& X11颜色

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

这也意味着问题中提供的颜色列表主要是 无效

建议用法

如果您正在寻求支持旧版浏览器,请不要使用X11颜色,因此请坚持使用原始的16种颜色名称。否则,您可以自由使用X11规范中指定的147种颜色名称。

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

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

答案 2 :(得分:7)

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

  1. 从Photoshop
  2. 复制十六进制代码更容易
  3. 您可以在样式表中使用十六进制代码,但是您必须混合使用两种样式(十六进制代码和颜色名称)。所以你的样式表可以更统一/一致。
  4. 这假设您使用的是其他颜色,简单的红色,黑色,白色等。在多开发人员环境中,我会说十六进制代码更好,因为它们更普遍一致(每个开发人员都确切知道颜色是什么是)。

答案 3 :(得分:3)

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

如果您为支持CSS3的浏览器开发,这些浏览器都是IE9以来的主流浏览器,您可以在CSS中使用颜色名称。在HTML中,仅支持16种原始Web颜色。

问题是是否有缺点。我想有几个:

  • 我发现一些颜色名称是错的。例子:
    • Azure通常被认为颜色更深。
    • 草坪绿不像我见过的草坪。
    • 紫罗兰看起来更像我称之为粉红色。
  • 通过更改其十六进制值来创建稍暗或更浅的颜色版本更加困难。例如,#DCDCDC的一个较暗的变体是#DADADA,但如果我开始使用颜色名称gainboro,我就不会有任何想法。
  • Javascript计算在名称上更难。

来源: https://developer.mozilla.org/en-US/docs/Web/CSS/color_valuehttp://caniuse.com/#search=css3%20colors

答案 4 :(得分:2)

我更喜欢进一步优化,#c00为红色。如果您要使用原色或任何与#aabbcc类似的颜色,可以使用速记#abc

答案 5 :(得分:2)

我使用颜色名称进行原型设计,调试,以及设置真正基本的单色配色方案,这些方案随后可以使用超特定的十六进制颜色进行主题化。它使一个主题性的财产很容易发现。它也更具人性化;当试图立即想象正在发生的事情时,脑力劳动减少了。

.component {
    background-color: black;
    color: white;
}

...然后在主题文件......

.some-theme .component {
    background-color: #5f5f5c;
    color: #fafafc;
}

答案 6 :(得分:1)

这真的取决于你的编码风格。我坚持使用十六进制值来保持一致性 - 颜色始终格式为#000#000000,我不必担心在namd和未命名颜色之间切换。

最后,这是您和您的团队必须自己做出的决定。这完全取决于您的偏好。

答案 7 :(得分:1)

就个人而言,如果可能的话,我更喜欢以相同的方式定义CSS文件中的所有颜色。

这样,当我看到定义了不同的颜色时,我不必以不同的方式思考(例如red#cd876frgba(255,255,0,0.4))。

我也更喜欢与我在实现的设计中识别颜色时所看到的颜色符号相匹配。 Photoshop的调色板提供RGB和十六进制值等,但不提供CSS颜色名称。 (其他设计工具可能会这样做。)

答案 8 :(得分:0)

我认为颜色名称更具描述性......这是在可能的情况下使用它的一个很好的理由。

答案 9 :(得分:0)

在我看来,这是一个偏好问题。如果颜色像红色,黑色,灰色,蓝色,白色等一样简单,请使用单词而不是十六进制。