Javascript 类似Snapchat的jquery颜色选择器

我对创建一个类似iOS Snapchat中的颜色选择器感兴趣。这是一个非常漂亮的细长垂直条，我希望它是水平的

我一直在使用像这样的单个框，但更希望有一个像Snapchat那样的滑块/渐变：

js:

$（函数（）{
$。每个（['#f00'、'#ff0'、'#0f0'、'#0ff'、'#00f'、'#000'、'#fff'），函数（）{
$（“#工具”）。追加（“”）；
});

html:

我看到的每一个示例颜色选择器都是Adobe的颜色选择器的翻版，对于我的工作区来说，它太大了，我还没有找到像Snapchat这样的滑动渐变足够小的东西。非常感谢您对重新创建它的任何帮助！

使用滑块（例如jQuery UI），然后颜色就是

hsl（滑块*360，100%，50%）

（假设滑块从[0,1]返回值）

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

---

它是垂直的（没有读到你希望它是水平的）。但是它很容易改变。

谢谢你的回复，很抱歉，你能用小提琴展示一个例子吗？我去弄了一下jQuery UI滑块，但不明白你的评论，谢谢。谢谢@Prinzorn，明白了！这是我的版本：（由于某些原因，背景图像未加载）

    $(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> ");
    });

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