2

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

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

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

简单的连接似乎有点粗糙（这是一个非常粗糙的例子）

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

2 位部分是根据一位数的数值计算得出的吗？

你如何从D具有二进制值的1101十六进制得到通过计算DD的二进制值11011101？

一种方法是将每个十六进制数字乘以 11（十六进制），得到结果。所以D * 11产量DD。

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

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

4

3 回答 3

1

简短的回答是你不能。

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

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

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

于 2013-06-21T10:58:21.857 回答
1

速记网络颜色利用了浏览器安全的网络调色板，它使用总是加倍的三元组。速记颜色代码只能用于可以加倍的值。因此

#fff > #ffffff
#909 > #990099
于 2013-06-21T10:49:10.613 回答
0

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

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

伪代码：

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 */

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

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

于 2013-06-21T11:09:21.410 回答