问下关于前端怎么根据值来生成对应的颜色

[allisone]

0 分表示 green 10 分表示 red 现在想通过给一个任意的 0-10 的之间的分值如 3.6 返回 color 到 green 中间的 16 进制色值 想问问大佬这个该怎么实现

[huaijin]

写了个 demo ，根据输入的数值变换颜色、数值越大越接近红色。最大就是红色了。需要 16 进制(#f00)的话可以自己再写个方法转一下就行

`
<template>
<div>
<el-input v-model="number" clearable></el-input>
<div class="box" :style="{ backgroundColor: changeColor(number) }"></div>
</div>
</template>

<script>
export default {
data() {
return {
number: 0
}
},
methods: {
changeColor(number) {
if (number == 0) {
return '#0f0'
} else if (number == 10) {
return '#f00'
} else {
return this.changeRgb(number)
}
},
changeRgb(number) {
let r = number * 25.5
let g = 255 - number * 25.5
return `rgb(${r}, ${g}, 0)`
},
}
}
</script>

<style lang="scss" scoped>
.box {
width: 100px;
height: 100px;
transform: translateX(0px);
transition: all .6s;
}
</style>

`

[xiangyuecn]

挺有意思的，按我的脑回路，直接暴力 r 、g 、b 渐变过去就 ok 了😂


```
var c1="03BD03",c2="FF3030";
var color=function(num){
var c1_r=parseInt(c1.substr(0,2),16),c2_r=parseInt(c2.substr(0,2),16);
var c1_g=parseInt(c1.substr(2,2),16),c2_g=parseInt(c2.substr(2,2),16);
var c1_b=parseInt(c1.substr(4,2),16),c2_b=parseInt(c2.substr(4,2),16);
var val="";
val+=("0"+(c1_r+~~(Math.abs(c1_r-c2_r)/10*num*(c1_r>c2_r?-1:1))).toString(16)).substr(-2);
val+=("0"+(c1_g+~~(Math.abs(c1_g-c2_g)/10*num*(c1_g>c2_g?-1:1))).toString(16)).substr(-2);
val+=("0"+(c1_b+~~(Math.abs(c1_b-c2_b)/10*num*(c1_b>c2_b?-1:1))).toString(16)).substr(-2);
return val;
}

//测试
var html=[];
for(var i=0;i<=10;i+=0.1){
html.push('<div>'+i.toFixed(1)+'<div style="background:#'+color(i)
+';display:inline-block;width:20px;height:20px;"></div></div>');
}
document.body.innerHTML=html.join(" ")
```

[miaoda]

也可以试试这个 css 滤镜:
filter: hue-rotate(-120deg);
绿色加上这个就成了红色，度数分一下就能生成中间色，用法介绍可以看看张鑫旭大佬的介绍：
https://www.zhangxinxu.com/wordpress/2018/11/css-filter-hue-rotate-button/

[Ediacaran]

让设计给你几个颜色，然后程序里写死

[ztc]

Vue3 中: color: hsl(calc(120 * v-bind(colorVal) / 10), 100%, 50%)

类似这样的

[lrvinye]

chroma js +1

[XieBoCai]

@GiantHard 感谢分享，Mark

[YuJianrong]

做颜色过渡不应该用 HSL 的，Hue 在过渡的时候颜色变来变去，看起来很糟糕。用 rgb 都好点。Google 发明了一个新的颜色空间 HCT ，用来做颜色过渡更加自然： https://material.io/blog/science-of-color-design