Question

我需要为一个不会有问题的网站创建一个颜色选择器，但我想要一个从这个范围中选择颜色的滑块：

enter image description here

我该怎么做？

Answer 1

我可以想象类似的东西。它可能会使用一些（很多）调整，但这是它的要点：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #color_picker {
            background: #e8f230; /* Old browsers */
            background: -moz-linear-gradient(left, hsla(63,88%,57%,1) 0%, hsla(0,0%,0%,1) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(63,88%,57%,1)), color-stop(100%,hsla(0,0%,0%,1))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(left, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(left, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(left, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* IE10+ */
            background: linear-gradient(to right, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8f230', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
            height: 30px;
        }
    </style>
</head>
<body>

<div id="color_picker"></div>

<div id="target">Test</div>

<script>
    var picker = color_picker;
    var result = target;
    picker.onclick = function(e) {
        console.log(e);
        result.style.backgroundColor = "hsl(63, 88%, " + (50 - ((e.offsetX/picker.clientWidth) * 50)) + "%)";
    }
</script>

</body>
</html>

Answer 2

如果你想要直接的HTML，你可以使用MAP标签并使用HTML-GET传递相关的值......否则，可能会有一些JavaScript？

您是否真的环顾四周寻找现有代码？

这是：http://www.w3schools.com/tags/ref_colorpicker.asp

来自评论：

w3schools是一个错误和误导性的网站。你不应该使用它任何语言的参考。对于PHP，有PHP手册，对于JavaScript，有Mozilla开发者网络（或MDN）。看到 w3fools.com进一步理解你为什么不应该使用w3schools。

足够公平。这只是一个例子。在谷歌上找到源代码比在stackoverflow上按“提问”按钮更快。这是另一个：http://jscolor.com/与LGPL源代码直接链接。修改以适合您的目的。

Answer 3

如果您可以将此图像传输到CANVAS，您可以从此处选择颜色。

请参阅：

Looking for a jQuery plugin to pick a color from an image?

有限范围的HTML颜色选择器

3 个答案: