web-dev-qa-db-ja.com

JavaScriptでRGB文字列を16進数に変換する

多くのフォーマットで指定されたカラー値をトゥイーンするColorPropsPluginでTweenMax JSライブラリを使用していますが、問題は常に結果が文字列の形式になることです。

"rgb(255,255,255)"

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

0xffffff
javascripthexrgb
21
Neil

私は最初に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("");
32
Nippey

以下は、私が作成して使用した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;
}
7
Tim Down

これは私がやったことです。

_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); を使用します

6
bobobobo
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}
3
Stack

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

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

ここで、h("rgb(255, 60, 60)")を実行すると、#ff3c3cが返されます。

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


EXTRA：仕組み

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

map loopsは、関数yによって、返された配列のすべての要素を処理します。この関数は、zが数値（+z）に変換するときに値（文字列として配列に格納されていた）を受け取り、それが16未満（((+z < 16)?'0':'')、つまり16進数表現に1桁）、trueの場合、'0'を要素の先頭に追加します。

次に、それを16進数の文字列（16進数、.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('');
1
Vedaant Arya
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)'))
1
Slai
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()
}
0
Sebastian