web-dev-qa-db-ja.com

8桁の16進数の色をRGBA色に変換しますか？

このテーマで見つけたすべてのものは、16進数をrgbに変換してから1のアルファを追加するだけです。16進数からも目的のアルファを取得したいと思います。

#949494E8や#DCDCDC8Fなどの色は、明らかに0または1ではないアルファ値を持っています。

csscolorshexrgba
19
Steve

8桁の16進コードからCSS rgba値に変換できる簡単なJSfiddleフォームを作成しました;）

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

基本はかなり単純です。指定した文字列を2桁の部分に分割し、アルファチャネルの場合はパーセンテージ比に、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));
});
_

変換の要点は次のとおりです。

  • 16進数のRGBチャネルを10進数値に変換します。これは、parseInt(hexValue, 16)を使用して行われます。
  • アルファチャネルを16進数でパーセント比率に変換します。これは、単純に10進値に変換し（上記のポイントを参照）、その相対値を255に計算することによって行われます。
41
Terry

これがあなたのための小さなツールチップです：

この場合 #DCDCDC8FDCはalpha = 220、

16進数から10進数[DC]：

  1. 1位D = 13 * 16 ^ 1 = 208
  2. 2位C = 12 * 16 ^ 0 = 12
  3. 合計= 12 + 208 = 220

そして220/255 = 0.86の不透明度

enter image description here

バイトはAABBGGRRの順序でリトルエンディアンマシンのメモリに格納されます

これを確認してください： http://www.statman.info/conversions/hexadecimal.html

5
Piotr Dajlido