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

[xxxpara]

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

这道题怎么做？

[loveuqian]

这是前端题？用前端来做？不是应该考设计的嘛。。。

[xxxpara]

@loveuqian 确实是前端的。。据说是BAT社招里面的笔试题

[YuJianrong]

通道颜色正则切分啥的是什么鬼？

[YuJianrong]

@xxxpara 哦，那有啥难的，css颜色的几种表示解析出来做个线性插值不就好了……

[gonghao]

#ccc rgb(r1, g1, b1)
#f0bc89 rgb(r2, g2, b2)

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

这可以算作一种平均等分的算法，只是题设中那俩方法没听懂……

[P233]

用 Sass 的 mix 函数吧

mix(#ccc, #f0bc89, 90%)
mix(#ccc, #f0bc89, 80%)
mix(#ccc, #f0bc89, 70%)
...
mix(#ccc, #f0bc89, 10%)

[Biwood]

先把十六进制表示法转换成十进制表示法，#ccc 转换 rgb(204, 204, 204)，#f0bc89 转换成 rgb(240,188,137)，然后求每个通道的差十等分的值，如果我对等分色的理解没错的话

[Biwood]

按照上面的思路写了一个例子，不知道是不是正确答案 http://jsbin.com/paqilexuqi/edit?js,output

[guesskiss]

转换成rgb和hsv只是一种思路，我突然想到，既然是前端问题，那就设置两个div不同背景色，设置他们的opacity为10等分覆盖在一起不就行了么

[otakustay]

直觉告诉我等分色要用hsl色来做，rgb搞不定……

像 @guesskiss 说的可以用opacity做，其实背景是白色的时候，opacity原理还是往ssl上靠的

[learnshare]

HSL 来做

[YuJianrong]

@otakustay 这个直觉是错的，颜色过渡应该用rgb而不是hsl。hsl过度的话hue飘过去感觉很怪的。

[khowarizmi]

实现好像就是在三色上分别做等分点

http://stackoverflow.com/questions/726549/algorithm-for-additive-color-mixing-for-rgb-values

http://stackoverflow.com/questions/1892020/mixing-two-rgb-color-vectors-to-get-resultant



具体使用 #6 提到的 mix 函数即可

http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method