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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 660 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

Green

进制色

color

red

28 条回复 • 2023-02-05 15:55:38 +08:00

Cosmic4764

2023-02-03 10:46:26 +08:00

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

是这么理解吧？

allisone

2023-02-03 10:49:49 +08:00

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

horseInBlack

2023-02-03 10:53:23 +08:00

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

2023-02-03 10:53:28 +08:00

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

hellsnow

2023-02-03 10:54:15 +08:00

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

AlphaTr

2023-02-03 11:03:25 +08:00

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

zenxds

2023-02-03 11:06:05 +08:00

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

debuggerx

2023-02-03 11:18:42 +08:00

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

cs8425

2023-02-03 11:21:13 +08:00

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

otakustay

2023-02-03 11:27:49 +08:00

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

allisone

2023-02-03 11:31:05 +08:00

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

otakustay

2023-02-03 11:33:59 +08:00

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

dog

2023-02-03 11:44:34 +08:00

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

libook

2023-02-03 11:49:14 +08:00

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

MossFox

2023-02-03 11:58:36 +08:00

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

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

GiantHard

2023-02-03 12:10:53 +08:00 via Android

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

AyaseEri

2023-02-03 12:43:05 +08:00

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

tool2d

2023-02-03 12:55:32 +08:00

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

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

allisone

2023-02-03 13:21:45 +08:00

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

mgso

2023-02-03 14:03:16 +08:00

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

2023-02-03 16:24:39 +08:00

写了个 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

2023-02-03 16:56:25 +08:00

挺有意思的，按我的脑回路，直接暴力 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

2023-02-03 18:05:33 +08:00

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