奇怪吧? 4 位十六进制代码也是如此。 它们是将 Alpha 透明度信息放入颜色的十六进制格式的一种方法。 如果您使用 Chrome,您可能会突然看到更多,因为它 在 52 版本中推出,并且 DevTools 似乎默认以这种格式显示 Alpha 透明颜色,即使您最初使用其他方法设置它也是如此。
Firefox 也支持它,仅供参考。
让我们看看它是如何工作的
.element {
/* This is green */
background: rgb(0, 255, 0);
/* It's the same as this */
background: #00ff00;
/* We could make it 50% transparent like this */
background: rgba(0, 255, 0, 0.5);
/* Or, with an alpha hex like this */
background: #00ff0080;
}
最后两位数字代表 Alpha 透明度。 但是等等……最后两位数字是“80”,而不是“50”。 我们稍后会解释。
首先,请记住三位十六进制数是如何工作的?
.element {
/* This */
background: #900;
/* Is the same as this */
background: #990000;
}
它是每个数字加倍。 4 位数字也是一样的。
.element {
/* This */
background: #0f08;
/* Is the same as this */
background: #00ff0088;
}
这些格式有时被称为 #RRGGBBAA 和 #RGBA。
AA 部分是 0-100 的十六进制表示,例如
0 = 00
1 = 03
2 = 05
…
9 = 17
…
10 = 1A
11 = 1C
12 = 1F
…
99 = FC
100 = FF
这就是为什么“80”在上面的示例中实际上是“50% 透明度”的原因。
此外,这里有一个我从 这里 改编的图表
查看 Chris Coyier 在 CodePen 上的 Pen XjbzAW (@chriscoyier)。
您应该使用它吗?
可能不。 它目前支持得不太好,并且与 rgba()
或 hsla()
相比没有优势,除了,我想,节省了一点点字节。
我真的不明白你的系列。 10 = 1A? 11 = 1C? 12 = 1F? 什么?! 你把 0% – 100% 和 0 – 255 值混淆了。 如果你用 0 – 255 做一个系列,你发布的十六进制值就是无稽之谈。 如果你做 0% – 100% 系列,那么这个系列也是无稽之谈,因为你没有超过 100% 的数字。
当然有点令人困惑。 我认为这可能源于您需要用 2 位数字来表示 0 和 100。 如果只有整数,就没有好的方法可以做到。
00
可以是0
,但你只能从那里向上到99
。 所以我想不如使用其他数字使用的相同系统吧。不,Chris,这并不那么令人困惑。 你的系列是错误的。
我发现你的评论非常粗鲁。
我确实发现它很令人困惑。 我没有意识到十六进制值根据它们所代表的比例而不同。
在 255 比例上,10 是 0A
在 100 比例上,10 是 1A
使这些集合等效
我认为这是正确的,但由于我对这个概念还很陌生,所以我确定我可能仍然错了。
Chris,
抛开粗鲁不说,我认为 Aaron 是对的,你可能读错了图表,也误解了这一点。
Alpha 不是整数百分比,而是 0 到 1 的小数值。 这被映射到 256 个可能的值。 50% 的不透明度是 80,因为它是 128 的十进制数,是 256 的一半。
如果你看看你生成的序列,你会发现它给你的值与你引用的不同
0% 00
1% 03
2% 05
…
9% 17
所以你的初始序列,在它变得奇怪之前,几乎少了一半。
颠倒一下数学。 对于从 00 到 ff 的每个十六进制值,你正在写什么 Alpha 值
http://codepen.io/anon/pen/ALvzab
它有点不同,因为四舍五入的方式不同,但我认为这更清楚地显示了你正在做什么(我认为我的数学没有问题)。
糟糕! 做这件事的时候忘了登录。 预览只显示了链接,让我错过了它。
http://codepen.io/littlefyr/pen/JRdVBa
我认为这一切都是误解,Chris 想表达的是
1% 的透明度用十六进制“03”表示,9% 用“23”表示,12% 用“1F”表示,100% 用“FF”表示。
你知道什么真的很令人沮丧吗? Internet Explorer 曾经有 8 位十六进制代码。 但它们不是在 #RRGGBBAA 中。 它们在 #AARRGGBB 中。 如果你想得太多,就会念成“Argh!”;)
我认为微软当时做了一个糟糕的选择(以及所有传统的
filter
东西),将 Alpha 通道放在 RGB 之前,但使用十六进制语法是正确的。 但另一方面,我们有rgba
作为颜色函数,而不是argb
,所以坚持使用#rrggbbaa
是很自然的。W3C 将 Alpha 放在末尾也完全有可能是在报复微软。 并不是第一次这样。
我认为你的解释中有一个错误
11d == 0x1B 和 12d == 0x1C,而不是你写的那样 1A 和 1F。
十六进制转换混在一起了。 看起来有些是十进制,有些是百分比。
0 = 00(十进制和百分比)
1 = 01(十进制)
2 = 02(十进制)
…
9 = 09(十进制)
10 = 1A(百分比)
…然后它开始变得奇怪……
11 = 1C(百分比)
12 = 1F(百分比)
…无论如何,有人弄明白了,它可以工作……
254 = FE(十进制)
255 = FF(十进制)
现在看起来好了。 唯一未解决的问题是 9 = 23 应该根据 codepen 变成 9 = 17。 23 是数值。 17 是十六进制值。
你的意思是
这就是十六进制的实际工作方式:你从 0 到 F 计数,就像 0,1,..8,9,A,B,..F
看起来当用十六进制表示 0-255 时,这是 100% 正确的,但 0-100 的十六进制比例是不同的。
Chris,
看起来你示例中的第一个数字是错误的。
它应该是
http://stackoverflow.com/questions/5445085/understanding-colors-in-android-6-characters/25170174#25170174
令人困惑的是,它使用十六进制值来表示 1-100 的百分比。 所以十六进制 1A 在十进制中是 26,26 / 255 ≈ 10%。 这就是 1A 为 10 的原因。
这根本没有什么复杂或奇怪的,只是基本的数学和十六进制转换。 就好像我们使用其他 RGB 颜色组件的十六进制表示法一样。 Chris,你把它想得太复杂了;)
var range = 256; // 0 到 255 或 16*16 或 FF
var alphaLevel = 1/2; // 50% 所以 50/100
var x = Math.round(range * alphaLevel); // 从数字中简单舍入以去除浮点数
x.toString(16);
二进制是它有道理的原因。
Adrian 说得对。
为了简单起见,就像十六进制颜色一样,它是一个比率 00/00 是黑色,88/FF 是任何颜色的二分之一,FF/FF 是全色。 Alpha 也一样。
大约……
00(十六进制)= 00/FF(十六进制)= 0/255(十进制)= 0% Alpha
40(十六进制)= 40/FF(十六进制)= 64/255(十进制)= 25% Alpha
80(十六进制)= 80/FF(十六进制)= 128/255(十进制)= 50% Alpha
C0(十六进制)= C0/FF(十六进制)= 192/255(十进制)= 75% Alpha
FF(十六进制)= FF/FF(十六进制)= 255/255(十进制)= 100% Alpha
您可以用 R、G 或 B 替换“Alpha”。 它同样有效。
您的表格需要更新——我将左侧的数字标记为(十进制)百分比,更改了右侧十六进制数字的值,并明确地将数字标记为“十六进制”
0% = 00(十六进制)
1% = 03(十六进制)
2% = 05(十六进制)
3% = 08(十六进制)
4% = 0A(十六进制)
5% = 0D(十六进制)
…
9% = 17(十六进制)
~~…然后它开始变得奇怪……~~
10% = 1A(十六进制)
11% = 1C
12% = 1F
…
99% = FC(十六进制)
100% = FF(十六进制)
我只想说,我非常喜欢 css-tricks 上的所有深入文章,它是一个很棒、超级信息丰富的网站。 我将许多 css-tricks 文章用作我的首选参考!
希望我对十六进制颜色的评论对您有所帮助。
鉴于迄今为止的评论,我认为我们已经找到了一个充分的理由来避免使用 4/8 位十六进制代码,真的!:)。它们在 RGBA、HSLA 方面可能没有任何好的用例。除非你是十六进制代码的专家,否则它们完全不直观,但正如 CSS-Tricks 中经常出现的那样,这仍然是一篇关于你很少遇到的东西的有趣文章。
它们可能对工具生成器有用。如果你正在处理 CSS,它实际上不需要以人类可读的形式存在。它只是少了一步编译。此外,一个读取 CSS 文件的自动化工具可以简单地使用十六进制代码查找模式,并在不实际更改十六进制代码的情况下添加透明度。
简而言之,就像十六进制的大多数应用一样,它们对机器比对人更有用。事实上,让我们诚实地说,即使是 RGB 也可能不如 HSLA 对许多人那么好,因为一旦你决定了网站的主要色调,你所做的绝大多数更改都是针对色调的饱和度或洗褪程度。但是 HSLA 与 RGBA 是一个不同的讨论。
使用十六进制代码表示透明度与它被存储为二进制值有关。
该值在现实世界中被转换为百分比,但本质上它只是提供了 256 个透明度级别,就像 Photoshop 一样。如果你想知道,每个图形程序也能够拥有 256 个级别(0-255),介于两者之间的所有内容都是百分比。
从本质上讲,你可以把它想象成
因此,RGBA 中的 0-100% 实际上会转换为 0 到 255(十进制)之间的值。原因是底层存储是 8 位,因此你无论如何都有 256 个级别可以使用。
0-255(十进制)
00-FF(十六进制)
0000 0000 - 1111 1111(二进制)
你可以看到下面数字的演变。
最后,当你的颜色由工具自动生成时,将内容存储在十六进制中可能真的很有用。实际上,保持它在十六进制中比从十进制(顺便说一下,它最终仍然以二进制形式存储)来回转换要少一些工作。
我通常喜欢你在这里发布的内容,Chris,但你对比例的解释是错误的,你很容易混淆那些不太了解十六进制的人。
其他评论很好地解释了实际的序列,但我认为这里要说明的更重要的一点是,你并没有用十六进制表示 0-100(这将是 0-64),你只是拉伸了比例(50 是 100 的一半,128 是 256 的一半,两者都是最大值的 50%),然后改变了写数字的方式(十进制的 128 在十六进制中是 80,所以 80 在 8 位十六进制中给你 50%),重要的是你的值相对于最大值的比例。
真正最大的错误是选择在 rgba() 中使用 0-100 比例来表示 alpha,而不是与其他通道相同的 1-255 比例。
不失礼貌地说,这篇文章很好地说明了为什么我认为前端开发人员应该涉猎浏览器之外的编程。例如,编写一个独立的程序来反转图像。你将了解所有关于图像格式、颜色格式(24 位、32 位、64 位、RGB、RGBA、ABGR、ARGB 等等,其中一些具有不均匀的组件大小!)、字节级颜色和像素操作等等。在我多年的前端开发经验中,我发现对通用图形编程的基础知识对我的帮助很大。
一旦你做到了这一点,你就会很高兴永远不必再处理像 R5G6B5(16 位 RGB)或 R5G5B5A1(16 位 RGBA)这样的格式了;)
即使在今天,也有办法使用它。通过 PostCSS 插件:https://github.com/postcss/postcss-color-hex-alpha