CSS十六进制RGBA？

Question

我知道你可以写......

background-color: #ff0000;

...如果你想要一些红色的东西。

你可以写......

background-color: rgba(255, 0, 0, 0.5);

...如果你想要一些红色和半透明的东西。

有没有简洁的方法用十六进制编写部分透明的颜色？我想要这样的东西：

background-color: #ff000088; <--- the 88 is the alpha

......或......

background-color: #ff0000 50%;

我以十六进制获取所有颜色，并且必须将它们全部转换为十进制0-255比例很烦人。

Answer 1

CSS颜色模块等级4 可能支持4位和8位十六进制RGBA表示法！

三周前（2014年12月18日）， CSS Color Module Level 4 editor's draft 已提交给CSS W3C工作组。虽然在一个非常容易发生变化的状态下，该文档的当前版本意味着在有些不久的将来，CSS将支持4位和8位十六进制RGBA表示法。

注意：以下引文中包含不相关的块，并且在您阅读此内容时可能已对源进行了大量修改（如上所述，它是编辑器的草稿而非最终文档）。如果情况发生了很大变化，请发表评论让我知道，以便我可以更新此答案！

  

§ 4.2。 RGB十六进制表示法：#RRGGBB

     

<hex-color>的语法是<hash-token>令牌，其值由3个，4个，6个或8个十六进制数字组成。换句话说，十六进制颜色被写为哈希字符“＃”，后跟一些数字0-9或字母a-f（字母的大小写无关紧要 - {{1 }}与#00ff00）相同。

     

8位

     

前6位数字的解释与6位数字符号相同。最后一对数字（解释为十六进制数字）指定颜色的Alpha通道，其中#00FF00表示完全透明的颜色，00表示完全不透明的颜色。

     

    

示例3
换句话说，ff表示与#0000ffcc相同的颜色（略微透明的蓝色）。

  

     

4位

     

这是8位数表示法的较短变体，“扩展”与3位数表示法相同。第一个数字（解释为十六进制数字）指定颜色的红色通道，其中rgba(0, 0, 100%, 80%)表示最小值，0表示最大值。接下来的三个数字分别代表绿色，蓝色和alpha通道。

这对CSS颜色的未来意味着什么？

这意味着如果没有从Level 4文档中完全删除它，我们很快就能够定义RGBA颜色（或HSLA颜色，如果你是那些的人之一）在浏览器中以十六进制格式支持Color Module Level 4的语法。

实施例

f

我何时可以在面向客户的产品中使用它？

除了所有的笑话：它目前只是2015年的开始，所以这些在任何浏览器中都不会支持很长一段时间 - 即使你的产品只是为了最好的工作而设计的到目前为止，您可能很快就会在生产浏览器中看到这种情况。

View current browser support for #RRGGBBAA color notation

然而，就是说，CSS的工作方式意味着我们今天可以开始使用这些！如果你真的想立即开始使用它们，只要你添加一个后备，任何不支持的浏览器都会忽略新属性，直到它们被认为有效：

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. */
}

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 */
}

只要您在支持CSS中的<figure>Hello, world!</figure>和background属性的浏览器上查看此答案，上述代码段结果中的color元素就会非常相似对此：

使用Windows上最新版本的Chrome（v39.0.2171）检查我们的<figure>元素，我们会看到以下内容：

6位十六进制回退被<figure>值覆盖，我们的8位十六进制值被忽略，因为它们目前被Chrome的CSS解析器视为无效。只要我们的浏览器支持这些8位数值，这些值就会覆盖rgba()个值。

更新2018-07-04： Firefox，Chrome和Safari现在支持这种表示法，Edge仍然缺失，但可能会跟随（https://caniuse.com/#feat=css-rrggbbaa）。

Answer 2

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+')';

Answer 3

我在发布问题的增强功能后找到了答案。遗憾！

MS Excel帮助了！

只需将十六进制前缀添加到十六进制颜色值即可添加具有与％值等效的不透明度的Alpha。

（在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

Answer 4

请参阅此处http://www.w3.org/TR/css3-color/#rgba-color

这是不可能的，很可能是因为0xFFFFFFFF大于32位整数的最大值

Answer 5

Chrome 52 + supports alpha hex：

background: #56ff0077;

Answer 6

我担心这是不可能的。您知道的rgba格式是唯一的格式。

Answer 7

如果你可以使用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));

Answer 8

使用red，green，blue转换为RGBA：

background-color: rgba(red($color), green($color), blue($color), 0.2);

Answer 9

在Sass中，我们可以写：

    var spinner = $(this),
    input = spinner.find('input[type="number"]'),
    btnUp = spinner.find('.quantity-up'),
    btnDown = spinner.find('.quantity-down'),
    min = input.attr('min'),
    max = input.attr('max');
    var step = input.attr('step');
    step = $.isNumeric(step) ? parseFloat(step) : 1;
    var scale = step.toString().split('.');
    scale = scale[1] ? scale.pop().length : 0;

  btnUp.click(function() {
    var oldValue = parseFloat(input.val());
    if (oldValue >= max) {
      var newVal = oldValue;
    } else {
      var newVal = oldValue + step;
    }
    spinner.find("input").val(parseFloat(newVal)).toFixed(scale);
    spinner.find("input").trigger("change");
  });

  btnDown.click(function() {
    var oldValue = parseFloat(input.val());
    if (oldValue <= min) {
      var newVal = oldValue;
    } else {
      var newVal = oldValue - step;
    }
    spinner.find("input").val(parseFloat(newVal)).toFixed(scale);
    spinner.find("input").trigger("change");
  });

在Hex representation of a color with alpha channel?中建议

Answer 10

迷人的王子：

只有Internet Explorer允许ARGB格式的4字节十六进制颜色，其中A是Alpha通道。它可用于渐变滤镜，例如：

filter  : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";

其中dir可以是：1（水平）或0（垂直） 颜色字符串可以是十六种颜色（＃FFAAD3）或argb十六进制颜色（＃88FFAAD3）。

Answer 11

嗯，你需要学习不同颜色的符号 Kuler为您提供了更好的机会来查找颜色和多种符号。
十六进制与RGB，FF = 255和00 = 0没有区别，但这就是你所知道的。所以在某种程度上，你必须想象它。
我使用Hex，RGBA和RGB。除非需要进行质量转换，否则手动执行此操作将帮助您记住奇怪的100种颜色及其代码。
对于大规模转换，写一些像Alarie给出的脚本。用色彩爆炸。

Answer 12

我需要使用以上答案：

background-color: rgba(red($color), green($color), blue($color), 0.2);

但是我想补充一点，因为OP需要CSS + HEX，所以下面的答案显示了如何使用十六进制值而无需预处理或任何其他混合：

background-color: rgba(red(#4d238c), green(#4d238c), blue(#4d238c), 0.2);

之所以有用，是因为您希望所选元素的背景颜色不透明，但是文本仍然清晰可见。

Answer 13

为什么不使用 background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

如果您为文本或可能是元素定位颜色，这应该更容易做到。