CSS 十六进制 RGBA？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7015302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS hexadecimal RGBA?
提问by Li Haoyi
I know you can write ...
我知道你可以写...
background-color: #ff0000;
... if you want something that is red.
...如果你想要红色的东西。
And you can write ...
你可以写...
background-color: rgba(255, 0, 0, 0.5);
... if you want something red and translucent.
...如果你想要一些红色和半透明的东西。
Is there any terse way of writing partially transparent colors in hexadecimal? I want something like:
有没有什么简洁的方法可以用十六进制编写部分透明的颜色？我想要这样的东西：
background-color: #ff000088; <--- the 88 is the alpha
... or ...
... 或者 ...
background-color: #ff0000 50%;
I am getting all my colors in hexadecimal, and having to convert them all to the decimal 0-255 scale is annoying.
我以十六进制获取所有颜色，并且必须将它们全部转换为十进制 0-255 比例很烦人。
回答by James Donnelly
The CSS Color Module Level 4 will probablysupport 4 and 8-digit hexadecimal RGBA notation!
CSS 颜色模块级别 4可能会支持 4 位和 8 位十六进制 RGBA 表示法！
Three weeks ago (18th of December 2014) the CSS Color Module Level 4 editor's draftwas submitted to the CSS W3C Working Group. Though in a state which is heavily susceptible to change, the current version of the document implies that in the somewhatnear future CSS will support both the 4 and 8-digit hexadecimal RGBA notation.
三周前（2014 年 12 月 18 日），CSS 颜色模块第 4 级编辑器的草案已提交给 CSS W3C 工作组。尽管这在很大程度上容易受到变化的状态下，文件的当前版本意味着，在一定程度上不久的将来CSS将同时支持4位和8位十六进制RGBA符号。
Note: the following quote has irrelevant chunks cut out and the source may have been heavily modified by the time you read this (as mentioned above, it's an editor's draft and not a finalised document).
If things have heavily changed, please leave a comment letting me know so I can update this answer!
注意：以下引文删除了不相关的部分，并且在您阅读本文时可能已经对来源进行了大量修改（如上所述，这是编辑的草稿，而不是最终文档）。
如果事情发生了重大变化，请发表评论让我知道，以便我可以更新此答案！
§4.2. The RGB hexadecimal notations: #RRGGBB
The syntax of a
<hex-color>is a<hash-token>token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, "#", followed by some number of digits0-9or lettersa-f(the case of the letters doesn't matter -#00ff00is identical to#00FF00).8 digits
The first 6 digits are interpreted identically to the 6-digit notation. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where
00represents a fully transparent color andffrepresent a fully opaque color.Example 3
In other words,#0000ffccrepresents the same color asrgba(0, 0, 100%, 80%)(a slightly-transparent blue).4 digits
This is a shorter variant of the 8-digit notation, "expanded" in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where
0represents the minimum value andfrepresents the maximum. The next three digits represent the green, blue, and alpha channels, respectively.
§4.2。RGB 十六进制表示法：#RRGGBB
a 的语法
<hex-color>是一个<hash-token>标记，其值由 3、4、6 或 8 个十六进制数字组成。换句话说，十六进制颜色写为哈希字符“#”，后跟一定数量的数字0-9或字母a-f（字母的大小写无关紧要 -#00ff00与 相同#00FF00）。8位
前 6 位数字的解释与 6 位数字表示法相同。最后一对数字，解释为十六进制数，指定颜色的 alpha 通道，其中
00表示完全透明的颜色，ff表示完全不透明的颜色。示例 3
换句话说，#0000ffcc表示与rgba(0, 0, 100%, 80%)（略透明的蓝色）相同的颜色。4位数
这是 8 位表示法的较短变体，以与 3 位表示法相同的方式“扩展”。第一个数字，解释为十六进制数，指定颜色的红色通道，其中
0代表最小值，f代表最大值。接下来的三位数字分别代表绿色、蓝色和 Alpha 通道。
What does this mean for the future of CSS colours?
这对 CSS 颜色的未来意味着什么？
This means that assuming this isn't completely removed from the Level 4 document, we'll soon be able to define our RGBA colours (or HSLA colours, if you're one of thoseguys) in hexadecimal format in browsers which support the Color Module Level 4's syntax.
这意味着假设这并没有完全从 Level 4 文档中删除，我们很快就能在支持 Color 的浏览器中以十六进制格式定义我们的 RGBA 颜色（或 HSLA 颜色，如果你是这些人中的一员）模块级别 4 的语法。
Example
例子
elem {
background: rgb(0, 0, 0); /* RGB notation (no alpha). */
background: #000; /* 3-digit hexadecimal notation (no alpha). */
background: #000000; /* 6-digit hexadecimal notation (no alpha). */
background: rgba(0, 0, 0, 1.0); /* RGBA notation. */
/* The new 4 and 8-digit hexadecimal notation. */
background: #0000; /* 4-digit hexadecimal notation. */
background: #00000000; /* 8-digit hexadecimal notation. */
}
When will I be able to use this in my client-facing products?
我什么时候才能在面向客户的产品中使用它？
All jokes aside:it's currently only the start of 2015, so these will not be supported in any browser for quite some time yet - even if your product is only designed to work on the most up-to-date of browsers you'll probably not be seeing this in action in a production browser any time soon.
抛开所有笑话：目前只是 2015 年的开始，因此在相当长的一段时间内，任何浏览器都不会支持这些 - 即使您的产品仅设计用于最新的浏览器，您也可能会不会很快在生产浏览器中看到这一点。
View current browser support for #RRGGBBAA color notation
However, that said, the way CSS works means that we can actually start using these today! If you really want to start using them right now, as long as you add a fall back any non-supporting browsers will simply ignore the new properties until they are deemed valid:
然而，也就是说，CSS 的工作方式意味着我们今天就可以真正开始使用这些了！如果您真的想立即开始使用它们，只要您添加回退，任何不支持的浏览器都会忽略新属性，直到它们被认为有效：
figure {
margin: 0;
padding: 4px;
/* Fall back (...to browsers which don't support alpha transparency). */
background: #FEFE7F;
color: #3F3FFE;
/* Current 'modern' browser support. */
background: rgba(255, 255, 0, 0.5);
color: rgba(0, 0, 255, 0.75);
/* Fall... foward? */
background: #ffff007F; /* Or, less accurately, #ff08 */
color: #0000ffbe; /* Or #00fc */
}<figure>Hello, world!</figure>As long as you're viewing this answer on a browser which supports the backgroundand colorproperties in CSS, the <figure>element in result of the above snippet will look very similar to this:
只要您在支持CSS 中的background和color属性的浏览器上查看此答案，<figure>上述代码段的结果中的元素将与此非常相似：
Using the most recent version of Chrome on Windows (v39.0.2171) to inspect our <figure>element, we'll see the following:
在 Windows 上使用最新版本的 Chrome (v39.0.2171) 检查我们的<figure>元素，我们将看到以下内容：
The 6-digit hexadecimal fall back is overridden by the rgba()values, and our 8-digit hexadecimal values are ignored as they are currently deemed invalid by Chrome's CSS parser. As soon as our browser supports these 8-digit values, these will override the rgba()ones.
6 位十六进制回退被rgba()值覆盖，我们的 8 位十六进制值被忽略，因为它们目前被 Chrome 的 CSS 解析器视为无效。只要我们的浏览器支持这些 8 位值，这些值就会覆盖这些值rgba()。
UPDATE 2018-07-04:Firefox, Chrome and Safari are support this notation now, Edge still missing but will probably follow (https://caniuse.com/#feat=css-rrggbbaa).
更新 2018-07-04：Firefox、Chrome 和 Safari 现在支持此符号，Edge 仍然缺失，但可能会跟进（https://caniuse.com/#feat=css-rrggbbaa）。
回答by T9b
I found the answer after posting the enhancement to the question. Sorry!
我在发布问题的增强后找到了答案。对不起！
MS Excel helped!
MS Excel 有帮助！
simply add the Hex prefix to the hex colour value to add an alpha that has the equivalent opacity as the % value.
只需将十六进制前缀添加到十六进制颜色值即可添加具有与 % 值等效的不透明度的 alpha。
(in rbga the percentage opacity is expressed as a decimal as mentioned above)
（在 rbga 中，不透明度百分比表示为如上所述的小数）
Opacity % 255 Step 2 digit HEX prefix
0% 0.00 00
5% 12.75 0C
10% 25.50 19
15% 38.25 26
20% 51.00 33
25% 63.75 3F
30% 76.50 4C
35% 89.25 59
40% 102.00 66
45% 114.75 72
50% 127.50 7F
55% 140.25 8C
60% 153.00 99
65% 165.75 A5
70% 178.50 B2
75% 191.25 BF
80% 204.00 CC
85% 216.75 D8
90% 229.50 E5
95% 242.25 F2
100% 255.00 FF
回答by James Alarie
RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';
回答by Griffin
See here http://www.w3.org/TR/css3-color/#rgba-color
见这里http://www.w3.org/TR/css3-color/#rgba-color
It is not possible, most probably because 0xFFFFFFFF is greater than the maximum value for 32bit integers
这是不可能的，很可能是因为 0xFFFFFFFF 大于 32 位整数的最大值
回答by Jeremy Lynch
Use red, green, blueto convert to RGBA:
使用red, green,blue转换为 RGBA：
background-color: rgba(red($color), green($color), blue($color), 0.2);
回答by Madara's Ghost
I'm afraid that's not possible. the rgbaformat you know is the only one.
恐怕这是不可能的。rgba你知道的格式是唯一的。
回答by Julian Mann
If you can use LESS, there is a fade function.
如果可以使用 LESS，则有淡入淡出功能。
@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);
background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color);
// result:
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));
回答by Lajos Meszaros
Charming Prince:
白马王子：
Only internet explorer allows the 4 byte hex color in the format of ARGB, where A is the Alpha channel. It can be used in gradient filters for example:
只有 Internet Explorer 允许 ARGB 格式的 4 字节十六进制颜色，其中 A 是 Alpha 通道。它可以用于梯度过滤器，例如：
filter : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";
Where dir can be: 1(horizontal) or 0(vertical) And the color strings can be hex colors(#FFAAD3) or argb hex colors(#88FFAAD3).
其中 dir 可以是：1（水平）或 0（垂直）并且颜色字符串可以是十六进制颜色（#FFAAD3）或 argb 十六进制颜色（#88FFAAD3）。
回答by Lajos Meszaros
Well, different color notations is what you will have to learn.
Kulergives you a better chance to find color and in multiple notations.
Hex is not different from RGB, FF = 255 and 00 = 0, but that's what you know. So in a way, you have to visualize it.
I use Hex, RGBA and RGB. Unless mass conversion is required, manually doing this will help you remember some odd 100 colors and their codes.
For mass conversion write some script like one given by Alarie. Have a blast with Colors.
嗯，不同的颜色符号是你必须学习的。
Kuler让您有更好的机会找到颜色和多种符号。
Hex 与 RGB、FF = 255 和 00 = 0 没有区别，但这就是您所知道的。所以在某种程度上，你必须把它形象化。
我使用十六进制、RGBA 和 RGB。除非需要大量转换，否则手动执行此操作将帮助您记住一些奇怪的 100 种颜色及其代码。
对于批量转换，请编写一些脚本，例如 Alarie 给出的脚本。尽情享受色彩吧。
