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

[allisone]

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

[Cosmic4764]

#ffffff = ff+ff+ff = 255+255+255

是这么理解吧？

[allisone]

@Cosmic4764 不太懂，就是能根据分值显示从绿色、浅绿色、浅红色、 红色这样的，分值表示颜色靠近红色还是绿色，同时深浅不一样

[horseInBlack]

https://developer.mozilla.org/zh-CN/docs/Web/CSS/color

CSS 颜色值主要有两种：

一种 HEX 值，比如 color:#00FF00
一种直接写 rgb(a)值 color: rgb(34, 12, 64, 0.6)

你这种情况直接 用 255*（ 0-1 ）的随机数就行了

至于究竟是原生、jQuery 修改 CSS 属性，还是 Vue 、React 就看你自己了

[hellsnow]

从 rgb(0,255,0)到 rgb(0,255,0)

[hellsnow]

@hellsnow 从 rgb(255,0,0)到 rgb(0,255,0)

[AlphaTr]

rgb(255 * value / 10, 255 * (10 - value) / 10, 0)

[zenxds]

https://d3-graph-gallery.com/graph/custom_color.html

[debuggerx]

@AlphaTr hsl 更简单：hsl(120 * value / 10, 100%, 50%)

[cs8425]

原 po 想问的是颜色的 lerp 怎实做吗?
给两个参考:
https://github.com/sunify/lerp-color
https://github.com/mrdoob/three.js/blob/dev/src/math/Color.js#L516-L549

[otakustay]

这个应该用 hsl 或 hsb 来转出颜色吧，楼上用 rgb 的弄不好的……
当然我更建议写死 10 个档，不要做平滑过渡，没啥意思

[allisone]

@AlphaTr @debuggerx @cs8425 @otakustay rgb 和 hsl 我都试下，10 个档位我之前也试了，主要是 10 个颜色自己选效果没那么好

[otakustay]

@allisone #11 去找天气预报的气温图，那里有分档的颜色，虽然没那么优雅但接受度高

[dog]

https://ant.design/docs/spec/colors-cn 这里随便选一套颜色
还不满足在页面上有 色板生成工具 填入你的主色，自动生成一套渐变色

[libook]

最简单的是 HSL ，只需要变一个角度值就可以变颜色。但不一定都符合颜色感官要求。
或者你可以定几个基准点，比如 0-10 的 11 个点分别都用什么颜色，然后再考虑每个节点之间的过度方案，比如两个节点值在 HSL 的几个分量上的插值等比例过度。

[MossFox]

虽然不知道怎么做合适，但先丢个 npm 包在这
https://www.npmjs.com/package/@ctrl/tinycolor

如果要用 HSL 来做过渡、然后转换成 HEX ，这个包可以帮忙。

[GiantHard]

我猜你可能在做可视化相关的工作，推荐你用 chroma js https://gka.github.io/chroma.js/#chroma-bezier

[AyaseEri]

Hue 上划分十条线，那不就是每 1 分逆时针转 36°。tinycolor2 就能做。效果好需要找 UX 一起调配一下饱和度与亮度。

[tool2d]

提到 HSL 大概率是程序员，美术插值一般不用颜色空间，都是自己挑选渐变关键色。

只要关键色够多，RGB 插值也足够用了。

[allisone]

感谢大家给予的各种方案，我会一个个尝试。大佬真的是多呀

[mgso]

d3.js 中有一个模块叫 scaleLinear 。线性比例尺
它接收一个定义域 domain([min,max])和一个区间范围 range([0,100]).
范围可以是颜色

示例：
import { scaleLinear } from 'd3-scale'
const colorScale = scaleLinear()
. domain ([0, 100])
. range(['green','red']);

console.log(colorScale(75)); // rgb(191, 32, 0)

[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