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

[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)