javascript颜色选择器[关闭]答案

【问题标题】：javascript color picker [closed]javascript颜色选择器[关闭]
【发布时间】：2011-12-02 09:45:05
【问题描述】：

如果您使用的是 Gmail，您就知道可以更改标签的颜色。没有太多的颜色选项，我也想在我的网络应用程序中有类似的东西。即使是带有一些颜色的<select> 也会很棒。 jQuery ColorPicker 提供了多种颜色可供选择，我不需要。

你知道与 Gmail 标签颜色选择器类似的东西吗？

【问题讨论】：

我在 vanila-js 中做了一个轻量级的简单color-picker

标签： javascript colors color-picker

【解决方案1】：

我开发了一个基于 HTML 的简单颜色选择器<select>:jquery-simplecolorpicker

内联模式：

选择器模式：

在线演示：http://plnkr.co/edit/VVclW0?p=preview

【讨论】：

【解决方案2】：

Really Simple Color Picker 怎么样？ (Demo)

【讨论】：

更新的演示链接：here

【解决方案3】：

你也可以检查一下

color picker and samples

【讨论】：

【解决方案4】：

这是最简单、最干净的颜色挑选过程。仅使用 HTML。

<input type="color" name="option_color" value="#DCEBD8" list="colors" style="height: 35px;width:60px">
<datalist id="colors">
    <option>#DDDDDD</option>
    <option>#F7D1D0</option>
    <option>#DCEBD8</option>
    <option>#D2E4EB</option>
    <option>#F7F0C5</option>
    <option>#E1D8ED</option>
    <option>#FFD5C2</option>
    <option>#D1F3EC</option>
    <option>#658CBB</option>
    <option>#e0c9bf</option>
</datalist>

【讨论】：

【解决方案5】：

查看我的跨浏览器兼容Color Selector （颜色选择器）。如果您想在不支持 HTML5 的旧网络浏览器中打开网页，您可以使用我的颜色选择器而不是，例如 IE6。

<!--<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">-->
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Color Selector</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
<link rel="stylesheet" href="https://rawgit.com/anhr/ColorSelector/master/ColorSelector.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/ColorSelector/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/ColorSelector/master/ColorSelector.js"></script>
	
</head>
<body>
	
	<p>
	Your browser does not supports HTML5 if you do not see the HTML5 color selector here: <input type="color">
	Instead you see a text input field.
	</p>
	<hr>
	My Color Selectors:
	<p>
		<input id="colorSelector1">
		<script>
			colorSelector.Create("black", function(selectedColor){
					consoleLog("selectedColor = " + selectedColor);
					var elementSelectedColor = document.getElementById("SelectedColor1")
					//elementSelectedColor.innerText = selectedColor;//Uncompatible with FireFox
					elementSelectedColor.innerHTML = selectedColor;
					elementSelectedColor.style.background = selectedColor;
					elementSelectedColor.style.color = invertHex(colourNameToHex(selectedColor));
				}
				, "colorSelector1"
			);
		</script>
		Selected color: <span id="SelectedColor1"></span>
	</p>
	<p>
		<input id="colorSelector2">
		<script>
			colorSelector.Create("#ffffff", function(selectedColor){
					consoleLog("selectedColor = " + selectedColor);
					var elementSelectedColor = document.getElementById("SelectedColor2")
					//elementSelectedColor.innerText = selectedColor;//Uncompatible with FireFox
					elementSelectedColor.innerHTML = selectedColor;
					elementSelectedColor.style.background = selectedColor;
					elementSelectedColor.style.color = invertHex(colourNameToHex(selectedColor));
				}
				, "colorSelector2"
			);
		</script>
		Selected color: <span id="SelectedColor2"></span>
	</p>
	<hr>
	Have a job for me? Please read <a href='../AboutMe/' target="_blank">About Me</a>.
</body>
</html>

另请参阅我的 Color Selector 示例

【讨论】：