[フロントエンド] Javascriptでカラー定義を変換する（hex -> rgba）

こんにちは、@yoheiMuneです。
今日はTips的な話ですが、hexで定義されたカラーコード（例：#FF00FF）を、rgbaカラーコード（例：rgba(255, 0, 255, 1)）に変換するための、JavaScriptコードを書く機会があったのでブログにも残したいと思います。

目次

やりたかったこと

外部から指定されるカラーコードがhex定義（例：FF0000）なのですが、それを元に背景色を指定したい、それも透過で指定したいという要件でした。そのためにhexからrgbaに変換するためのコードを実装した次第です。

hexからrgbaに変換するコード

実際には、以下のようなコードで実装することができました。

/**
 * hexカラーコード定義をrgbaに変換する.
 */
function hex2rgba (hex, alpha = 1) {

    // ロングバージョンの場合（例：#FF0000）
    let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
    let c = null
    if (r) {
        c = r.slice(1,4).map(function(x) { return parseInt(x, 16) })
    }
    // ショートバージョンの場合（例：#F00）
    r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
    if (r) {
        c = r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16) })
    }
    // 該当しない場合は、nullを返す.
    if (!c) {
        return null
    }
    return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${alpha})`
}

hexカラー定義はロングバージョンとショートバージョンそれぞれが存在するので、それらに対応したコードになります。
実際に動かしてみると、以下のような出力となります。

hex2rgba('#F00')          // "rgba(255, 0, 0, 1)"
hex2rgba('#F00', 0.1)     // "rgba(255, 0, 0, 0.1)"
hex2rgba('#FF0F0F', 0.1)  // "rgba(255, 15, 15, 0.1)"

いい感じに動いてますね。あとはこれをHTML要素のスタイルに適用すればいい感じに色の指定を行うことができます。

参考資料

今回の実装は、以下を参考にしました。ありがとうございます。

javascript - RGB to Hex and Hex to RGB - Stack Overflow

最後に

最初は何かライブラリないかなと思って探していたのですが、意外と実装が簡単だったので自分で実装することにしました。よく思えば16進数と10進数の変換なので、気づくと楽チンですね！

最後になりますが本ブログでは、フロントエンド・Go言語・Python・Linux・Node.js・インフラ・開発環境・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！