11个JavaScript颜色选择器插件

「爱情、让人受尽委屈。」 2022-09-22 11:53 331阅读 0赞

几年前，很难找到一个合适的颜色选择器。正好看到很多不错的JavaScript颜色选择器插件，故而把这些编译汇总。在本文，Web设计师和开发人员 Kevin Liew 选取了11个相应插件，有些会比较复杂，其他比较简单，相信应该会有适合你的。

1. [ExColor][]

[![11个JavaScript颜色选择器插件][11_JavaScript]][11_JavaScript]

ExColor是一个类似Photoshop样式的jQuery颜色拾取插件，其定制性非常高，通过参数设置可生成各种样式和效果的颜色拾取器。它可以附加到任意的input输入框，通过简单地调用一行函数即可。

2. [JScolor][]

[![11个JavaScript颜色选择器插件][11_JavaScript 1]][11_JavaScript 1]  
JSColor是一个简单、易于使用的JavaScript库，可以将任何给定input框转化为颜色选择器。该选择器是隐藏层，没有使用任何弹出窗口，可以出现在input框的任意一端。

3. [Advanced Javascript ColorPicker][]

[![11个JavaScript颜色选择器插件][11_JavaScript 2]][11_JavaScript 2]

ColorPicker是个高度可定制的高级JavaScript颜色拾取器，并不依赖于任何JS框架。它可以6种不同的颜色模式来显示整个调色板（~16.78 mil. 颜色）。

4. [Farbtastic][]

[![11个JavaScript颜色选择器插件][11_JavaScript 3]][11_JavaScript 3]

Farbtastic是一个jQuery的颜色拾取插件，可以非常轻松地将颜色选择器添加到Web页面中。颜色选择器将链接到Web页面上的一个已有元素（如，一个文本框），当选择一个颜色时即更新元素值。

5. [Javascript Color Picker][]

[![11个JavaScript颜色选择器插件][11_JavaScript 4]][11_JavaScript 4]

该JavaScript颜色拾取器拥有HSB和RGB两种模式，使用颜色原型，兼容所有的主流浏览器。

6. [mooRainbox][]

[![11个JavaScript颜色选择器插件][11_JavaScript 5]][11_JavaScript 5]

mooRainbox是一个易于集成的JavaScript颜色拾取器，基于mootools框架创建。该拾取器可以连接到任意DOM中的元素，这里会生成一个单击事件。通过简单地点击，你就可以显示或隐藏mooRainbow。

7. [ColorPicker][]

[![11个JavaScript颜色选择器插件][11_JavaScript 6]][11_JavaScript 6]

一个简单的组件，可以与Adobe Photoshop一样选择颜色。

8. [jPicker][]

[![11个JavaScript颜色选择器插件][11_JavaScript 7]][11_JavaScript 7]  
jPicker是一个快速、轻量级的jQuery插件，让你的Web项目中可以包含一个高级颜色拾取器。它来自于Joh Dyer的选择器，使用Prototype框架进行了改良。

9. [SimpleColor][]

[![11个JavaScript颜色选择器插件][11_JavaScript 8]][11_JavaScript 8]

jQuerySimpleColor是个非常简单的颜色拾取器插件，通过一个个的正方形来挑选颜色。

10. [Really Simple Color Picker][]

[![11个JavaScript颜色选择器插件][11_JavaScript 9]][11_JavaScript 9]

带有预设调色板的一个颜色拾取器，简单直接。

11. [Flexi][]

[![11个JavaScript颜色选择器插件][11_JavaScript 10]][11_JavaScript 10]

Flexi是一个轻量级的颜色拾取器（只有4.3KB），它只用JavaScript编写而没有使用任何的图像（由于SVG/VML）或CSS。Flexi是一个独立的脚本，不需要任何JavaScript框架，并且可以设置选中颜色为十六进制、HSV或RGB格式。

[ExColor]: http://modcoder.org/?ptab=jquery&item=excolor
[11_JavaScript]: /images/20220721/6313e4d229d749dc8ad4014524563cca.png
[JScolor]: http://jscolor.com/
[11_JavaScript 1]: /images/20220721/b24fe83cf6a241a48badaef9fcb435da.png
[Advanced Javascript ColorPicker]: http://dematte.at/colorPicker/
[11_JavaScript 2]: /images/20220721/e25c103bc06d4f649fc2e132d34cbdee.png
[Farbtastic]: http://acko.net/dev/farbtastic
[11_JavaScript 3]: /images/20220721/f66f678b07584ad8bcac9398d4b10f8f.png
[Javascript Color Picker]: http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx
[11_JavaScript 4]: /images/20220721/1d685a736cf0443bb0dfb725bc1673bb.png
[mooRainbox]: http://moorainbow.woolly-sheep.net/
[11_JavaScript 5]: /images/20220721/108d8e09ca0f4f6bba1aef700aa1edb8.png
[ColorPicker]: http://www.eyecon.ro/colorpicker/
[11_JavaScript 6]: /images/20220721/c91509fc17bf456ba8c47c1596063c3c.png
[jPicker]: http://www.digitalmagicpro.com/jPicker/
[11_JavaScript 7]: /images/20220721/00e6dbc5e1cf41379824c853428b6139.png
[SimpleColor]: http://recursive-design.com/projects/jquery-simple-color/
[11_JavaScript 8]: /images/20220721/4daa03e2a79a4ba9befc1180fd73f01e.png
[Really Simple Color Picker]: http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/
[11_JavaScript 9]: /images/20220721/bc1777ec581b4001a737415d9ec49ab1.png
[Flexi]: http://www.daviddurman.com/flexi-color-picker/
[11_JavaScript 10]: /images/20220721/94223de26aa94434aaa484d7a008f2c2.png