为什么下面提到的十六进制颜色代码在视觉上与 6 位十六进制代码具有相同的颜色？答案

【问题标题】：Why does the below mentioned hex color code visually have the same color as the 6 digit hex code?为什么下面提到的十六进制颜色代码在视觉上与 6 位十六进制代码具有相同的颜色？
【发布时间】：2018-10-10 03:24:51
【问题描述】：

我了解标准的十六进制颜色代码格式是 6 位十六进制 #RRGGBB。但是为什么以下 2 个版本显示相似的颜色（至少在视觉上）#RGB 和 #R0G0B0？

例子：

#A1BD24 - 标准 6 位十六进制颜色代码（绿色阴影）
#AB2 - （从#RRGGBB 中的 2 位对中的每一个中取第 1 位）
#A0B020 - 用 0 替换 #RRGGBB 中每 2 位数字对的第 2 位数字

所有 3 个都显示为绿色。 #RRGGBB中每2位对的第2位是不是代表一个阴影？

【问题讨论】：

标签： css

【解决方案1】：

你是对的，每对中的第二个数字代表一个阴影。这是根据数字的十六进制表示计算得出的。具体来说，这是每对的x * 16 * x。例如，F 的十六进制值为15，因此FF 对将是15 * 16 + 15。这会给你255，这是可能的最大值。

这可以在下面看到：

.color1 {
  background: #A1BD24; /* rgb(161, 189, 36) */
}

.color2 {
  background: #A0B020; /* rgb(160, 176, 32) */
}

.color3 {
  background: #AB2; /* rgb(170, 187, 34) */
}

.color4 {
  background: #AABB22; /* rgb(170, 187, 34) */
}

<div class="color1">Test 1</div>
<div class="color2">Test 2</div>
<div class="color3">Test 3</div>
<div class="color4">Test 4</div>

请注意，速记语法#RGB 是#RRGGBB 的缩写，NOT #R0G0B0； .color3 等于 .color4，而不是 .color2。

【讨论】：

“阴影”是一个非常通俗且随意的术语。每对的第一个和第二个数字不代表不同的东西。每个“对”都是代表 R、G 或 B 分量的两位十六进制数字，完全按照您的描述计算。这与 HSL 量表不同。

【解决方案2】：

3 位代码只是 6 位的简写，其中每对中的第二个数字是第一个数字的重复。

所以：#xyz 与 #xxyyzz 相同（不是您建议的 #x0y0z0）

以及我将在下面粘贴的相关部分：

十六进制表示法的 RGB 值的格式是一个“#”，后跟三个或六个十六进制字符。三位数 RGB 符号 (#rgb) 通过复制数字而不是添加零转换为六位数形式 (#rrggbb)。例如，#fb0 扩展为 #ffbb00。这确保了白色 (#ffffff) 可以用简写符号 (#fff) 指定，并消除对显示颜色深度的任何依赖。

颜色规范的下一次迭代实际上也增加了对 4 和 8 字符颜色的支持。在这些额外的数字（或对）代表阿尔法通道。您可以在此处阅读此规范：https://drafts.csswg.org/css-color/#hex-notation

【讨论】：

但它们不是两个不同的十六进制数字吗？例如，当您将它们转换为十进制时，您会得到两个不同的值。那它们怎么可能有相同的颜色呢？
它们并不意味着被解释为单个十六进制数字，而是被解释为没有分隔符的 3 个十六进制数字。如果您想了解更多信息，我已经通过规范链接更新了答案。

【解决方案3】：

首先，#AB2 的计算结果为 #AABB22 而不是 #A0B020。

接下来，解决您的问题：

...为什么以下 2 个版本显示相似的颜色（至少在视觉上）#RGB 和 #R0G0B0？

我认为最好用 HSL 代替 RBG 或 HEX 来解释。

当我们convert the hex values to HSL 时，我们得到：

#a1bd24 -> hsl(71, 68%, 44%)

#ab2    -> hsl(67, 69%, 43%)
#aabb22 -> hsl(67, 69%, 43%)
#a0b020 -> hsl(67, 69%, 41%)

如果您不熟悉 HSL，这里有一个 short article，它解释了 H、S 和 L 代表什么。

色相

#AB2 和 #A0B020 的色调均为 67。这意味着这两个十六进制值实际上是相同的颜色。

饱和度

#AB2 和 #A0B020 的饱和度均为 69%。这意味着这两个十六进制值实际上是相同的颜色，具有相同的饱和度。

亮度/亮度 （或者你能说它是阴影吗？）

这里，#AB2 和 #A0B020 在亮度上有 2% 的差异。这意味着即使它们本质上是具有相同饱和度的相同颜色，但在颜色的实际呈现中存在非常细微的差异。由于差异只有 2%，当我们用眼睛感知它们时，我们会发现几乎没有差异。

#RRGGBB 中每 2 位对的第 2 位是不是代表一个阴影？

不是真的。

正如您在 #A1BD24 示例中所见，唯一变化的数字是每 2 位数字对的第 2 位数字，但其 HSL 值与 #AB2 和 #A0B020 完全不同。

它的 HUE 变为 71，这意味着它已经是另一种颜色（尽管它仍然是非常绿色的）。所以，这个说法是错误的。

div {
  width: 100px;
  height: 100px;
  float: left;
  text-align: center;
  line-height: 100px;
}

#a1bd24 { background-color: #a1bd24; }
#ab2    { background-color: #ab2;    }
#aabb22 { background-color: #aabb22; }
#a0b020 { background-color: #a0b020; }

<div id="a1bd24">#A1BD24</div>
<div id="ab2">#AB2</div>
<div id="aabb22">#AABB22</div>
<div id="a0b020">#A0B020</div>

【讨论】：

【解决方案4】：

在您比较 #A1BD24 和 #A0B020 的示例中，它们看起来很相似，因为您正在更改每个红色、绿色和蓝色分量的较低有效位，因此在视觉上并没有太大差异，尤其是您使用的值

在 RGB 中，

A1 BD 24 是 161 189 36

和

A0 B0 20 是 160 176 32

所以它们的值非常相似

【讨论】：