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

问题描述

我在这个主题上发现的所有内容只是将十六进制转换为 rgb，然后添加 1 的 alpha.我也想从十六进制数字中获取预期的 alpha.

Everything I've found on this subject simply converts the hex to rgb and then adds an alpha of 1. I want to get the intended alpha from the hex digits as well.

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

A color such as #949494E8 or #DCDCDC8F clearly has an alpha value that's not 0 or 1.

推荐答案

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

I have made a quick JSfiddle form that allows you to convert from 8-digit hex code into CSS rgba values ;)

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

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

The basis is rather simple — to split the string you have provided into parts of 2-digits, and perform conversion into percentage ratios for the alpha channel, and to decimals for the RGB channels. The markup is as follow:

<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 来完成的.

这篇关于将 8 位十六进制颜色转换为 rgba 颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！