V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
allisone
V2EX  ›  JavaScript

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

  •  
  •   allisone · 2023-02-03 10:42:50 +08:00 · 3494 次点击
    这是一个创建于 419 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    28 条回复    2023-02-05 15:55:38 +08:00
    Cosmic4764
        1
    Cosmic4764  
       2023-02-03 10:46:26 +08:00
    #ffffff = ff+ff+ff = 255+255+255

    是这么理解吧?
    allisone
        2
    allisone  
    OP
       2023-02-03 10:49:49 +08:00
    @Cosmic4764 不太懂,就是能根据分值显示从绿色、浅绿色、浅红色、 红色这样的,分值表示颜色靠近红色还是绿色,同时深浅不一样
    horseInBlack
        3
    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
        4
    hellsnow  
       2023-02-03 10:53:28 +08:00
    从 rgb(0,255,0)到 rgb(0,255,0)
    hellsnow
        5
    hellsnow  
       2023-02-03 10:54:15 +08:00
    @hellsnow 从 rgb(255,0,0)到 rgb(0,255,0)
    AlphaTr
        6
    AlphaTr  
       2023-02-03 11:03:25 +08:00   ❤️ 1
    rgb(255 * value / 10, 255 * (10 - value) / 10, 0)
    zenxds
        7
    zenxds  
       2023-02-03 11:06:05 +08:00
    debuggerx
        8
    debuggerx  
       2023-02-03 11:18:42 +08:00   ❤️ 2
    @AlphaTr hsl 更简单:hsl(120 * value / 10, 100%, 50%)
    cs8425
        9
    cs8425  
       2023-02-03 11:21:13 +08:00
    otakustay
        10
    otakustay  
       2023-02-03 11:27:49 +08:00
    这个应该用 hsl 或 hsb 来转出颜色吧,楼上用 rgb 的弄不好的……
    当然我更建议写死 10 个档,不要做平滑过渡,没啥意思
    allisone
        11
    allisone  
    OP
       2023-02-03 11:31:05 +08:00
    @AlphaTr @debuggerx @cs8425 @otakustay rgb 和 hsl 我都试下,10 个档位我之前也试了,主要是 10 个颜色自己选效果没那么好
    otakustay
        12
    otakustay  
       2023-02-03 11:33:59 +08:00
    @allisone #11 去找天气预报的气温图,那里有分档的颜色,虽然没那么优雅但接受度高
    dog
        13
    dog  
       2023-02-03 11:44:34 +08:00
    https://ant.design/docs/spec/colors-cn 这里随便选一套颜色
    还不满足在页面上有 色板生成工具 填入你的主色,自动生成一套渐变色
    libook
        14
    libook  
       2023-02-03 11:49:14 +08:00
    最简单的是 HSL ,只需要变一个角度值就可以变颜色。但不一定都符合颜色感官要求。
    或者你可以定几个基准点,比如 0-10 的 11 个点分别都用什么颜色,然后再考虑每个节点之间的过度方案,比如两个节点值在 HSL 的几个分量上的插值等比例过度。
    MossFox
        15
    MossFox  
       2023-02-03 11:58:36 +08:00
    虽然不知道怎么做合适,但先丢个 npm 包在这
    https://www.npmjs.com/package/@ctrl/tinycolor

    如果要用 HSL 来做过渡、然后转换成 HEX ,这个包可以帮忙。
    GiantHard
        16
    GiantHard  
       2023-02-03 12:10:53 +08:00 via Android   ❤️ 1
    我猜你可能在做可视化相关的工作,推荐你用 chroma js https://gka.github.io/chroma.js/#chroma-bezier
    AyaseEri
        17
    AyaseEri  
       2023-02-03 12:43:05 +08:00
    Hue 上划分十条线,那不就是每 1 分逆时针转 36°。tinycolor2 就能做。效果好需要找 UX 一起调配一下饱和度与亮度。
    tool2d
        18
    tool2d  
       2023-02-03 12:55:32 +08:00
    提到 HSL 大概率是程序员,美术插值一般不用颜色空间,都是自己挑选渐变关键色。

    只要关键色够多,RGB 插值也足够用了。
    allisone
        19
    allisone  
    OP
       2023-02-03 13:21:45 +08:00
    感谢大家给予的各种方案,我会一个个尝试。大佬真的是多呀
    mgso
        20
    mgso  
       2023-02-03 14:03:16 +08:00   ❤️ 1
    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
        21
    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
        22
    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
        23
    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/
    Ediacaran
        24
    Ediacaran  
       2023-02-03 18:20:38 +08:00 via iPhone
    让设计给你几个颜色,然后程序里写死
    ztc
        25
    ztc  
       2023-02-03 18:28:03 +08:00
    Vue3 中: color: hsl(calc(120 * v-bind(colorVal) / 10), 100%, 50%)

    类似这样的
    lrvinye
        26
    lrvinye  
       2023-02-03 22:31:04 +08:00
    chroma js +1
    XieBoCai
        27
    XieBoCai  
       2023-02-04 09:18:57 +08:00 via Android
    @GiantHard 感谢分享,Mark
    YuJianrong
        28
    YuJianrong  
       2023-02-05 15:55:38 +08:00
    做颜色过渡不应该用 HSL 的,Hue 在过渡的时候颜色变来变去,看起来很糟糕。用 rgb 都好点。Google 发明了一个新的颜色空间 HCT ,用来做颜色过渡更加自然: https://material.io/blog/science-of-color-design
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   993 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 19:51 · PVG 03:51 · LAX 12:51 · JFK 15:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.