本人的学习模式可能和别人不一样。我比较喜欢自己先用自己的想法去做。然后遇到问题再去解决。最后比较一下自己的想法和别人的想法。这是我认为比较适合我自己的一个学习方式。


上班无聊之余看到别人的网站或者是博客里面有人提到用js做个调色板，兴趣来了，直接动手自己去做一个。


这个是效果图

095855446.jpg


做这个效果图最大的困扰就是 颜色怎么来。怎么去渐变。横向渐变和纵向渐变


颜色表示方式有很多种有

  • 16进制的 #FFFFFF

  • rgb模式的 rgb(255,255,255) 或百分比 rgb(80%,80%,80%)

  • 直接颜色名字 blue


为了很有规律的写程序。我选择了 rgb表示方式。


首先开始研究颜色。研究规律。颜色能这样表示肯定有一定的规律。


研究之后我的发现


横向渐变模式


rgb 三大基色


r代表red红色   rgb(255,0,0)

g代表gree绿色  rgb(0,255,0)

b代表blue蓝色  rgb(0,0,255)


三大过度基色


r+g ××× rgb(255,255,0)

g+b 天蓝 rgb(0,255,255)

b+r 紫色 rgb(255,0,255)


那么很简单 横向的渐变规则就是


红色->×××->绿色->天蓝->蓝色->紫色


rgb(255,0,0)->rgb(255,255,0)->rgb(0,255,0)->rgb(0,255,255)->rgb(0,0,255)->rgb(255,0,255)


这样规律不就出来了么


红色->××× r不变 g增加

×××->绿色 g不变 r减少

绿色->天蓝 g不变 b增加

天蓝->蓝色 b不变 g减少

蓝色->紫色 g不变 r增加


再谈纵向的渐变


当时纵向的渐变难到我了。在我仔细研究别人的调色板之后我发现了一个规律。

用一组红色的纵向渐变来说明


rgb(255,204,204)

rgb(255,153,153)

rgb(255,102,102)

rgb(255,51,51)

rgb(255,0,0)

rgb(204,0,0)

rgb(153,0,0)

rgb(102,0,0)

rgb(51,0,0)


看到规律了吧。

前半段 r 从 0-255 这个我能理解颜色从黑到红。

那么后半段的也就能理解了。当到达了 rgb(255,0,0)时此时为正红。要向白色渐变 就是 g、b同时增加


好了再具体一点


给出3组数据红色的渐变数据


这个是标准红的色带

rgb(255,204,204)

rgb(255,153,153)

rgb(255,102,102)

rgb(255,51,51)

rgb(255,0,0)

rgb(204,0,0)

rgb(153,0,0)

rgb(102,0,0)

rgb(51,0,0)

这个是深一点的

rgb(255,204,204)

rgb(233,153,153)

rgb(212,102,102)

rgb(191,51,51)

rgb(170,0,0)

rgb(136,0,0)

rgb(102,0,0)

rgb(68,0,0)

rgb(34,0,0)

这个是更深的

rgb(255,204,204)

rgb(212,153,153)

rgb(170,102,102)

rgb(127,51,51)

rgb(85,0,0)

rgb(68,0,0)

rgb(51,0,0)

rgb(34,0,0)

rgb(17,0,0)


这个是一组红色的渐变。

首先看g、b的变化。他们总是在前半段保持0 后半段保持标准红色带从 0-255的规律


在看r的变化 。

如果这个纵向渐变分4层。

那么标准色带为 255/5=51

第一层就是  rgb(51,0,0)   51*1

第二层就是  rgb(102,0,0)  51*2

第三层就是  rgb(153,0,0)  51*3

第四层就是  rgb(204,0,0)  51*4

第五层就是  rgb(255,0,0) 注意这里是正红色

第六层就是  rgb(255,51,51)

第七层就是  rgb(255,102,102)

第八层就是  rgb(255,153,153)

第九层就是  rgb(255,204,204)


重点来了

非标准色带

17是怎么来的。如果我想用三次从0到正红的渐变。那么就是 上面的 51/3=17

第一层就是  rgb(17,0,0)  17*1

第二层就是  rgb(34,0,0)  17*2

第三层就是  rgb(51,0,0)  17*3

第四层就是  rgb(68,0,0)  17*4

第五层就是  rgb(85,0,0) 注意这里是正红色

第六层就是  rgb(127,51,51) 127怎么来的  (255-85)/4*1+85

第七层就是  rgb(170,102,102) 170怎么来的  (255-85)/4*2+85

第八层就是  rgb(212,153,153) 212怎么来的  (255-85)/4*3+85

第九层就是  rgb(255,204,204) 255 最终目的就是要在最后一个阶段到达 255


好了基本就是这样了。这里只说原理。代码的话网上一堆。如果需要我的代码可以给我留言。