我知道标准的十六进制颜色代码格式是 6 位十六进制#RRGGBB。但是为什么以下 2 个版本在#RGB和#R0G0B0上显示相似的颜色(至少在视觉上(？
例：
#A1BD24- 标准的 6 位十六进制颜色代码(绿色阴影(#AB2- (从#RRGGBB的 2 位数字对中的每一个中取第 1 位数字(#A0B020- 将#RRGGBB中每 2 位数字对的第 2 位数字替换为 0
所有 3 个都显示为绿色。是不是#RRGGBB中每 2 位数字对的第 2 位数字代表阴影？
您是对的，每对中的第二个数字表示阴影。这是根据数字的十六进制表示形式计算得出的。具体来说，这是每对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。
3 位代码只是 6 位数字的简写，其中对中的每一位数字都是第一个数字的重复。
所以：#xyz与#xxyyzz相同(不像您建议的那样#x0y0z0(
相关规范在这里：https://www.w3.org/TR/2018/REC-css-color-3-20180619/#rgb-color
以及我将粘贴在下面的相关部分：
十六进制表示法的 RGB 值的格式是紧跟三个或六个十六进制字符的"#"。三位 RGB 表示法 (#rgb( 通过复制数字而不是添加零转换为六位数形式 (#rrggbb(。例如，#fb0 将扩展到 #ffbb00。这可确保可以使用短符号 (#fff( 指定白色 (#ffffff(，并消除对显示器颜色深度的任何依赖关系。
颜色规范的下一次迭代实际上也增加了对 4 和 8 字符颜色的支持。在这些数字(或对(中，额外的数字(或对(表示 alpha 通道。您可以在此处阅读此规范：https://drafts.csswg.org/css-color/#hex-notation
首先，#AB2的计算结果是#AABB22而不是#A0B020。
接下来，要解决您的问题：
。为什么以下 2 个版本在 #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代表什么。
色调
#AB2和#A0B020的色调均为67。这意味着两个十六进制值实际上是相同的颜色。
饱和
#AB2和#A0B020的饱和度均为69%。这意味着两个十六进制值实际上是具有相同饱和度的相同颜色。
亮度/亮度(或者你能说它是阴影吗？
在这里，#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>在将#A1BD24 与 #A0B020 进行比较的示例中，它们看起来相似，因为您正在更改每个红色、绿色和蓝色分量的不太有效的数字，因此在视觉上没有太大区别，特别是您使用的值
在RGB中，
A1 BD 24 是 161 189 36
和
A0 B0 20 是 160 176 32
所以它们是非常相似的值