16進数のカラーコードをrgba変換する関数

概要

透明度のある背景色を動的に設定したいなと思い関数を作成しました。
経緯としては、BEMでいうModifierで色の属性をわけるような対応でもいいのですが、微妙な透明度や色の違いによりクラスが増えてきたため動的に設定することにしました。

引数について

$color_code/color_codeは、#から始まる16進数
$alpha/alphaは、デフォルト値を1とした透明度

PHP

カラーコードを定数などで共通管理しておけば以外と管理しやすいです。

xxx.php

function getConversionRgba($color_code, $alpha = 1) {
    $color_code = preg_replace('/#/', '', $color_code);

    $rgba_code['red']   = hexdec(substr($color_code, 0, 2));
    $rgba_code['green'] = hexdec(substr($color_code, 2, 2));
    $rgba_code['blue']  = hexdec(substr($color_code, 4, 2));
    $rgba_code['alpha'] = $alpha;
    $rgba_code['full']  = implode(',', $rgba_code);

    return $rgba_code;
}

Javascript

こっちはおまけみたいな感じです。

xxx.js

function getConversionRgba(color_code, alpha = 1) {
    var rgba_code = [];

    rgba_code['red']   = parseInt(color_code.substring(1,3), 16);
    rgba_code['green'] = parseInt(color_code.substring(3,5), 16);
    rgba_code['blue']  = parseInt(color_code.substring(5,7), 16);
    rgba_code['alpha'] = alpha;
    rgba_code['full']  = Object.values(rgba_code).join(',');

    return rgba_code;
}