Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@guttyar2213

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

More than 1 year has passed since last update.

#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

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

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?