2017/10/16更新

[フロントエンド] 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の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。