青から灰色CSSの色はJavaScriptで計算されます

Question

パーセント値に基づいて、青から淡青色、灰色から灰色にdiv bgの色をどのようにして計算しますか？例。値が100％の場合、divのbgの色は#0000FFです。値が50％の場合は明るい青です。値が0の場合、bgの色はグレーです。

これにアルゴリズムがありますか？

ありがとうございました。

Answer 1

まず、16進数の値をRGBで指定します。そのためには、この機能を使用することができます。

function hexToRgb(hex) { 
    return { 
     r: parseInt(hex.substring(1, 3), 16), 
     g: parseInt(hex.substring(3, 5), 16), 
     b: parseInt(hex.substring(5, 7), 16) 
    }; 
} 

その後、単に各構成要素に重みを適用します。

function blendColors(colorA, colorB, weight) { 
    return { 
     r: Math.floor(colorA.r * (1 - weight) + colorB.r * weight), 
     g: Math.floor(colorA.g * (1 - weight) + colorB.g * weight), 
     b: Math.floor(colorA.b * (1 - weight) + colorB.b * weight) 
    }; 
} 

Here's a demo.

Answer 2

あなたはJSONオブジェクトを作成し、直接ながら、それを参照することができます色を変更する

var colorMap = new Object(); 
colorMap["100%"] = "#0000FF"; 
colorMap["50%"] = "lightBlue"; 
colorMap["0%"] = "gray"; 

このマップを使用すると、背中を変えるとき地色

var percentageValue = '100%'; //you can pass this value inside a function also 
document.getElementById("obj").style.background-color=colorMap[percentageValue];