将8位十六进制颜色转换为rgba颜色?

时间:2015-03-17 13:19:44

标签: css colors hex rgba

我在此主题上找到的所有内容只是将十六进制转换为rgb,然后添加1的alpha。我想从十六进制数字中获取预期的alpha。

#949494E8#DCDCDC8F等颜色的alpha值明显不是0或1.

2 个答案:

答案 0 :(得分:24)

我已经制作了一个快速的JSfiddle表单,允许您将8位十六进制代码转换为CSS rgba值;)

https://jsfiddle.net/teddyrised/g02s07n4/embedded/result/

基础相当简单 - 将您提供的字符串拆分为2位数的部分,并执行转换为Alpha通道的百分比率和RGB通道的小数位数。标记如下:

<form action="">
    <select id="format">
        <option value="rgba">RGBa: RRGGBBAA</option>
        <option value="argb">aRGB: AARRGGBB</option>
    </select>
    <input type="text" id="hex" value="#949494E8" />
    <button>Convert</button>
</form>
<p id="rgba"></p>

逻辑:

// Remove hash
var hex = $('#hex').val().slice(1);

// Split to four channels
var c = hex.match(/.{1,2}/g);

// Function: to decimals (for RGB)
var d = function(v) {
    return parseInt(v, 16);
};
// Function: to percentage (for alpha), to 3 decimals
var p = function(v) {
    return parseFloat(parseInt((parseInt(v, 16)/255)*1000)/1000);
};

// Check format: if it's argb, pop the alpha value from the end and move it to front
var a, rgb=[];
if($('#format').val() === 'argb') {
    c.push(c.shift());
}

// Convert array into rgba values
a = p(c[3]);
$.each(c.slice(0,3), function(i,v) {
    rgb.push(d(v));
});

转换的要点如下:

  • 将十六进制的RGB通道转换为十进制值。这是通过使用parseInt(hexValue, 16)
  • 完成的
  • 将十六进制的Alpha通道转换为百分比。这可以通过简单地将其转换为十进制值(参见上面的点),并将其相对值计算为255来完成。

答案 1 :(得分:5)

以下是一个小工具提示:

在这种情况下,#DCDCDC8F DCalpha = 220,

十六进制到十进制[DC]:

  1. 第一名D = 13 * 16 ^ 1 = 208
  2. 第二位C = 12 * 16 ^ 0 = 12
  3. sum = 12 + 208 = 220
  4. 然后220/255 = 0.86不透明度。

    enter image description here

    字节按照AABBGGRR

    的顺序存储在little-endian机器的内存中

    请检查:http://www.statman.info/conversions/hexadecimal.html