类似Snapchat的jquery颜色选择器

Question

我有兴趣创建一个像iOS Snapchat中发现的颜色选择器。这是一个非常漂亮的苗条垂直酒吧，我想要水平，seen here。

我一直在使用这样的单独盒体，但宁愿有像Snapchat的滑块/梯度：

JS：

$(function() { 
    $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#000', '#fff'], function() { 
     $('#tools').append("<a href='#colored_sketch' data-color='" + this + "' style='border: 1px solid black; width: 30px; height: 30px; background: " + this + "; display: inline-block;'></a> "); 
    }); 

HTML：

 <div id='tools'></div> 

每个实例我看过的颜色选择器是Adobe的颜色选择器的重新创建，这对我的工作区域来说太大了，我还没有发现像Snapchats这样的滑动渐变足够小的东西。任何帮助重新创建它非常感谢，谢谢！

Answer 1

使用滑块（例如jQuery UI），然后颜色简单为hsl(slider * 360, 100%, 50%)（假设滑块从[0,1]返回值）。

如果您需要，您可以将其转换回rgb。

http://jsbin.com/utumab/1/edit

它是垂直的（没看过你想让它的水平）。但改变是微不足道的。