JS/TSでRGBをPIXI JSのColorの数値型に変換するには?

簡潔な方法(追記)

解説

これは、Rの値とGの値とBの値を二進数にして考えます。
例えば今回は、R=255,G=128,B=64として考えると、
Rを二進数にすると、'11111111'になります。
Gを二進数にすると、'10000000'になります。
Bを二進数にすると、'00010000'になります。
ここから、RGBの値を'<<(左シフト)'を使ってHEXの形にしていきます。
では、Rの二進数の値を左に16回動かします。
すると、結果は'111111110000000000000000'になります。
そして、Gの二進数の値を左に8回動かします。
すると、結果は'1000000000000000'になります。
そして、Bの二進数の値はそのままにします。
これらの値を'|(OR)'を使って結合していきます。

R:111111110000000000000000
G:        1000000000000000
B:                00010000
--------------------------
  111111111000000000010000

この計算結果がRGBをHEXに変換したものです。
これを16進数に直すと、'ff8010'になります。

同じ色であることが確認できますね。

Javascript版

export function ToHex(R,G,B) {
  return R << 16 | G << 8 | B;
}

Typescript版

export function ToHex(R:number,G:number,B:number) {
  return R << 16 | G << 8 | B;
}

冗長な方法

解説

まず、RGB値のR,G,Bの値を"toString(16)"で16進数に変換し、
その16進数の値が1桁の場合は、先頭に0をつける。
最後に、"0x"に16進数のR,G,Bの値をくっつけて"parseInt"で数字に変換したら完成!

Javascript版

export function ToHex(R,G,B) {
    function hex(rgb) {
        const ret = rgb.toString(16);
        if (ret.length == 1) return "0" + ret;
        else return ret;
    }
    const r = hex(R);
    const g = hex(G);
    const b = hex(B);
    return parseInt("0x" + r + g + b);
}

Typescript版

export function ToHex(R:number,G:number,B:number) {
    function hex(rgb: number) {
        const ret = rgb.toString(16);
        if (ret.length == 1) return "0" + ret;
        else return ret;
    }
    const r = hex(R);
    const g = hex(G);
    const b = hex(B);
    return Number.parseInt("0x" + r + g + b);
}