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

时间:2018-10-10 03:24:51

标签: css

我知道标准的十六进制颜色代码格式是6位十六进制#RRGGBB。但是,为什么以下两个版本(至少在视觉上)显示相似的颜色#RGB#R0G0B0

示例:

  • #A1BD24-标准的6位十六进制颜色代码(绿色阴影)
  • #AB2-(从#RRGGBB的两位数对的每一位中取第一位)
  • #A0B020-将#RRGGBB中每两位数字对的第二位数字替换为0

所有3个均显示为绿色。 #RRGGBB中每两位数字的第二位代表阴影吗?

4 个答案:

答案 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

所以它们是非常相似的值