javascript - 将百分比转换为JavaScript中的颜色(Convert percentage to colors in javascript)

Question

I would like to generate color according to value from -1 to 1(我想根据-1到1的值生成颜色)

the base colors are(基本颜色是) My gaps are H:0 =1, H:60 = 0.5 , H:170= 0, H:200= -1 ( S:100 and L:50 )(我的差距是H：0 = 1，H：60 = 0.5，H：170 = 0，H：200 = -1（S：100和L：50）) I have found an example that convert percentage from green to red.(我找到了一个将百分比从绿色转换为红色的示例 。) function percentageToColor(percentage, maxHue = 200, minHue = 0) { const hue = percentage * (maxHue - minHue) + minHue; return `hsl(${hue}, 100%, 50%)`; } I would like to adapt it to my case by adding blue and use values from -1 to 1 by respecting the gaps equivalences as I mentioned above but I don't see how to do it.(我想通过添加蓝色并考虑到上面提到的间隙等价来使用-1到1的值来适应我的情况，但是我不知道如何做。) Upate(更新) I would like to use HSL/HSV(我想使用HSL / HSV) I'm looking for a way to find relation between percentage and H value(我正在寻找一种找到百分比和H值之间的关系的方法) Update 2(更新2) I have Implemented @Muhammed B. Aydemir solution but visually I get colors ouf of the spectrum ( eventually black )(我已经实现了@Muhammed B.Aydemir解决方案，但从视觉上看，我得到了光谱的颜色（最终是黑色）) percentageToColor(pourcentage) { let x = pourcentage.toFixed(2); const colors = [[4, 189, 237], [10, 19, 0], [255, 248, 3], [253, 45, 45]]; const range = [0, 1, 1.5, 2]; const inBetween = (x, a, b) => x >= a && x <= b; for (let i = 0; i < range.length; i++) { const m = range[i]; const n = range[i + 1]; console.log(inBetween(x, m, n)); if (inBetween(x, m, n)) { const c1 = colors[i]; const c2 = colors[i + 1]; const rangeDiff = n - m; const ratio = Math.abs((x - m) / rangeDiff); const [r, g, b] = c1.map((e, i) => { const e1 = c1[i]; const e2 = c2[i]; return Math.round(e1 + (e2 - e1) * ratio); }); let color = [r, g, b].reduce((p, c) => `${p}${c.toString(16).padStart(2, '0')}`, '#'); console.log([x, color]); return color; } else if (x > range[range.length - 1]) { console.log(x + 'red'); return 'red'; } } return 'OUT OF RANGE'; }(})   ask by infodev translate from so

Answer 1

UPDATE: You updated the question but the solution should be similar.(更新：您更新了问题，但解决方案应该相似。)

My solution would be as follows:(我的解决方案如下：) Find the interval in which the value x is in-between (a,b = interval start and end)(查找x值介于其间的(a,b = interval start and end)) Get the colors for this interval (c1, c2)(获取此间隔的颜色(c1, c2)) Find the gap for red green and blue values for c1 and c2 (ex. r_gap = r2-r1)(找出c1和c2的红色，绿色和蓝色值的间隙(ex. r_gap = r2-r1)) Calculate r = r1 + r_gap * |x - a / interval_length|(计算r = r1 + r_gap * |x - a / interval_length|) And you should have your r,g,b values.(并且您应该具有r,g,b值。) Example:(例：) const colors = [[4, 189, 237], [99, 19, 0], [255, 248, 3], [253, 45, 45]] const range = [-1, 0, 0.5, 1] const inBetween = (x, a, b) => x >= a && x <= b const toRGB = x => { for (let i = 0; i < range.length; i++) { const m = range[i] const n = range[i + 1] if (inBetween(x, m, n)) { const c1 = colors[i] const c2 = colors[i + 1] const rangeDiff = n - m const ratio = Math.abs((x - m) / rangeDiff) const [r, g, b] = c1.map((e, i) => { const e1 = c1[i] const e2 = c2[i] return Math.round(e1 + (e2 - e1) * ratio) }) console.log(r, g, b) return [r, g, b].reduce((p, c) => `${p}${c.toString(16).padStart(2, '0')}`, '#') } } if (x < range[0]) return 'white' // below range return 'red' // above range } const element = document.createElement('div'); let linearGradient = '' for (let i = range[0]; i < range[range.length - 1]; i += 0.01) linearGradient += toRGB(i) + ',' element.style.backgroundImage = `linear-gradient(to right,${linearGradient}${toRGB(range[range.length -1])})`; document.body.append(element); div { width: 500px; height: 40px; float: left; }