V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xxxpara
V2EX  ›  前端开发

给定两个 css 的颜色值, 求两个颜色之间的 10 个等分色

  •  
  •   xxxpara · 2015-07-25 10:45:28 +08:00 · 4156 次点击
    这是一个创建于 3411 天前的主题,其中的信息可能已经有所发展或是发生改变。

    1.给定两个css的颜色值,比如#ccc和#f0bc89,求两个颜色之间的10个等分色。(通道颜色,有正则切分,有进制转换)

    这道题怎么做?

    13 条回复    2015-07-26 03:32:13 +08:00
    loveuqian
        1
    loveuqian  
       2015-07-25 10:50:17 +08:00 via iPhone
    这是前端题?用前端来做?不是应该考设计的嘛。。。
    xxxpara
        2
    xxxpara  
    OP
       2015-07-25 10:56:26 +08:00
    @loveuqian 确实是前端的。。据说是BAT社招里面的笔试题
    YuJianrong
        3
    YuJianrong  
       2015-07-25 10:56:35 +08:00 via iPad
    通道颜色正则切分啥的是什么鬼?
    YuJianrong
        4
    YuJianrong  
       2015-07-25 10:57:44 +08:00 via iPad
    @xxxpara 哦,那有啥难的,css颜色的几种表示解析出来做个线性插值不就好了……
    gonghao
        5
    gonghao  
       2015-07-25 11:00:41 +08:00
    #ccc rgb(r1, g1, b1)
    #f0bc89 rgb(r2, g2, b2)

    然后 `rn = (r2 - r1) / 10 * n` 类似

    这可以算作一种平均等分的算法,只是题设中那俩方法没听懂……
    P233
        6
    P233  
       2015-07-25 11:01:27 +08:00
    用 Sass 的 mix 函数吧

    mix(#ccc, #f0bc89, 90%)
    mix(#ccc, #f0bc89, 80%)
    mix(#ccc, #f0bc89, 70%)
    ...
    mix(#ccc, #f0bc89, 10%)
    Biwood
        7
    Biwood  
       2015-07-25 11:09:12 +08:00
    先把十六进制表示法转换成十进制表示法,#ccc 转换 rgb(204, 204, 204),#f0bc89 转换成 rgb(240,188,137),然后求每个通道的差十等分的值,如果我对等分色的理解没错的话
    Biwood
        8
    Biwood  
       2015-07-25 12:33:27 +08:00
    按照上面的思路写了一个例子,不知道是不是正确答案 http://jsbin.com/paqilexuqi/edit?js,output
    guesskiss
        9
    guesskiss  
       2015-07-25 13:47:07 +08:00 via Android
    转换成rgb和hsv只是一种思路,我突然想到,既然是前端问题,那就设置两个div不同背景色,设置他们的opacity为10等分覆盖在一起不就行了么
    otakustay
        10
    otakustay  
       2015-07-25 14:25:14 +08:00
    直觉告诉我等分色要用hsl色来做,rgb搞不定……

    像 @guesskiss 说的可以用opacity做,其实背景是白色的时候,opacity原理还是往ssl上靠的
    learnshare
        11
    learnshare  
       2015-07-25 15:06:29 +08:00
    HSL 来做
    YuJianrong
        12
    YuJianrong  
       2015-07-26 00:36:08 +08:00 via iPad
    @otakustay 这个直觉是错的,颜色过渡应该用rgb而不是hsl。hsl过度的话hue飘过去感觉很怪的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1046 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:37 · PVG 03:37 · LAX 11:37 · JFK 14:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.