请问#f00是什么颜色？

在我以前出的前端笔试题里，第一道题就是：请问 #f00 是什么颜色？

这道题，对于知道的人来说简直就是送分题，这还用问吗？不就是红色吗？而对于不知道或者没有用心的人来说，却无从入手，怎么回答的都有。

我问过做了 3 年多的面试者为什么不知道这是什么颜色，他说平时都是直接在设计稿上取，从来没记过。

没记过我是信的，但是你从来都没有好奇这一串字符到底啥意思？到底怎么表示颜色的吗？

算了，还是让姬老师给你讲讲这一串东西到底啥意思吧！

话说色彩有很多种表示方式，最常用的是十六进制的代码表示方式，即 # 开头的 6 位十六进制数 0 ~ F 组成，大小写均可。

为什么要用代码表示颜色呢？因为如果用名字来表示颜色，是十分不精准的。甚至对于设计师来说，根本不知道你说的是哪种颜色，唯有代码可以精准表示出你所要的颜色。

这六个字符每个都是由 10 个数字和 6 个字母组成，总共可以有 16,777,216 种独立的组合。但是肉眼无法分辨这么多颜色，所以我们只来了解一下基本原理，适当的时候装 b 一下即可。

首先，这六位字符可以分为三段，两两一段分别代表红，绿，蓝三原色，对应的英文首字母就是我们常说的 RGB 颜色模型。

图片来源于我翻译的文章《你不可不知的色彩密码》

这三种颜色以不同的比例相加，就会产生各种颜色。我们想象屏幕在没点亮之前没有任何光点打上去，也就是 RGB 全为 0，即黑色 #000000；如果所有光点都最强那就是白光，也就是 #ffffff 了。

从黑色到白色之间，只要是 RGB 变化一致，那就是不同程度的灰，你可以随便记住几个，比如 #333333，#666666，#999999，#cccccc，#dddddd 等。

如果只有红色满格，其他的没有，那就是最亮的红色了 #ff0000，也就是点题的红色。只不过是在 css 代码中，这种两两相等的十六进制可以简写为三位，即 #f00 而已。

同理，#00ff00 就是绿色，#0000ff 就是蓝色啦。再复杂一点，#00fffff 代表最亮的青色，#ff00ff 代表最亮的品红，#ffff00 代表最亮的黄色。

大多数情况下，我们可以采用忽略个位字符的方式读出十六进制的颜色，因为十位处的字符可以给出更多信息。

也就是说，你很难区分出 41 和 42的区别，但是 41 和 51 之间的区别是很容易察觉的。

图片来源于我翻译的文章《你不可不知的色彩密码》

上面的例子在十六位的位置上已经有了足够的差异来让我们分辨，大量的红色，一些蓝色，没有绿色。这会构成一个温暖的紫色。

第二个例子的十位（9，9和8）非常类似，那么要想辨别这个颜色，我们还需要检查个位（7，0和5）才行。十六进制颜色的十位处越接近，则该颜色会越中性（即更加不饱和）。

所以，看到十位的位置比较接近的颜色，就一定是灰不拉几的颜色了，只是深浅不同，可能很接近黑色或白色。

对于颜色的深浅，我们经常通过调整明度来实现，而对于十六进制的形式来说，就是直接减每段的值。

还是举标题的例子，#f00 是最亮的红色，那么与之对应的，#d00，#900 就是越来越暗的红色了。

到这里，我想你已经知道这些代码是什么意思了，也大概了解了它们变化的奥秘。剩下的就是在工作中用心记住一些常用的颜色值即可。

比如默认的文字我们经常不用纯黑，而用 #333；或者链接，我们经常不用最亮的蓝色，而用 #369 这种更柔和的颜色。

所以，下次再有关于颜色的笔试题，我想你可以和他谈笑风声了。

就算不用做笔试题，下次你见到某个颜色的时候，也可以大致蒙出代码；或者见到代码的时候，说出大致的颜色， 这 b 装得是不是要给 ? ？