swatches能够根据你自己的需要搭配出一个各种颜色的色条。这款jQuery颜色样本插件可以很直观的看到颜色,并且当鼠标放到颜色上时,还可以看到该颜色的十六进制色彩值。

HTML

html结构十分简单,只需要一个空的div。在data-colors中放入你想要显示的颜色值。

<div class="swatch" data-name="Buried at the Beach" data-colors="#886655,#DD9977,#EECCAA,#EEEEEE,#CC99CC"></div>
                

调用方法:

$('.swatch').swatchify();
                

现在打开网页你就可以看到你定制的颜色样本了。

更多详细信息请参考:https://github.com/maxmackie/jquery.swatches