最近在做一个小项目,需要生成好看点的渐变色,搜索之后发现了这个网站:
看起来代码很简洁,效果很好,想着复现一下,好家伙噩梦开始了。
问题可以描述为:给定两个颜色,colorA 和 colorB ,生成 n 个(网站中 n = 3 )颜色,使得这 n+2 个颜色可以组成网站所示效果的渐变色。
最开始是想先找出最中间的点,找了很多用例发现中点的生成没有简单的规律。
然后想用最小二乘法模拟线性回归,折腾了一下感觉不是线性函数。
到这里就卡住了,数学工具都还给老师了。经过不懈的努力(指搜索),终于发现了很多对渐变问题有研究并且开源的项目,特别是以下网站:
之后研究了三次贝塞尔曲线,颜色 mix 等知识,终于感觉要成功了,调整参数后也确实近似模拟了一些样例:
但是颜色还是分界明显,部分渐变还是差的很远,举两个简单直观的例子,比如白到绿:
白到红:
中间的青色和嫩粉色完全不知道是从哪里出来的,怎么调整参数也不行,感觉和正确答案不远但是达不到,浑身难受,故上 V2EX 求助试试,看有没有人能破解这个谜题。
可以注意的点有:颜色过度非常平滑几乎没有界限(只用了额外 3 个点),颜色混合的方法是什么(后来找到的例子里作者推荐使用 lrgb 进行颜色混合),中间奇妙的颜色是如何生成的(补色相关?)
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.