javascript - JavascriptでRGB文字列を16進数に変換する

Question

多くの形式で指定された色の値をトゥイーンするColorPropsPluginでTweenMaxJSライブラリを使用していますが、問題は、結果が常に文字列の形式であるということです。

"rgb(255,255,255)"

これを次のような16進数に変換するにはどうすればよいですか。

0xffffff

Answer 1

最初はCSSの部分を切り取ります。

var a = "rgb(255,255,255)".split("(")[1].split(")")[0];

次に、それを別々の数値に分割します。

a = a.split(",");

単一の数値を16進数に変換します

var b = a.map(function(x){             //For each array element
    x = parseInt(x).toString(16);      //Convert to a base16 string
    return (x.length==1) ? "0"+x : x;  //Add zero if we get only one character
})

そしてそれを一緒に接着します：

b = "0x"+b.join("");

Answer 2

以下は、Colour私が作成して使用したクラスを基にしたものですが、パーセンテージと負の数を処理するため、ニーズに合わない場合があります。

デモ： http： //jsfiddle.net/5ryxx/1/

コード：

function componentFromStr(numStr, percent) {
    var num = Math.max(0, parseInt(numStr, 10));
    return percent ?
        Math.floor(255 * Math.min(100, num) / 100) : Math.min(255, num);
}

function rgbToHex(rgb) {
    var rgbRegex = /^rgb\(\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*\)$/;
    var result, r, g, b, hex = "";
    if ( (result = rgbRegex.exec(rgb)) ) {
        r = componentFromStr(result[1], result[2]);
        g = componentFromStr(result[3], result[4]);
        b = componentFromStr(result[5], result[6]);

        hex = "0x" + (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }
    return hex;
}

Answer 3

これが私がしたことです。

String.prototype.toRGB = function() {

  var rgb = this.split( ',' ) ;
  this.r=parseInt( rgb[0].substring(4) ) ; // skip rgb(
  this.g=parseInt( rgb[1] ) ; // this is just g
  this.b=parseInt( rgb[2] ) ; // parseInt scraps trailing )

}

を実行すると、'rgb(125,181,215)'.toRGB()が取得され、同じ文字列オブジェクトで（正しい整数値で）定義されたプロパティが返されます。.r.g.b

16進値を取得するには、次を使用します。yourNumber.toString(16);

Answer 4

function parseColor(color) {
    var arr=[]; color.replace(/[\d+\.]+/g, function(v) { arr.push(parseFloat(v)); });
    return {
        hex: "#" + arr.slice(0, 3).map(toHex).join(""),
        opacity: arr.length == 4 ? arr[3] : 1
    };
}
function toHex(int) {
    var hex = int.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

---

parseColor("rgb(210, 10, 10)");  // {"hex":"#d20a0a","opacity":1}
parseColor("rgba(210, 10, 10, 0.5)"); // {"hex":"#d20a0a","opacity":"0.5"}
parseColor("rgb(210)");  // {"hex":"#d2","opacity":1}

Answer 5

rgb2Hex = s => s.match(/[0-9]+/g).reduce((a, b) => a+(b|256).toString(16).slice(1), '0x')

console.log(rgb2Hex('rgb(10, 11, 12)'), rgb2Hex('rgb(255, 256, 257)'))

---

信頼性の低いユーザー入力にはお勧めしませんが、文字列は関数として評価することもできます。

rgb = (r, g, b) => '0x' + (1<<24|r<<16|g<<8|b).toString(16).slice(1)

console.log(eval('rgb(10, 11, 12)'), eval('rgb(255)'))

Answer 6

RGBToHex = function(r,g,b){
    var bin = r << 16 | g << 8 | b;
    return (function(h){
        return new Array(7-h.length).join("0")+h
    })(bin.toString(16).toUpperCase())
}

https://gist.github.com/lrvick/2080648

編集：

cnvrtRGBClrToHex('255,145,20')

function cnvrtRGBClrToHex(rgbClr){
    var rgbClr = rgbClr.split(',');
    var r = rgbClr[0];
    var g = rgbClr[1];
    var b = rgbClr[2];
    return (r << 16 | g << 8 | b).toString(16).toUpperCase()
}

Answer 7

コードゴルフアプローチ：

var h = x => '#' + x.match(/\d+/g).map(y = z => ((+z < 16)?'0':'') + (+z).toString(16)).join('');

これで、runningh("rgb(255, 60, 60)")はに戻り#ff3c3cます。

に置き換え'#'て'0x'、の形式で出力を取得できます0xff3c3c。

追加：それがどのように機能するか。

h、矢印関数として宣言された（ES6の新機能）は、RGB値（文字列）を受け取り、それをに格納しxます。次に、の数値のすべてのインスタンスがx正規表現方程式によって検出され、/\d+/gさらに配列として使用されます（によって返されmatch、によって使用されmapます）。

maploopsは、返された配列のすべての要素を関数によって処理しますy。この関数は、値（文字列として配列に格納されている）をz数値（）に変換し、+z16未満（((+z < 16)?'0':'')つまり、16進表現が1桁）であるかどうかをチェックし、trueの場合は'0'要素の開始にを追加します。

次に、それを基数16の文字列（16進数、by .toString(16)）に変換し、に返しますmap。つまり、基本的に、配列内のすべての10進文字列が16進文字列に変更されます。

join('')最後に、配列の要素は区切り文字なしで結合され（ ）、'#'文字列の先頭に追加されます。

注：コードに255より大きい値が指定されている場合、出力は6桁を超える16進数になります。同様に、の出力はrgb(256, 0, 0)になります#1000000。

値を255に制約するには、次のコードになります。

var h = x => '#' + x.match(/\d+/g).map(y = z => ((+z < 16)?'0':'') + ((+z > 255)?255:+z).toString(16)).join('');

Answer 8

rgb文字列から16進文字列への読み取り可能なワンライナー：

rgb = "rgb(0,128,255)"
hex = '#' + rgb.slice(4,-1).split(',').map(x => (+x).toString(16).padStart(2,0)).join('')

ここに戻ります"#0080ff"。

Answer 9

JavaScriptでRGBカラーからHEXに変換する別の方法

    color = "rgb(51,51,51);";
    color = '#'+color.match(/\d+/g).map(function(x){
        x = parseInt(x).toString(16);
        return (x.length==1) ? "0"+x : x;
    }).join("");