16進数をRGBAに変換する

86

私のフィドル-http：//jsbin.com/pitu/1/edit

簡単な16進数からRGBAへの変換を試してみたかったのです。私が使用したブラウザは、デフォルトとしてrgbを使用して色をレンダリングするため、farbtasticカラーピッカーを使用する場合は、16進値が生成する背景色を取得して16進値をrgbに変換します（デフォルトではrgb =単純な変換）

)記号を, 1)に置き換えてみましたが、うまくいきませんでしたので、rgbからrgbaへの変換がどのように機能するかを確認しましたが、まだ問題があります。

jquery 

$('.torgb').val($('#color').css('background-color'));
$('.torgba').val().replace(/rgb/g,"rgba");

目標
ここに画像の説明を入力してください

編集：

TinyColorは、私がここでやりたいことすべてを実行する優れた色操作jsライブラリです。私はあなたたちがそれを試してみたいかもしれないと思います！- https://github.com/bgrins/TinyColor

javascript  jquery  colors 
— マイケルシュワルツ
ソース
1
TinyColorは、私がここでやりたいことすべてを実行する優れた色操作jsライブラリです。私はあなたたちがそれを試してみたいかもしれないと思います！
— Michael Schwartz

回答:

160 
//If you write your own code, remember hex color shortcuts (eg., #fff, #000)

function hexToRgbA(hex){
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
        c= hex.substring(1).split('');
        if(c.length== 3){
            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c= '0x'+c.join('');
        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',1)';
    }
    throw new Error('Bad Hex');
}

hexToRgbA('#fbafff')

/*  returned value: (String)
rgba(251,175,255,1)
*/
— ケネベック
ソース
1
ありがとう..奇跡のように働いた.. :)
— Manprit Singh Sahota 2017
4
非常に理解しやすいソリューションですが、8フォームのヘックスをサポートしていません#ff0000aaか？
— supersan
1
入力が正確に3文字または6文字でない場合、これは機能しません。
— KehlanKrumme20年1
97

@ ElDoRado1239には正しい考えがありますが、よりクリーンな方法もあります。 

function hexToRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexToRGB('#FF0000', 0.5);
スニペットを展開

— AJFarkas
ソース
1
注：これは、HEXショートカットでは失敗し#fffます。それは簡単に修正できるはずです！
— Matthew Herbst 2017年
1
ええ、はい、あなたは関数に正しい入力を与える必要があります…
— AJFarkas 2017年
非常に読みやすく、正規表現ベースのソリューションよりもはるかに気に入っています。
— dahrens 2017年
よくやった！！しかし、私が言及しなければならない小さなこと。文字列内のコンマとRGBA値の間にスペースを入れるという悪い経験があります。（例：rgba（255、35、234、0.5））。特に、この値を別のプログラムに渡す場合は、注意してください。文字列内の値の間にスペースを受け入れないプログラムがあるためです。したがって、これらのスペースを最終出力から削除することをお勧めします。
— タランガ2017年
eslint単なるスタイルの強制です。私が書いたものがあなたのスタイルの好みと矛盾するのは偶然です。実際、これは、たとえば、私が現在取り組んでいるプロジェクトのリンティングを通過しません。
— AJFarkas
34

'＃'の有無にかかわらず6文字の16進数のみを処理するES6関数：

const hex2rgba = (hex, alpha = 1) => {
  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
  return `rgba(${r},${g},${b},${alpha})`;
};

使用法：

hex2rgba('#af087b', .5)   // returns: rgba(175,8,123,0.5)
hex2rgba('af087b', .5)    // returns: rgba(175,8,123,0.5)
hex2rgba('af087b')        // returns: rgba(175,8,123,1)
— ロブスターファイター
ソース
以来toString上Arrayで合流,し、実際の入力はできrrggbbaa hexますが（...）constはRGB = hex.matchにそれを変更することができます。スライスを（0,3）.MAP（...）returnn` $ {RGB}、$ {アルファ} `;
— MortezaTourani19年
1
以下のコードは、hex2rgba（ '＃369'、0.5）;も変換します。var hex2rgba =（hex、alpha = 1）=> {const [r、g、b] = hex.match（hex.length <= 4？/ \ w / g：/ \ w \ w / g）.map（ x => parseInt（x.length <2？${x}${x}：x、16））; 戻るrgba(${r},${g},${b},${alpha}); };
— SerkanKONAKCI19年
17

クリーンなTypeScriptバージョン：

hexToRGB(hex: string, alpha: string) {

  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);

  if (alpha) {
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
  } else {
    return `rgb(${r}, ${g}, ${b})`;
  }
}

@AJFarkasの回答に基づいています。

— Chrillewoodz
ソース
1
これは毎回機能するとは限らず、r、g、または/およびbに対してNaNを返す場合があります。
— Renascent
私のために働いた！Thx
— サックス奏者
rgb(${r}, ${g}, ${b})アルファがないので、elseは戻ってはいけませんか？
— アマンシュカタリア
@AmanshuKatariaはい、そうすべきです。良い場所。
— Chrillewoodz
10

任意の16進形式のモジュラーアプローチ

主な課題は、2018年の時点でHEXのいくつかの形式があることです。6文字の従来の形式、3文字の短縮形式、およびアルファを含む新しい4文字と8文字の形式。次の関数は、任意のHEXフォームを処理できます。

const isValidHex = (hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)

const getChunksFromString = (st, chunkSize) => st.match(new RegExp(`.{${chunkSize}}`, "g"))

const convertHexUnitTo256 = (hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16)

const getAlphafloat = (a, alpha) => {
    if (typeof a !== "undefined") {return a / 255}
    if ((typeof alpha != "number") || alpha <0 || alpha >1){
      return 1
    }
    return alpha
}

export const hexToRGBA = (hex, alpha) => {
    if (!isValidHex(hex)) {throw new Error("Invalid HEX")}
    const chunkSize = Math.floor((hex.length - 1) / 3)
    const hexArr = getChunksFromString(hex.slice(1), chunkSize)
    const [r, g, b, a] = hexArr.map(convertHexUnitTo256)
    return `rgba(${r}, ${g}, ${b}, ${getAlphafloat(a, alpha)})`
}

アルファは、次の方法で関数に提供できます。

  1. 4または8フォームHEXの一部として。
  2. 0-1の間の2番目のパラメーターとして、

出力

    const c1 = "#f80"
    const c2 = "#f808"
    const c3 = "#0088ff"
    const c4 = "#0088ff88"
    const c5 = "#98736"

    console.log(hexToRGBA(c1))   //  rgba(255, 136, 0, 1)
    console.log(hexToRGBA(c2))   //  rgba(255, 136, 0, 0.53125)
    console.log(hexToRGBA(c3))   //  rgba(0, 136, 255, 1)
    console.log(hexToRGBA(c4))   //  rgba(0, 136, 255, 0.53125)
    console.log(hexToRGBA(c5))   //  Uncaught Error: Invalid HEX

    console.log(hexToRGBA(c1, 0.5))   //  rgba(255, 136, 0, 0.5)
    console.log(hexToRGBA(c3, 0.5))   //  rgba(0, 136, 255, 0.5)
— ベンカープ
ソース
1
一部のブラウザは不透明度のある16進色をサポートしていますが、サポートしていないブラウザもあります。この回答は、8形式の16進数をrgbaに変換するのに非常に役立ちました。rgbaはすべてのブラウザーでサポートされています。
— ジョージ
1
@ジョージ、ありがとう！これを作成した後、私はそのような包括的なアプローチが実際に必要かどうかを自問しました。あなたのフィードバックは貴重です。
— ベン・鯉
1
アルファ計算には小さなバグが1つあると思います。私はそれが読むべきだと思います：/ 255を返します。そうでなければFFは1を返しません
— DustinKerstein20年
@DustinKersteinナイスキャッチ！おそらく害を及ぼすことはできませんが、それでも修正する必要があります。
— ベン・カープ
1
これが最良の答えであり、すべての単体テストでうまくいきました。
— メナイアラエディーン-アラジン
8

これは、アルファを指定した場合にrgbまたはrgbaを返す関数です。この関数は、短い16進カラーコードも変換します。

関数：

function hexToRgb(hex, alpha) {
   hex   = hex.replace('#', '');
   var r = parseInt(hex.length == 3 ? hex.slice(0, 1).repeat(2) : hex.slice(0, 2), 16);
   var g = parseInt(hex.length == 3 ? hex.slice(1, 2).repeat(2) : hex.slice(2, 4), 16);
   var b = parseInt(hex.length == 3 ? hex.slice(2, 3).repeat(2) : hex.slice(4, 6), 16);
   if ( alpha ) {
      return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
   }
   else {
      return 'rgb(' + r + ', ' + g + ', ' + b + ')';
   }
}

例：

hexToRgb('FF0000');// rgb(255, 0, 0)
hexToRgb('#FF0000');// rgb(255, 0, 0)
hexToRgb('#FF0000', 1);// rgba(255, 0, 0, 1)
hexToRgb('F00');// rgb(255, 0, 0)
hexToRgb('#F00');// rgb(255, 0, 0)
hexToRgb('#F00', 1);// rgba(255, 0, 0, 1)
— カメ
ソース
6

ES6モダン、正規表現フリー、エラーチェックと定数矢印関数を備えたソリューション。エラーに対してnullを返します。alphaが指定されていない場合は、デフォルト値の1が使用されます。

const hexToRGB = (hex, alpha = 1) => {
    let parseString = hex;
    if (hex.startsWith('#')) {parseString = hex.slice(1, 7);}
    if (parseString.length !== 6) {return null;}
    const r = parseInt(parseString.slice(0, 2), 16);
    const g = parseInt(parseString.slice(2, 4), 16);
    const b = parseInt(parseString.slice(4, 6), 16);
    if (isNaN(r) || isNaN(g) || isNaN(b)) {return null;}
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};

注：nullエラーの場合は戻ります。{return null;}throwステートメント：に置き換えることができ{throw "Not a valid hex color!";}ますが、その場合はtry-catch：内から呼び出す必要があります 。

hexToRGB("#3454r5") => null
hexToRGB("#345465") => rgba(52, 84, 101, 1)
hexToRGB("#345465", 0.5) => rgba(52, 84, 101, 0.5)
— スベリソン
ソース
5

それが役立つ場合の純粋なJSソリューション：

function hexToRGB(hex,alphaYes){
 var h = "0123456789ABCDEF";
 var r = h.indexOf(hex[1])*16+h.indexOf(hex[2]);
 var g = h.indexOf(hex[3])*16+h.indexOf(hex[4]);
 var b = h.indexOf(hex[5])*16+h.indexOf(hex[6]);
 if(alphaYes) return "rgba("+r+", "+g+", "+b+", 1)";
 else return "rgb("+r+", "+g+", "+b+")";
}

「alphaYes」は、アルファが必要かどうかに応じて「true」または「false」になります。

プレビュー

— ElDoRado1239
ソース
elseキーワードは、この場合には不要です。関係なく、非アルファを返します。
— アンディ
そうそう、でもこれは私にはもっと「きちんとした」ように思えます。個人的な好みの問題だと思います。
— ElDoRado1239 2014
このコードは小文字の16進数では機能しません（例#f0a16e）。私は変換することをお勧めhexしてtoUpperCase最初に。
— philippe_b 2016
3

@AJFarkasの回答が気に入り、ショートカット16進数（#fff）のサポートを追加しました

function hexToRGB(hex, alpha) {
    if (!hex || [4, 7].indexOf(hex.length) === -1) {
        return; // throw new Error('Bad Hex');
    }

    hex = hex.substr(1);
    // if shortcuts (#F00) -> set to normal (#FF0000)
    if (hex.length === 3) { 
        hex = hex.split('').map(function(el){ 
              return el + el + '';
            }).join('');
    }

    var r = parseInt(hex.slice(0, 2), 16),
        g = parseInt(hex.slice(2, 4), 16),
        b = parseInt(hex.slice(4, 6), 16);

    if (alpha !== undefined) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

document.write(hexToRGB('#FF0000', 0.5));
document.write('<br>');
document.write(hexToRGB('#F00', 0.4));
スニペットを展開

— ピーターデネフ
ソース
3

これは、もう少し防御的で、省略形の3桁の構文を処理するES2015 +バージョンです。

/*
 * Takes a 3 or 6-digit hex color code, and an optional 0-255 numeric alpha value
 */
function hexToRGB(hex, alpha) {
  if (typeof hex !== 'string' || hex[0] !== '#') return null; // or return 'transparent'

  const stringValues = (hex.length === 4)
        ? [hex.slice(1, 2), hex.slice(2, 3), hex.slice(3, 4)].map(n => `${n}${n}`)
        : [hex.slice(1, 3), hex.slice(3, 5), hex.slice(5, 7)];
  const intValues = stringValues.map(n => parseInt(n, 16));

  return (typeof alpha === 'number')
    ? `rgba(${intValues.join(', ')}, ${alpha})`
    : `rgb(${intValues.join(', ')})`;
}
— ジェフ
ソース
1

そしてもう1つはビットシフトに基づいています。

// hex can be a string in the format of "fc9a04", "0xfc9a04" or "#fc90a4" (uppercase digits are allowed) or the equivalent number
// alpha should be 0-1
const hex2rgb = (hex, alpha) => {
  const c = typeof(hex) === 'string' ? parseInt(hex.replace('#', ''), 16)  : hex;
  return `rgb(${c >> 16}, ${(c & 0xff00) >> 8}, ${c & 0xff}, ${alpha})`;
};
— ニッツェル
ソース
1

試してみてください

// hex - str e.g. "#abcdef"; a - alpha range 0-1; result e.g. "rgba(1,1,1,0)"
let hex2rgba= (hex,a)=> `rgb(${hex.substr(1).match(/../g).map(x=>+`0x${x}`)},${a})`

コードスニペットを表示

— KamilKiełczewski
ソース
1

3、4、6、8文字のカラーコードをサポートするクイック関数は次のとおりです。

function hexToRGBA(hex) {
    // remove invalid characters
    hex = hex.replace(/[^0-9a-fA-F]/g, '');

    if (hex.length < 5) { 
        // 3, 4 characters double-up
        hex = hex.split('').map(s => s + s).join('');
    }

    // parse pairs of two
    let rgba = hex.match(/.{1,2}/g).map(s => parseInt(s, 16));

    // alpha code between 0 & 1 / default 1
    rgba[3] = rgba.length > 3 ? parseFloat(rgba[3] / 255).toFixed(2): 1;

    return 'rgba(' + rgba.join(', ') + ')';
}

これが何をするかです。16進数以外の文字はすべて削除されます。HEXが5（3または4）文字より短い場合、各文字が2倍になります。次に、HEXを2文字のペアに分割し、各ペアを整数に解析します。アルファHEXがある場合は、0から1までのfloatに解析されます。それ以外の場合は、デフォルトで1になります。次に、配列を結合してRGBA文字列が形成され、返されます。

— ジャック・マレ
ソース
0

アルファ（ahex）を含むHEXをrgbaに変換します。

function ahex_to_rba(ahex) {
    //clean #
    ahex = ahex.substring(1, ahex.length);
    ahex = ahex.split('');

    var r = ahex[0] + ahex[0],
        g = ahex[1] + ahex[1],
        b = ahex[2] + ahex[2],
        a = ahex[3] + ahex[3];

    if (ahex.length >= 6) {
        r = ahex[0] + ahex[1];
        g = ahex[2] + ahex[3];
        b = ahex[4] + ahex[5];
        a = ahex[6] + (ahex[7] ? ahex[7] : ahex[6]);
    }

    var int_r = parseInt(r, 16),
        int_g = parseInt(g, 16),
        int_b = parseInt(b, 16),
        int_a = parseInt(a, 16);


    int_a = int_a / 255;

    if (int_a < 1 && int_a > 0) int_a = int_a.toFixed(2);

    if (int_a || int_a === 0)
        return 'rgba('+int_r+', '+int_g+', '+int_b+', '+int_a+')';
    return 'rgb('+int_r+', '+int_g+', '+int_b+')';
}

スニペットで自分で試してみてください：

コードスニペットを表示

原作者

— fdrv
ソース
0

@ ElDoRado1239に追加

アルファ値（typescriptスニペット）を渡したい人のために：

static hexToRGB(hex: string, alpha: number): string {
    var h = "0123456789ABCDEF";
    var r = h.indexOf(hex[1]) * 16 + h.indexOf(hex[2]);
    var g = h.indexOf(hex[3]) * 16 + h.indexOf(hex[4]);
    var b = h.indexOf(hex[5]) * 16 + h.indexOf(hex[6]);
    if (alpha) {
      return `rgba(${r}, ${g}, ${b}, ${alpha})`
    }

    return `rgba(${r}, ${g}, ${b})`;
  }
— レオ
ソース
-9

これを試して

<div class="torgb" onclick="rgba();" style="background-color:#000; width:20px; height:20px;"></div>
<script>
function rgba(){
$('.torgb').attr('background-color','rgba(0,0,0,1)');
$('.torgb').attr('onclick','hex();');
}
function hex(){
$('.torgb').attr('background-color','#000');
$('.torgb').attr('onclick','rgba();');
}
</script>
— napster3world
ソース
hexおよびrgba関数はどこから来ていますか？
— アンディ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.