JavaScript 颜色梯度和渐变效果

序二(09/11/1)

近来看了Dean的“Convert any colour value to hex in MSIE”,终于解决了根据关键字获取颜色rgb值的问题。
顺便把程序也重新整理一番,并使用了最近整理的工具库

序一(09/03/11)

很久没写blog,太忙了。没什么时间写复杂的东西,重新把颜色渐变效果写一遍。
关于颜色的效果一般就两个,颜色梯度变化和颜色动态渐变,前者在ie中一般用滤镜实现。


效果预览

颜色梯度变化演示:


简单的颜色拾取器(点击修改梯度演示颜色):


颜色渐变菜单:
Cropper Tween Slider Resize Drag Tooltips


点击随机颜色渐变:
点击随机颜色渐变

 

程序说明

【ColorGrads颜色梯度】

程序ColorGrads的作用是根据颜色集合和渐变级数生成颜色梯度集合。
渐变级数的意思是分多少步完成渐变。

网页设计中的颜色是用RGB色彩模式呈现的。
在这个模式中每种颜色可以用三个代表红(r)、绿(g)、蓝(b)的颜色值(0到255)来表示。

w3c的Colors部分看到标准中颜色的表示形式包括:
关键字形式:
em { color: red }
RGB形式:
em { color: #f00 }
em { color: #ff0000 }
em { color: rgb(255, 0, 0) }
em { color: rgb(100%, 0%, 0%) }
以上都是表示同一种颜色(红色)。
关键字形式就是用关键字代表颜色值。
而RGB形式,前两种用的比较多,都是一个"#"后面带16进制表示的颜色值,第三种是用十进制的颜色值,第四种是实际值跟255的百分比形式。

各个浏览器对各种颜色表示形式的获取并不相同:

"