【Javascript】カラーピッカー
<html>
<head><title></title>
<script type="text/javascript">
<!--
function fncSelColor(){
var red = parseInt(document.FRM.selRED.options[document.FRM.selRED.selectedIndex].text);
var green = parseInt(document.FRM.selGREEN.options[document.FRM.selGREEN.selectedIndex].text);
var blue = parseInt(document.FRM.selBLUE.options[document.FRM.selBLUE.selectedIndex].text);
red = red.toString(16);
if(red.length==1) red="0"+red;
green = green.toString(16);
if(green.length==1) green="0"+green;
blue = blue.toString(16);
if(blue.length==1) blue="0"+blue;
var RGB = "#" + red + green + blue;
RGB = RGB.toUpperCase();
div16NM.innerHTML = "16進数：" + RGB;
divColor.style.backgroundColor = RGB;
}
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" onLoad="fncSelColor()">
<form name="FRM">
<div id="div16NM"></div>
<table border="1">
<tr>
<td align="center">Red</td>
<td align="center">Green</td>
<td align="center">Blue</td>
</tr>
<tr>
<td valign="top">
<select name="selRED" size="10" onChange="fncSelColor()">
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
<option>45</option>
<option>50</option>
<option>55</option>
<option>60</option>
<option>65</option>
<option>70</option>
<option>75</option>
<option>80</option>
<option>85</option>
<option>90</option>
<option>95</option>
<option>100</option>
<option>105</option>
<option>110</option>
<option>115</option>
<option>120</option>
<option selected>125</option>
<option>130</option>
<option>135</option>
<option>140</option>
<option>145</option>
<option>150</option>
<option>155</option>
<option>160</option>
<option>165</option>
<option>170</option>
<option>175</option>
<option>180</option>
<option>185</option>
<option>190</option>
<option>195</option>
<option>200</option>
<option>205</option>
<option>210</option>
<option>215</option>
<option>220</option>
<option>225</option>
<option>230</option>
<option>235</option>
<option>240</option>
<option>245</option>
<option>250</option>
<option>255</option>
</select>
</td>
<td valign="top">
<select name="selGREEN" size="10" onChange="fncSelColor()">
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
<option>45</option>
<option>50</option>
<option>55</option>
<option>60</option>
<option>65</option>
<option>70</option>
<option>75</option>
<option>80</option>
<option>85</option>
<option>90</option>
<option>95</option>
<option>100</option>
<option>105</option>
<option>110</option>
<option>115</option>
<option>120</option>
<option selected>125</option>
<option>130</option>
<option>135</option>
<option>140</option>
<option>145</option>
<option>150</option>
<option>155</option>
<option>160</option>
<option>165</option>
<option>170</option>
<option>175</option>
<option>180</option>
<option>185</option>
<option>190</option>
<option>195</option>
<option>200</option>
<option>205</option>
<option>210</option>
<option>215</option>
<option>220</option>
<option>225</option>
<option>230</option>
<option>235</option>
<option>240</option>
<option>245</option>
<option>250</option>
<option>255</option>
</select>
</td>
<td valign="top">
<select name="selBLUE" size="10" onChange="fncSelColor()">
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
<option>45</option>
<option>50</option>
<option>55</option>
<option>60</option>
<option>65</option>
<option>70</option>
<option>75</option>
<option>80</option>
<option>85</option>
<option>90</option>
<option>95</option>
<option>100</option>
<option>105</option>
<option>110</option>
<option>115</option>
<option>120</option>
<option selected>125</option>
<option>130</option>
<option>135</option>
<option>140</option>
<option>145</option>
<option>150</option>
<option>155</option>
<option>160</option>
<option>165</option>
<option>170</option>
<option>175</option>
<option>180</option>
<option>185</option>
<option>190</option>
<option>195</option>
<option>200</option>
<option>205</option>
<option>210</option>
<option>215</option>
<option>220</option>
<option>225</option>
<option>230</option>
<option>235</option>
<option>240</option>
<option>245</option>
<option>250</option>
<option>255</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<div id="divColor" style="height_100px;width:150px"></div>
</td>
</tr>
</table>
</form>
</body>
</html>