rgb()表記の値とrgb()表記以外の値をrgb配列にする

#fffなどの値を[255, 255, 255]などのデータに変換する用事があったのでメモ。

結論

const str2rgb=e=>{let p=document.createElement("p");p.style.color=e;return p.style.color.replace(/[()rgba ]/g,"").split(",")}

使い方:

str2rgb("#fff")
// => [255, 255, 255]

rgba、hslなどの形式も対応している。
※ ブラウザが解釈できれば

やっていること

jsでスタイルを取得するとrgbに変換されることを利用したもの。
なのでdocument.createElementで適当な要素を作り色を指定&取得して整形して返しているだけ。

没バージョン

こちらは#fffなどの表記しか対応していない上コードが長い。

s=>/^#([0-9a-f]?[0-9a-f]{3}|([0-9a-f]{2})?[0-9a-f]{6})$/i.test(s)?(s.replace(/#/g,"").split("").map(e=>/4|5/.test(s.length+"")?e.repeat(2).split(""):e)).flat().reduce((b,c,i)=>i%2==0?b+","+c:b+c,"").substr(1).split(",").map(e=>parseInt(e,16)):[]

使い方は同じ。

追記

DOMに触るとオーバーヘッドがあるのでは？という点が心配だったので、簡単なベンチマークを取ってみました。

これはhsl()や色名の指定に対応していない簡易版のピュアJS実装との比較ですが、自分の環境ではDOMに触る方が6～7倍遅いという> 結果でした。
とはいえ、10万回実行してもChromeではピュアJSで70ミリ秒に対しDOMで460ミリ秒といったオーダーで、1回あたりの実行コストはもはや誤差レベルなので、実用上はDOMを使う方法で全く問題無さそうですね。

自分の環境でも試したところ、今回のプログラムは1.2秒0.012msほどかかっていました。

追記2
https://qiita.com/nyanwan202/items/3ceac2088fefd9b5e3ad#comment-82f2c8defe5f4bd036f0
また勘違いしていました。
1.2秒だと思っていたのは10万回の実行時間だそうで、
1回あたりは0.012msだそうです。

これは個別にプログラム書いて計算した方がよさそう。

あとnpmパッケージで良さそうなのないかと思って探して見ました。

• https://www.npmjs.com/package/color
• https://www.npmjs.com/package/color-convert
  どちらもGithubでソースコードを見たところDOMはいじってないようです。
  よくよく考えたらNode.js上で動くんですから当たり前ですね。

weekly downloadsはcolor-convertの方が上ですね(2019/05/08)。

Name	Count
color	5,719,940
color-convert	9,194,594

文章の書き方が違うのは気分