我知道标准的十六进制颜色代码格式是6位十六进制#RRGGBB
。但是,为什么以下两个版本(至少在视觉上)显示相似的颜色#RGB
和#R0G0B0
?
示例:
#A1BD24
-标准的6位十六进制颜色代码(绿色阴影)#AB2
-(从#RRGGBB
的两位数对的每一位中取第一位)#A0B020
-将#RRGGBB
中每两位数字对的第二位数字替换为0 所有3个均显示为绿色。 #RRGGBB
中每两位数字的第二位代表阴影吗?
答案 0 :(得分:1)
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
答案 1 :(得分: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
。
答案 2 :(得分:1)
首先,#AB2
的计算结果为#AABB22
,而不是#A0B020
。
接下来,要解决您的问题:
...为什么以下两个版本显示(至少视觉上)#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中每两位数字的第二位代表阴影吗?
不是真的。
在#A1BD24
示例中可以看到,唯一变化的数字是每2位数字对中的第二位,但是#AB2
和#A0B020
的HSL值完全不同
它的色相变为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>
答案 3 :(得分:0)
在将#A1BD24与#A0B020进行比较的示例中,它们看起来很相似,因为您正在更改每个红色,绿色和蓝色分量的低位数字,因此在视觉上并没有太大差别,特别是与您使用的值>
在RGB中,
A1 BD 24是16118936
和
A0 B0 20是16017632
所以它们是非常相似的值