具有Alpha通道的颜色的十六进制表示形式?


117

关于如何以十六进制格式表示颜色(包括alpha通道),是否有W3或其他值得注意的标准?

是#RGBA还是#ARGB?


8
它在CSS彩色级别来4 (见第四弹点)
森那维达斯

@ŠimeVidas如果您回答了这个问题,我会赞成您的。
Ciro Santilli郝海东冠状病六四事件法轮功2014年

@cirosantilli我是否需要代表?:-P
森那维达斯

1
@ŠimeVidas笑,如果你愿意分享一些则... =)
西罗桑蒂利郝海东冠状病六四事件法轮功

这里有一个类似CSS的特定问题:CSS十六进制RGBA?
James Donnelly

Answers:


82

在CSS 3中,引用该规范,“ RGBA值没有十六进制表示法”(请参阅CSS Level 3 spec)。相反,您可以将rgba()函数符号与小数或百分数一起使用,例如rgba(255,0,0,0.5)将是50%透明的红色。RGB通道为0-255或0%-100%,alpha为0-1。

在CSS 4 *中,您可以使用8位十六进制颜色的第7个和第8个字符或4位十六进制颜色的第4个字符来指定Alpha通道(请参阅CSS Level 4 spec *)

截至2019年5月,可以预期超过80%的用户了解#RGBA格式

  • 自Firefox 49起,Firefox就支持此语法(Mozilla错误567283)。
  • 自Safari 10起,Safari就支持此语法。
  • Chrome自Chrome 62起就支持此语法。对于较早的版本,您可以启用实验性网络功能来使用此语法。请参阅Chromium问题618472Webkit错误150853
  • 面向Android P或更高版本的Android应用可以使用此语法
  • Opera在Opera 52(或启用了实验性网络功能的Opera 39)中支持此语法。
  • IE 11和EdgeHTML 18(Edge 44)不支持此语法。基于Chromium的Edge版本将支持此语法。

CanIUse.com上提供了最新的浏览器支持信息

*技术上仍处于草稿中,但是鉴于浏览器的支持,这不太可能更改。


2
到目前为止,Mozilla(Firefox 49)似乎支持#RRGGBBAA和#RGBA
Shiyaz

92

似乎没有十六进制的alpha格式:http : //www.w3.org/TR/css3-color/

无论如何,如果您使用CSS预处理程序(如SASS),则可以将十六进制传递给rgba:background:

rgba(#000, 0.5);

而且预处理器只是将十六进制代码自动转换为rgb。


15

我不确定是否有官方标准-

RGBA是我见过的Web Macromedia的表示形式,其他人使用ARGB

我相信RGBA是更常见的表示形式。

如果有帮助,请参阅W3 for CSS3
http://www.w3.org/TR/css3-color/#rgba-color

编辑(帕特里克):以上W3链接的引文

与RGB值不同,RGBA值没有十六进制表示法


2
另外,用于指定带有Alpha颜色的CSS函数是rgba()
琥珀色

8
从您发布的W3链接中:与RGB值不同,RGBA值没有十六进制表示法。
Patrick Klug

2
我以前看过#RGB,A。奇怪的。
约书亚

对于Android的绘图资源,这似乎是ARGB:developer.android.com/reference/android/graphics/drawable/...
德里克·库尔特

10

Chrome 52+ 支持 alpha十六进制:

background: #56ff0077;

对于较旧的浏览器,您必须使用:

background-color: rgba(255, 220, 0, 0.3);

3
不行,除非您启用实验性网络功能,否则不会这样,因为这会在Android上引起问题。有关浏览器支持的详细信息,请参见上面的答案。
thelem

3

您可以尝试将十六进制颜色放入GIMP或照片店的颜色选择器中,以获取RGB值,然后使用alpha值。例如。红色是#FF0000rgb(255,0,0)如果您要红色的alpha值为0.5 rgba(255,0,0,.5)

也许不是您想要的,但希望能有所帮助。


1
这被否决了,似乎有点苛刻。它没有回答所提出的问题,但问题没有说明他们为什么想知道。如果他们只是想在CSS中使用RGBA颜色,那么这个答案是正确的。
thelem 2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.