Question

在CSS中，我们可以使用完整的6位十六进制代码来表示颜色，或者我们可以使用3位数的快捷方式。

浏览器如何计算3位数快捷方式中的6位十六进制数？

   F   F  F
  /    |  \
 /     |   \
/      |    \
FF     FF    FF

简单连接看起来有点粗糙（这里有一个非常粗略的例子）

var shortHex = "FFF";
var fullHex = shortHex[0] + shortHex[0] + [...]

2位数部分是否来自基于单个数字的数值的计算？

如何通过计算从二进制值为D的十六进制1101到二进制值为DD的{{1}}？

单向是将每个十六进制数字乘以11（十六进制），从而得到结果。因此11011101会产生D * 11。

这给我们留下了一个问题：这在浏览器中是如何完成的？是仅仅是每个数字加倍的情况还是使用另一个等式？

其次，为什么要引入这个3位数系统？是什么启发了这个决定？

Answer 1

速记网页颜色利用了browser-safe web palette，它使用了总是加倍的三元组。简写颜色代码只能与可以加倍的值一起使用。因此

#fff > #ffffff
#909 > #990099

Answer 2

简短的回答是你不能。

与6位十六进制代码相比，3位十六进制代码仅包含更少的字节。这意味着可能的阴影种类较少。只有在颜色完全匹配时才能进行转换。以颜色转换为3位数值为例：

#000000 -> #000
#336699 -> #369
#123456 -> #123456
#01aa01 -> #01aa01
#a1a1a1 -> #a1a1a1
#0aa11a -> #0aa11a

前两个是成功的，因为每对红绿色和蓝色是相同的值，因此它是6位数值的简写。然而，接下来的几个示例无法转换为3位数值，因为它们将变为不同的阴影。所有3位十六进制代码都是预定义的Web安全颜色，并且都具有匹配对。

Answer 3

嗯，这很简单。每个十六进制字符对应4位。

如何从二进制值为1101的Hex D到达DD的DD 通过计算二进制值1101 1101？

伪代码：

color4Bit := 0xD /* D in hex */
color8Bit := hex<<4 | hex /* bit shifting to the left with 4 positions, then apply either binary OR, or add the original 4 bits */

其次，为什么要引入这个3位数系统？是什么启发了这个决定？

这更简单。更快地创建样式表。你很少需要具体。每种颜色的16种色调足以设置网页的总体情绪。当专业设计师认为有必要时，会添加细节例如，我想要一个灰色的背景。我为什么要打扰指定＃808080？从根本上来说，它与＃888有什么不同吗？或者如果我想要它是橙色的？我在内存中使用＃F92，因为这种颜色会接近我的想象。因此，如果我不是设计师，但我想让我的网络功能看起来很漂亮，而且我知道CSS3，我可以用3个十六进制位置，渐变，阴影等来完成所有这些。

CSS Hex代码扩展

3 个答案: