類似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

它是垂直的（沒看過你想讓它的水平）。但改變是微不足道的。