JavaScriptで6桁のカラーコード（#ffffff）をrgb（255,255,255）に変換する 🎨

f:id:kimizuka:20211013111959p:plain

ウェブアプリの開発中に、#ffffff → 255,255,255 みたいな変換が必要になりました。
こんな処理は絶対に誰かが書いているはずだ。と思い調べてみたところ、

ばっちり見つかりました。

ソースコードも37行とかなり短く、これを使おうかなとも思ったのですが、外部ライブラリが使用できない環境だったので、自作することにしました。

function getRgbFromColorCode(colorCode) {
    return String(colorCode.slice(1).match(/.{2}/g).map(hex => parseInt(hex, 16)));
}

前提条件として、カラーコードは必ず6桁で入力される環境だったため、ものすごく簡単に書けました。

getRgbFromColorCode('#ffffff') → '255,255,255'
getRgbFromColorCode('#ff0000') → '255,0,0'

6桁での入力では問題なく動作します。ただし不正な値の入力があってもエラーは投げません。

さらに、実際は#fffという形で3桁の入力された時用の処理や、透明度を含む8桁の入力を考慮したりしないといけない環境であることが多いと思われるので、結局のところはこちらのパッケージを使うのが良いと思います。

みかづきブログ・カスタム