🎨

JavascriptでRGBAの値を変更する

2022/07/03に公開

文字形式のRGBAの値を変える関数

"rgba(R, G, B, A)"という形のrgbaの文字列を入れて、RGBAの値を変更して同じ形の文字列で返してくれる。

function changeColorRGBA (rgbaStr, r=null, g=null, b=null, a=null) {
    //strを配列に分割  例えば"rgba(201, 203, 207, 0.4)"を[ 201, 203, 207, 0.4 ]にする
    rgba = rgbaStr.split('(')[1]
    rgba = rgba.split(')')[0]
    rgba = rgba.split(",")
    rgba = rgba.map(Number)

    //rgbaの各値に代入。
    rgba[0] = r!=null ? r : rgba[0]
    rgba[1] = g!=null ? g : rgba[1]
    rgba[2] = b!=null ? b : rgba[2]
    rgba[3] = a!=null ? a : rgba[3]

    rgbaStrNew = "rgba("+rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")"
    return rgbaStrNew
}

デモ

値を変化させない場合は、引数にundefinedを入れる。
例えば、
r=10, a=0.3に変化させたい場合は以下のように使用。

rgbaStr = "rgba(201, 203, 207, 0.4)"
rgbaStrNew = changeColor(rgbaStr,10,undefined,undefined,0.3)
console.log(rgbaStrNew)

結果

rgba(10, 203, 207, 0.3)

使い道

色々あると思いますが、僕はChart.jsで使うために使用した。
誰かのお役に立てれば。

Discussion