<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Color Picker</title>
<script language="javascript" type="text/javascript">
window.focus();
var colorPicker = "";
var colors = new Array("#000000", "#000033", "#000066", "#000099", "#0000cc", "#0000ff", "#330000", "#330033", "#330066", "#330099", "#3300cc", "#3300ff", "#660000", "#660033", "#660066", "#660099", "#6600cc", "#6600ff", "#990000", "#990033", "#990066", "#990099", "#9900cc", "#9900ff", "#cc0000", "#cc0033", "#cc0066", "#cc0099", "#cc00cc", "#cc00ff", "#ff0000", "#ff0033", "#ff0066", "#ff0099", "#ff00cc", "#ff00ff", "#003300", "#003333", "#003366", "#003399", "#0033cc", "#0033ff", "#333300", "#333333", "#333366", "#333399", "#3333cc", "#3333ff", "#663300", "#663333", "#663366", "#663399", "#6633cc", "#6633ff", "#993300", "#993333", "#993366", "#993399", "#9933cc", "#9933ff", "#cc3300", "#cc3333", "#cc3366", "#cc3399", "#cc33cc", "#cc33ff", "#ff3300", "#ff3333", "#ff3366", "#ff3399", "#ff33cc", "#ff33ff", "#006600", "#006633", "#006666", "#006699", "#0066cc", "#0066ff", "#336600", "#336633", "#336666", "#336699", "#3366cc", "#3366ff", "#666600", "#666633", "#666666", "#666699", "#6666cc", "#6666ff", "#996600", "#996633", "#996666", "#996699", "#9966cc", "#9966ff", "#cc6600", "#cc6633", "#cc6666", "#cc6699", "#cc66cc", "#cc66ff", "#ff6600", "#ff6633", "#ff6666", "#ff6699", "#ff66cc", "#ff66ff", "#009900", "#009933", "#009966", "#009999", "#0099cc", "#0099ff", "#339900", "#339933", "#339966", "#339999", "#3399cc", "#3399ff", "#669900", "#669933", "#669966", "#669999", "#6699cc", "#6699ff", "#999900", "#999933", "#999966", "#999999", "#9999cc", "#9999ff", "#cc9900", "#cc9933", "#cc9966", "#cc9999", "#cc99cc", "#cc99ff", "#ff9900", "#ff9933", "#ff9966", "#ff9999", "#ff99cc", "#ff99ff", "#00cc00", "#00cc33", "#00cc66", "#00cc99", "#00cccc", "#00ccff", "#33cc00", "#33cc33", "#33cc66", "#33cc99", "#33cccc", "#33ccff", "#66cc00", "#66cc33", "#66cc66", "#66cc99", "#66cccc", "#66ccff", "#99cc00", "#99cc33", "#99cc66", "#99cc99", "#99cccc", "#99ccff", "#cccc00", "#cccc33", "#cccc66", "#cccc99", "#cccccc", "#ccccff", "#ffcc00", "#ffcc33", "#ffcc66", "#ffcc99", "#ffcccc", "#ffccff", "#00ff00", "#00ff33", "#00ff66", "#00ff99", "#00ffcc", "#00ffff", "#33ff00", "#33ff33", "#33ff66", "#33ff99", "#33ffcc", "#33ffff", "#66ff00", "#66ff33", "#66ff66", "#66ff99", "#66ffcc", "#66ffff", "#99ff00", "#99ff33", "#99ff66", "#99ff99", "#99ffcc", "#99ffff", "#ccff00", "#ccff33", "#ccff66", "#ccff99", "#ccffcc", "#ccffff", "#ffff00", "#ffff33", "#ffff66", "#ffff99", "#ffffcc", "#ffffff");
colorPicker += '<table border="0" cellspacing="1" cellpadding="0" ID="Table1">'+ '<tr>';
for (var i=0; i<colors.length; i++)
{
colorPicker += '<td bgcolor="' + colors[i] + '">' + '<a onclick="selectColor();return false;" onmouseover="showColor(\'' + colors[i] + '\');">'+ '<img width="14" height="14" /></a></td>';
if ((i+1) % 18 == 0)
colorPicker += '</tr><tr>';
}
colorPicker += '</table>';
function showColor(color)
{
SelColor.innerText = color;
RGB.style.backgroundColor = color;
}
function selectColor()
{
var color = SelColor.innerText;
alert(color)
window.returnValue = SelColor.innerText;
}
</script>
<script language="JavaScript" for="Ok" event="onclick">
window.returnValue = SelColor.value;
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" height="160" align="center" id="Table1">
<tr>
<td>
<div align="center">
<script language="javascript" type="text/javascript">
document.write(colorPicker);
</script>
<table width="100%" align="center">
<tr><td colspan="2" bgcolor="gray"></td></tr>
<tr align=left><td colspan="2">Selected color</td></tr>
</table>
<table width="50%" align="center">
<tr>
<td width="20px"><span id="RGB" style="width: 100px; border: 1px solid; border-color: Black;"> </span></td>
<td><span id="SelColor" style="font-size: 10pt; font-family: Verdana"></span></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Output: To select any color click on that color like this:
Figure1:
You can copy the color from bottom like this:
Figure 2: