CSS十六进制代码扩展

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

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

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

简单级联似乎有点粗（这里是一个非常粗的例子）

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

是由计算得出的2位部分基于所述单个数字的数值？

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

单程是将每个十六进制数字乘以11（十六进制），从而给出结果。因此D * 11收益率为DD。

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

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

来源

2013-06-21 Jamie Dixon

这不会有什么不同浏览器到浏览器？毕竟这是一个实现细节。该规范说只需将每个数字加倍，但并未说明实现是应该通过级联，位翻转还是乘法来实现。 – BoltClock

可能是的。如果没有采取一种标准的方法，我会对如何实现这一目标感兴趣。 –

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

#fff > #ffffff 
#909 > #990099

来源

2013-06-21 10:49:10

这似乎很好，重新：设计决定。剩下的只是某种来源，但鉴于这可以追溯到CSS1，我不确定是否可以挖掘出来源。 – BoltClock

简短的答案是你不能。

与6位十六进制代码相比，3位十六进制代码只包含更少的字节。这意味着可能有更少的色调。只有在颜色完全匹配时才能进行转换。采取转换颜色的这个例子中，以3个数字值：

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

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

来源

2013-06-21 10:58:21

我想你误解了这个问题。问题是询问如何从3位数值导出6位数值。 – BoltClock

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

如何从十六进制d获得与1101二进制值，与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 */

其次，为什么这3位系统介绍？什么启发了这个决定？

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

来源

2013-06-21 11:09:21 AlexanderMP

＃808080！=＃888 –

嗯，是的。我知道。我只是说在这一点上没有人真正关心它是否是＃808080或＃818181或＃828282等。不妨是＃888888或更短 - ＃888。上面描述的伪代码很清楚地说明了这一点。 – AlexanderMP

CSS十六进制代码扩展

回答

相关问题