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

Question

据我所知，标准的十六进制彩色编码格式是6位十六进制#RRGGBB。但是为什么下面的两个版本显示相似的颜色(至少在视觉上) #RGB和#R0G0B0？

示例：

• #A1BD24 -标准的6位十六进制颜色代码(绿色的阴影)
• #AB2 -(从#RRGGBB中的两个数字对中各取1位数字)
• #A0B020 -replacing：#RRGGBB中每2位数字对中有0的第2位数字

所有三个都是绿色的。是#RRGGBB中每2位数字对中的第2位代表一种颜色吗？

Answer 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的缩写，不是 #R0G0B0；.color3等于.color4，而不是.color2。

Answer 2

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

因此：#xyz与#xxyyzz相同(而不是您所建议的#x0y0z0 )。

相关规范在这里：https://www.w3.org/TR/2018/REC-css-color-3-20180619/#rgb-color

有关的第一节将贴在下面：

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

下一个颜色规范的迭代实际上增加了对4和8字符颜色的支持。在这些数字中，额外的数字(或对)表示alpha通道。您可以在这里阅读此规范：https://drafts.csswg.org/css-color/#hex-notation

Answer 3

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

接下来，为了回答你的问题：

..。为什么以下两个版本显示相似的颜色(至少在视觉上) #RGB和#R0G0B0？

我认为最好的解释是使用HSL而不是RBG或HEX。

当我们将十六进制值转换为HSL。时，我们得到：

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

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

如果你不熟悉HSL，这里有一个短文，它解释了H，S和L代表什么。

Hue

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

饱和

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

Luminosity/Lightness (或者你能说是阴凉的吗？)

在这里，#AB2和#A0B020的亮度相差2%。意思是，尽管它们本质上是相同的颜色，同样的饱和度，但在颜色的实际表现形式上有很小的差别。由于差别只有2%，所以当我们用眼睛看到它们时，我们几乎看不到任何差别。

是#RRGGBB中每2位数字对中的第2位代表一种颜色吗？

不怎么有意思。

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

它的颜色变成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>

​