Colour Picker

It’s nice to be able to pick a colour sometimes. Here’s a basic HTML/JavaScript RGB colour picker.

I’ve tested this in IE (6, 7 & 8), Firefox, Opera and Chrome without any problems. In IE you can get the bonus of being able to select the drop down and then use the up/down arrow to scroll through with the colour updating in realtime. Unfortunately if you do this in other browsers it won’t update the colour until you click off the menu. (This isn’t a major issue, it still works perfectly well in all browsers and could be rectified in a future update).

Colour Picker

Here’s the html (it’s hidden because it’s pretty big):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
   "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
	<title>Colour Picker</title>
	<script type="text/javascript" src="cols.js"></script>
</head>
<body>
	<div id="colourbox" style="width:200px;height:200px;">
	</div>
	<form name="myform" action="colour.html">
		<p>
			Red :<select name="red" id="red">
				<option value="0">0 - 00</option>
				<option value="1">1 - 01</option>
				<option value="2">2 - 02</option>
				<option value="3">3 - 03</option>
				<option value="4">4 - 04</option>
				<option value="5">5 - 05</option>
				<option value="6">6 - 06</option>
				<option value="7">7 - 07</option>
				<option value="8">8 - 08</option>
				<option value="9">9 - 09</option>
				<option value="10">10 - 0A</option>
				<option value="11">11 - 0B</option>
				<option value="12">12 - 0C</option>
				<option value="13">13 - 0D</option>
				<option value="14">14 - 0E</option>
				<option value="15">15 - 0F</option>
				<option value="16">16 - 10</option>
				<option value="17">17 - 11</option>
				<option value="18">18 - 12</option>
				<option value="19">19 - 13</option>
				<option value="20">20 - 14</option>
				<option value="21">21 - 15</option>
				<option value="22">22 - 16</option>
				<option value="23">23 - 17</option>
				<option value="24">24 - 18</option>
				<option value="25">25 - 19</option>
				<option value="26">26 - 1A</option>
				<option value="27">27 - 1B</option>
				<option value="28">28 - 1C</option>
				<option value="29">29 - 1D</option>
				<option value="30">30 - 1E</option>
				<option value="31">31 - 1F</option>
				<option value="32">32 - 20</option>
				<option value="33">33 - 21</option>
				<option value="34">34 - 22</option>
				<option value="35">35 - 23</option>
				<option value="36">36 - 24</option>
				<option value="37">37 - 25</option>
				<option value="38">38 - 26</option>
				<option value="39">39 - 27</option>
				<option value="40">40 - 28</option>
				<option value="41">41 - 29</option>
				<option value="42">42 - 2A</option>
				<option value="43">43 - 2B</option>
				<option value="44">44 - 2C</option>
				<option value="45">45 - 2D</option>
				<option value="46">46 - 2E</option>
				<option value="47">47 - 2F</option>
				<option value="48">48 - 30</option>
				<option value="49">49 - 31</option>
				<option value="50">50 - 32</option>
				<option value="51">51 - 33</option>
				<option value="52">52 - 34</option>
				<option value="53">53 - 35</option>
				<option value="54">54 - 36</option>
				<option value="55">55 - 37</option>
				<option value="56">56 - 38</option>
				<option value="57">57 - 39</option>
				<option value="58">58 - 3A</option>
				<option value="59">59 - 3B</option>
				<option value="60">60 - 3C</option>
				<option value="61">61 - 3D</option>
				<option value="62">62 - 3E</option>
				<option value="63">63 - 3F</option>
				<option value="64">64 - 40</option>
				<option value="65">65 - 41</option>
				<option value="66">66 - 42</option>
				<option value="67">67 - 43</option>
				<option value="68">68 - 44</option>
				<option value="69">69 - 45</option>
				<option value="70">70 - 46</option>
				<option value="71">71 - 47</option>
				<option value="72">72 - 48</option>
				<option value="73">73 - 49</option>
				<option value="74">74 - 4A</option>
				<option value="75">75 - 4B</option>
				<option value="76">76 - 4C</option>
				<option value="77">77 - 4D</option>
				<option value="78">78 - 4E</option>
				<option value="79">79 - 4F</option>
				<option value="80">80 - 50</option>
				<option value="81">81 - 51</option>
				<option value="82">82 - 52</option>
				<option value="83">83 - 53</option>
				<option value="84">84 - 54</option>
				<option value="85">85 - 55</option>
				<option value="86">86 - 56</option>
				<option value="87">87 - 57</option>
				<option value="88">88 - 58</option>
				<option value="89">89 - 59</option>
				<option value="90">90 - 5A</option>
				<option value="91">91 - 5B</option>
				<option value="92">92 - 5C</option>
				<option value="93">93 - 5D</option>
				<option value="94">94 - 5E</option>
				<option value="95">95 - 5F</option>
				<option value="96">96 - 60</option>
				<option value="97">97 - 61</option>
				<option value="98">98 - 62</option>
				<option value="99">99 - 63</option>
				<option value="100">100 - 64</option>
				<option value="101">101 - 65</option>
				<option value="102">102 - 66</option>
				<option value="103">103 - 67</option>
				<option value="104">104 - 68</option>
				<option value="105">105 - 69</option>
				<option value="106">106 - 6A</option>
				<option value="107">107 - 6B</option>
				<option value="108">108 - 6C</option>
				<option value="109">109 - 6D</option>
				<option value="110">110 - 6E</option>
				<option value="111">111 - 6F</option>
				<option value="112">112 - 70</option>
				<option value="113">113 - 71</option>
				<option value="114">114 - 72</option>
				<option value="115">115 - 73</option>
				<option value="116">116 - 74</option>
				<option value="117">117 - 75</option>
				<option value="118">118 - 76</option>
				<option value="119">119 - 77</option>
				<option value="120">120 - 78</option>
				<option value="121">121 - 79</option>
				<option value="122">122 - 7A</option>
				<option value="123">123 - 7B</option>
				<option value="124">124 - 7C</option>
				<option value="125">125 - 7D</option>
				<option value="126">126 - 7E</option>
				<option value="127">127 - 7F</option>
				<option value="128">128 - 80</option>
				<option value="129">129 - 81</option>
				<option value="130">130 - 82</option>
				<option value="131">131 - 83</option>
				<option value="132">132 - 84</option>
				<option value="133">133 - 85</option>
				<option value="134">134 - 86</option>
				<option value="135">135 - 87</option>
				<option value="136">136 - 88</option>
				<option value="137">137 - 89</option>
				<option value="138">138 - 8A</option>
				<option value="139">139 - 8B</option>
				<option value="140">140 - 8C</option>
				<option value="141">141 - 8D</option>
				<option value="142">142 - 8E</option>
				<option value="143">143 - 8F</option>
				<option value="144">144 - 90</option>
				<option value="145">145 - 91</option>
				<option value="146">146 - 92</option>
				<option value="147">147 - 93</option>
				<option value="148">148 - 94</option>
				<option value="149">149 - 95</option>
				<option value="150">150 - 96</option>
				<option value="151">151 - 97</option>
				<option value="152">152 - 98</option>
				<option value="153">153 - 99</option>
				<option value="154">154 - 9A</option>
				<option value="155">155 - 9B</option>
				<option value="156">156 - 9C</option>
				<option value="157">157 - 9D</option>
				<option value="158">158 - 9E</option>
				<option value="159">159 - 9F</option>
				<option value="160">160 - A0</option>
				<option value="161">161 - A1</option>
				<option value="162">162 - A2</option>
				<option value="163">163 - A3</option>
				<option value="164">164 - A4</option>
				<option value="165">165 - A5</option>
				<option value="166">166 - A6</option>
				<option value="167">167 - A7</option>
				<option value="168">168 - A8</option>
				<option value="169">169 - A9</option>
				<option value="170">170 - AA</option>
				<option value="171">171 - AB</option>
				<option value="172">172 - AC</option>
				<option value="173">173 - AD</option>
				<option value="174">174 - AE</option>
				<option value="175">175 - AF</option>
				<option value="176">176 - B0</option>
				<option value="177">177 - B1</option>
				<option value="178">178 - B2</option>
				<option value="179">179 - B3</option>
				<option value="180">180 - B4</option>
				<option value="181">181 - B5</option>
				<option value="182">182 - B6</option>
				<option value="183">183 - B7</option>
				<option value="184">184 - B8</option>
				<option value="185">185 - B9</option>
				<option value="186">186 - BA</option>
				<option value="187">187 - BB</option>
				<option value="188">188 - BC</option>
				<option value="189">189 - BD</option>
				<option value="190">190 - BE</option>
				<option value="191">191 - BF</option>
				<option value="192">192 - C0</option>
				<option value="193">193 - C1</option>
				<option value="194">194 - C2</option>
				<option value="195">195 - C3</option>
				<option value="196">196 - C4</option>
				<option value="197">197 - C5</option>
				<option value="198">198 - C6</option>
				<option value="199">199 - C7</option>
				<option value="200">200 - C8</option>
				<option value="201">201 - C9</option>
				<option value="202">202 - CA</option>
				<option value="203">203 - CB</option>
				<option value="204">204 - CC</option>
				<option value="205">205 - CD</option>
				<option value="206">206 - CE</option>
				<option value="207">207 - CF</option>
				<option value="208">208 - D0</option>
				<option value="209">209 - D1</option>
				<option value="210">210 - D2</option>
				<option value="211">211 - D3</option>
				<option value="212">212 - D4</option>
				<option value="213">213 - D5</option>
				<option value="214">214 - D6</option>
				<option value="215">215 - D7</option>
				<option value="216">216 - D8</option>
				<option value="217">217 - D9</option>
				<option value="218">218 - DA</option>
				<option value="219">219 - DB</option>
				<option value="220">220 - DC</option>
				<option value="221">221 - DD</option>
				<option value="222">222 - DE</option>
				<option value="223">223 - DF</option>
				<option value="224">224 - E0</option>
				<option value="225">225 - E1</option>
				<option value="226">226 - E2</option>
				<option value="227">227 - E3</option>
				<option value="228">228 - E4</option>
				<option value="229">229 - E5</option>
				<option value="230">230 - E6</option>
				<option value="231">231 - E7</option>
				<option value="232">232 - E8</option>
				<option value="233">233 - E9</option>
				<option value="234">234 - EA</option>
				<option value="235">235 - EB</option>
				<option value="236">236 - EC</option>
				<option value="237">237 - ED</option>
				<option value="238">238 - EE</option>
				<option value="239">239 - EF</option>
				<option value="240">240 - F0</option>
				<option value="241">241 - F1</option>
				<option value="242">242 - F2</option>
				<option value="243">243 - F3</option>
				<option value="244">244 - F4</option>
				<option value="245">245 - F5</option>
				<option value="246">246 - F6</option>
				<option value="247">247 - F7</option>
				<option value="248">248 - F8</option>
				<option value="249">249 - F9</option>
				<option value="250">250 - FA</option>
				<option value="251">251 - FB</option>
				<option value="252">252 - FC</option>
				<option value="253">253 - FD</option>
				<option value="254">254 - FE</option>
				<option value="255">255 - FF</option>
			</select>
		</p>
		<p>
			Green: <select name="green" id="green">
				<option value="0">0 - 00</option>
				<option value="1">1 - 01</option>
				<option value="2">2 - 02</option>
				<option value="3">3 - 03</option>
				<option value="4">4 - 04</option>
				<option value="5">5 - 05</option>
				<option value="6">6 - 06</option>
				<option value="7">7 - 07</option>
				<option value="8">8 - 08</option>
				<option value="9">9 - 09</option>
				<option value="10">10 - 0A</option>
				<option value="11">11 - 0B</option>
				<option value="12">12 - 0C</option>
				<option value="13">13 - 0D</option>
				<option value="14">14 - 0E</option>
				<option value="15">15 - 0F</option>
				<option value="16">16 - 10</option>
				<option value="17">17 - 11</option>
				<option value="18">18 - 12</option>
				<option value="19">19 - 13</option>
				<option value="20">20 - 14</option>
				<option value="21">21 - 15</option>
				<option value="22">22 - 16</option>
				<option value="23">23 - 17</option>
				<option value="24">24 - 18</option>
				<option value="25">25 - 19</option>
				<option value="26">26 - 1A</option>
				<option value="27">27 - 1B</option>
				<option value="28">28 - 1C</option>
				<option value="29">29 - 1D</option>
				<option value="30">30 - 1E</option>
				<option value="31">31 - 1F</option>
				<option value="32">32 - 20</option>
				<option value="33">33 - 21</option>
				<option value="34">34 - 22</option>
				<option value="35">35 - 23</option>
				<option value="36">36 - 24</option>
				<option value="37">37 - 25</option>
				<option value="38">38 - 26</option>
				<option value="39">39 - 27</option>
				<option value="40">40 - 28</option>
				<option value="41">41 - 29</option>
				<option value="42">42 - 2A</option>
				<option value="43">43 - 2B</option>
				<option value="44">44 - 2C</option>
				<option value="45">45 - 2D</option>
				<option value="46">46 - 2E</option>
				<option value="47">47 - 2F</option>
				<option value="48">48 - 30</option>
				<option value="49">49 - 31</option>
				<option value="50">50 - 32</option>
				<option value="51">51 - 33</option>
				<option value="52">52 - 34</option>
				<option value="53">53 - 35</option>
				<option value="54">54 - 36</option>
				<option value="55">55 - 37</option>
				<option value="56">56 - 38</option>
				<option value="57">57 - 39</option>
				<option value="58">58 - 3A</option>
				<option value="59">59 - 3B</option>
				<option value="60">60 - 3C</option>
				<option value="61">61 - 3D</option>
				<option value="62">62 - 3E</option>
				<option value="63">63 - 3F</option>
				<option value="64">64 - 40</option>
				<option value="65">65 - 41</option>
				<option value="66">66 - 42</option>
				<option value="67">67 - 43</option>
				<option value="68">68 - 44</option>
				<option value="69">69 - 45</option>
				<option value="70">70 - 46</option>
				<option value="71">71 - 47</option>
				<option value="72">72 - 48</option>
				<option value="73">73 - 49</option>
				<option value="74">74 - 4A</option>
				<option value="75">75 - 4B</option>
				<option value="76">76 - 4C</option>
				<option value="77">77 - 4D</option>
				<option value="78">78 - 4E</option>
				<option value="79">79 - 4F</option>
				<option value="80">80 - 50</option>
				<option value="81">81 - 51</option>
				<option value="82">82 - 52</option>
				<option value="83">83 - 53</option>
				<option value="84">84 - 54</option>
				<option value="85">85 - 55</option>
				<option value="86">86 - 56</option>
				<option value="87">87 - 57</option>
				<option value="88">88 - 58</option>
				<option value="89">89 - 59</option>
				<option value="90">90 - 5A</option>
				<option value="91">91 - 5B</option>
				<option value="92">92 - 5C</option>
				<option value="93">93 - 5D</option>
				<option value="94">94 - 5E</option>
				<option value="95">95 - 5F</option>
				<option value="96">96 - 60</option>
				<option value="97">97 - 61</option>
				<option value="98">98 - 62</option>
				<option value="99">99 - 63</option>
				<option value="100">100 - 64</option>
				<option value="101">101 - 65</option>
				<option value="102">102 - 66</option>
				<option value="103">103 - 67</option>
				<option value="104">104 - 68</option>
				<option value="105">105 - 69</option>
				<option value="106">106 - 6A</option>
				<option value="107">107 - 6B</option>
				<option value="108">108 - 6C</option>
				<option value="109">109 - 6D</option>
				<option value="110">110 - 6E</option>
				<option value="111">111 - 6F</option>
				<option value="112">112 - 70</option>
				<option value="113">113 - 71</option>
				<option value="114">114 - 72</option>
				<option value="115">115 - 73</option>
				<option value="116">116 - 74</option>
				<option value="117">117 - 75</option>
				<option value="118">118 - 76</option>
				<option value="119">119 - 77</option>
				<option value="120">120 - 78</option>
				<option value="121">121 - 79</option>
				<option value="122">122 - 7A</option>
				<option value="123">123 - 7B</option>
				<option value="124">124 - 7C</option>
				<option value="125">125 - 7D</option>
				<option value="126">126 - 7E</option>
				<option value="127">127 - 7F</option>
				<option value="128">128 - 80</option>
				<option value="129">129 - 81</option>
				<option value="130">130 - 82</option>
				<option value="131">131 - 83</option>
				<option value="132">132 - 84</option>
				<option value="133">133 - 85</option>
				<option value="134">134 - 86</option>
				<option value="135">135 - 87</option>
				<option value="136">136 - 88</option>
				<option value="137">137 - 89</option>
				<option value="138">138 - 8A</option>
				<option value="139">139 - 8B</option>
				<option value="140">140 - 8C</option>
				<option value="141">141 - 8D</option>
				<option value="142">142 - 8E</option>
				<option value="143">143 - 8F</option>
				<option value="144">144 - 90</option>
				<option value="145">145 - 91</option>
				<option value="146">146 - 92</option>
				<option value="147">147 - 93</option>
				<option value="148">148 - 94</option>
				<option value="149">149 - 95</option>
				<option value="150">150 - 96</option>
				<option value="151">151 - 97</option>
				<option value="152">152 - 98</option>
				<option value="153">153 - 99</option>
				<option value="154">154 - 9A</option>
				<option value="155">155 - 9B</option>
				<option value="156">156 - 9C</option>
				<option value="157">157 - 9D</option>
				<option value="158">158 - 9E</option>
				<option value="159">159 - 9F</option>
				<option value="160">160 - A0</option>
				<option value="161">161 - A1</option>
				<option value="162">162 - A2</option>
				<option value="163">163 - A3</option>
				<option value="164">164 - A4</option>
				<option value="165">165 - A5</option>
				<option value="166">166 - A6</option>
				<option value="167">167 - A7</option>
				<option value="168">168 - A8</option>
				<option value="169">169 - A9</option>
				<option value="170">170 - AA</option>
				<option value="171">171 - AB</option>
				<option value="172">172 - AC</option>
				<option value="173">173 - AD</option>
				<option value="174">174 - AE</option>
				<option value="175">175 - AF</option>
				<option value="176">176 - B0</option>
				<option value="177">177 - B1</option>
				<option value="178">178 - B2</option>
				<option value="179">179 - B3</option>
				<option value="180">180 - B4</option>
				<option value="181">181 - B5</option>
				<option value="182">182 - B6</option>
				<option value="183">183 - B7</option>
				<option value="184">184 - B8</option>
				<option value="185">185 - B9</option>
				<option value="186">186 - BA</option>
				<option value="187">187 - BB</option>
				<option value="188">188 - BC</option>
				<option value="189">189 - BD</option>
				<option value="190">190 - BE</option>
				<option value="191">191 - BF</option>
				<option value="192">192 - C0</option>
				<option value="193">193 - C1</option>
				<option value="194">194 - C2</option>
				<option value="195">195 - C3</option>
				<option value="196">196 - C4</option>
				<option value="197">197 - C5</option>
				<option value="198">198 - C6</option>
				<option value="199">199 - C7</option>
				<option value="200">200 - C8</option>
				<option value="201">201 - C9</option>
				<option value="202">202 - CA</option>
				<option value="203">203 - CB</option>
				<option value="204">204 - CC</option>
				<option value="205">205 - CD</option>
				<option value="206">206 - CE</option>
				<option value="207">207 - CF</option>
				<option value="208">208 - D0</option>
				<option value="209">209 - D1</option>
				<option value="210">210 - D2</option>
				<option value="211">211 - D3</option>
				<option value="212">212 - D4</option>
				<option value="213">213 - D5</option>
				<option value="214">214 - D6</option>
				<option value="215">215 - D7</option>
				<option value="216">216 - D8</option>
				<option value="217">217 - D9</option>
				<option value="218">218 - DA</option>
				<option value="219">219 - DB</option>
				<option value="220">220 - DC</option>
				<option value="221">221 - DD</option>
				<option value="222">222 - DE</option>
				<option value="223">223 - DF</option>
				<option value="224">224 - E0</option>
				<option value="225">225 - E1</option>
				<option value="226">226 - E2</option>
				<option value="227">227 - E3</option>
				<option value="228">228 - E4</option>
				<option value="229">229 - E5</option>
				<option value="230">230 - E6</option>
				<option value="231">231 - E7</option>
				<option value="232">232 - E8</option>
				<option value="233">233 - E9</option>
				<option value="234">234 - EA</option>
				<option value="235">235 - EB</option>
				<option value="236">236 - EC</option>
				<option value="237">237 - ED</option>
				<option value="238">238 - EE</option>
				<option value="239">239 - EF</option>
				<option value="240">240 - F0</option>
				<option value="241">241 - F1</option>
				<option value="242">242 - F2</option>
				<option value="243">243 - F3</option>
				<option value="244">244 - F4</option>
				<option value="245">245 - F5</option>
				<option value="246">246 - F6</option>
				<option value="247">247 - F7</option>
				<option value="248">248 - F8</option>
				<option value="249">249 - F9</option>
				<option value="250">250 - FA</option>
				<option value="251">251 - FB</option>
				<option value="252">252 - FC</option>
				<option value="253">253 - FD</option>
				<option value="254">254 - FE</option>
				<option value="255">255 - FF</option>
			</select>
		</p>
		<p>
			Blue: <select name="blue" id="blue">
				<option value="0">0 - 00</option>
				<option value="1">1 - 01</option>
				<option value="2">2 - 02</option>
				<option value="3">3 - 03</option>
				<option value="4">4 - 04</option>
				<option value="5">5 - 05</option>
				<option value="6">6 - 06</option>
				<option value="7">7 - 07</option>
				<option value="8">8 - 08</option>
				<option value="9">9 - 09</option>
				<option value="10">10 - 0A</option>
				<option value="11">11 - 0B</option>
				<option value="12">12 - 0C</option>
				<option value="13">13 - 0D</option>
				<option value="14">14 - 0E</option>
				<option value="15">15 - 0F</option>
				<option value="16">16 - 10</option>
				<option value="17">17 - 11</option>
				<option value="18">18 - 12</option>
				<option value="19">19 - 13</option>
				<option value="20">20 - 14</option>
				<option value="21">21 - 15</option>
				<option value="22">22 - 16</option>
				<option value="23">23 - 17</option>
				<option value="24">24 - 18</option>
				<option value="25">25 - 19</option>
				<option value="26">26 - 1A</option>
				<option value="27">27 - 1B</option>
				<option value="28">28 - 1C</option>
				<option value="29">29 - 1D</option>
				<option value="30">30 - 1E</option>
				<option value="31">31 - 1F</option>
				<option value="32">32 - 20</option>
				<option value="33">33 - 21</option>
				<option value="34">34 - 22</option>
				<option value="35">35 - 23</option>
				<option value="36">36 - 24</option>
				<option value="37">37 - 25</option>
				<option value="38">38 - 26</option>
				<option value="39">39 - 27</option>
				<option value="40">40 - 28</option>
				<option value="41">41 - 29</option>
				<option value="42">42 - 2A</option>
				<option value="43">43 - 2B</option>
				<option value="44">44 - 2C</option>
				<option value="45">45 - 2D</option>
				<option value="46">46 - 2E</option>
				<option value="47">47 - 2F</option>
				<option value="48">48 - 30</option>
				<option value="49">49 - 31</option>
				<option value="50">50 - 32</option>
				<option value="51">51 - 33</option>
				<option value="52">52 - 34</option>
				<option value="53">53 - 35</option>
				<option value="54">54 - 36</option>
				<option value="55">55 - 37</option>
				<option value="56">56 - 38</option>
				<option value="57">57 - 39</option>
				<option value="58">58 - 3A</option>
				<option value="59">59 - 3B</option>
				<option value="60">60 - 3C</option>
				<option value="61">61 - 3D</option>
				<option value="62">62 - 3E</option>
				<option value="63">63 - 3F</option>
				<option value="64">64 - 40</option>
				<option value="65">65 - 41</option>
				<option value="66">66 - 42</option>
				<option value="67">67 - 43</option>
				<option value="68">68 - 44</option>
				<option value="69">69 - 45</option>
				<option value="70">70 - 46</option>
				<option value="71">71 - 47</option>
				<option value="72">72 - 48</option>
				<option value="73">73 - 49</option>
				<option value="74">74 - 4A</option>
				<option value="75">75 - 4B</option>
				<option value="76">76 - 4C</option>
				<option value="77">77 - 4D</option>
				<option value="78">78 - 4E</option>
				<option value="79">79 - 4F</option>
				<option value="80">80 - 50</option>
				<option value="81">81 - 51</option>
				<option value="82">82 - 52</option>
				<option value="83">83 - 53</option>
				<option value="84">84 - 54</option>
				<option value="85">85 - 55</option>
				<option value="86">86 - 56</option>
				<option value="87">87 - 57</option>
				<option value="88">88 - 58</option>
				<option value="89">89 - 59</option>
				<option value="90">90 - 5A</option>
				<option value="91">91 - 5B</option>
				<option value="92">92 - 5C</option>
				<option value="93">93 - 5D</option>
				<option value="94">94 - 5E</option>
				<option value="95">95 - 5F</option>
				<option value="96">96 - 60</option>
				<option value="97">97 - 61</option>
				<option value="98">98 - 62</option>
				<option value="99">99 - 63</option>
				<option value="100">100 - 64</option>
				<option value="101">101 - 65</option>
				<option value="102">102 - 66</option>
				<option value="103">103 - 67</option>
				<option value="104">104 - 68</option>
				<option value="105">105 - 69</option>
				<option value="106">106 - 6A</option>
				<option value="107">107 - 6B</option>
				<option value="108">108 - 6C</option>
				<option value="109">109 - 6D</option>
				<option value="110">110 - 6E</option>
				<option value="111">111 - 6F</option>
				<option value="112">112 - 70</option>
				<option value="113">113 - 71</option>
				<option value="114">114 - 72</option>
				<option value="115">115 - 73</option>
				<option value="116">116 - 74</option>
				<option value="117">117 - 75</option>
				<option value="118">118 - 76</option>
				<option value="119">119 - 77</option>
				<option value="120">120 - 78</option>
				<option value="121">121 - 79</option>
				<option value="122">122 - 7A</option>
				<option value="123">123 - 7B</option>
				<option value="124">124 - 7C</option>
				<option value="125">125 - 7D</option>
				<option value="126">126 - 7E</option>
				<option value="127">127 - 7F</option>
				<option value="128">128 - 80</option>
				<option value="129">129 - 81</option>
				<option value="130">130 - 82</option>
				<option value="131">131 - 83</option>
				<option value="132">132 - 84</option>
				<option value="133">133 - 85</option>
				<option value="134">134 - 86</option>
				<option value="135">135 - 87</option>
				<option value="136">136 - 88</option>
				<option value="137">137 - 89</option>
				<option value="138">138 - 8A</option>
				<option value="139">139 - 8B</option>
				<option value="140">140 - 8C</option>
				<option value="141">141 - 8D</option>
				<option value="142">142 - 8E</option>
				<option value="143">143 - 8F</option>
				<option value="144">144 - 90</option>
				<option value="145">145 - 91</option>
				<option value="146">146 - 92</option>
				<option value="147">147 - 93</option>
				<option value="148">148 - 94</option>
				<option value="149">149 - 95</option>
				<option value="150">150 - 96</option>
				<option value="151">151 - 97</option>
				<option value="152">152 - 98</option>
				<option value="153">153 - 99</option>
				<option value="154">154 - 9A</option>
				<option value="155">155 - 9B</option>
				<option value="156">156 - 9C</option>
				<option value="157">157 - 9D</option>
				<option value="158">158 - 9E</option>
				<option value="159">159 - 9F</option>
				<option value="160">160 - A0</option>
				<option value="161">161 - A1</option>
				<option value="162">162 - A2</option>
				<option value="163">163 - A3</option>
				<option value="164">164 - A4</option>
				<option value="165">165 - A5</option>
				<option value="166">166 - A6</option>
				<option value="167">167 - A7</option>
				<option value="168">168 - A8</option>
				<option value="169">169 - A9</option>
				<option value="170">170 - AA</option>
				<option value="171">171 - AB</option>
				<option value="172">172 - AC</option>
				<option value="173">173 - AD</option>
				<option value="174">174 - AE</option>
				<option value="175">175 - AF</option>
				<option value="176">176 - B0</option>
				<option value="177">177 - B1</option>
				<option value="178">178 - B2</option>
				<option value="179">179 - B3</option>
				<option value="180">180 - B4</option>
				<option value="181">181 - B5</option>
				<option value="182">182 - B6</option>
				<option value="183">183 - B7</option>
				<option value="184">184 - B8</option>
				<option value="185">185 - B9</option>
				<option value="186">186 - BA</option>
				<option value="187">187 - BB</option>
				<option value="188">188 - BC</option>
				<option value="189">189 - BD</option>
				<option value="190">190 - BE</option>
				<option value="191">191 - BF</option>
				<option value="192">192 - C0</option>
				<option value="193">193 - C1</option>
				<option value="194">194 - C2</option>
				<option value="195">195 - C3</option>
				<option value="196">196 - C4</option>
				<option value="197">197 - C5</option>
				<option value="198">198 - C6</option>
				<option value="199">199 - C7</option>
				<option value="200">200 - C8</option>
				<option value="201">201 - C9</option>
				<option value="202">202 - CA</option>
				<option value="203">203 - CB</option>
				<option value="204">204 - CC</option>
				<option value="205">205 - CD</option>
				<option value="206">206 - CE</option>
				<option value="207">207 - CF</option>
				<option value="208">208 - D0</option>
				<option value="209">209 - D1</option>
				<option value="210">210 - D2</option>
				<option value="211">211 - D3</option>
				<option value="212">212 - D4</option>
				<option value="213">213 - D5</option>
				<option value="214">214 - D6</option>
				<option value="215">215 - D7</option>
				<option value="216">216 - D8</option>
				<option value="217">217 - D9</option>
				<option value="218">218 - DA</option>
				<option value="219">219 - DB</option>
				<option value="220">220 - DC</option>
				<option value="221">221 - DD</option>
				<option value="222">222 - DE</option>
				<option value="223">223 - DF</option>
				<option value="224">224 - E0</option>
				<option value="225">225 - E1</option>
				<option value="226">226 - E2</option>
				<option value="227">227 - E3</option>
				<option value="228">228 - E4</option>
				<option value="229">229 - E5</option>
				<option value="230">230 - E6</option>
				<option value="231">231 - E7</option>
				<option value="232">232 - E8</option>
				<option value="233">233 - E9</option>
				<option value="234">234 - EA</option>
				<option value="235">235 - EB</option>
				<option value="236">236 - EC</option>
				<option value="237">237 - ED</option>
				<option value="238">238 - EE</option>
				<option value="239">239 - EF</option>
				<option value="240">240 - F0</option>
				<option value="241">241 - F1</option>
				<option value="242">242 - F2</option>
				<option value="243">243 - F3</option>
				<option value="244">244 - F4</option>
				<option value="245">245 - F5</option>
				<option value="246">246 - F6</option>
				<option value="247">247 - F7</option>
				<option value="248">248 - F8</option>
				<option value="249">249 - F9</option>
				<option value="250">250 - FA</option>
				<option value="251">251 - FB</option>
				<option value="252">252 - FC</option>
				<option value="253">253 - FD</option>
				<option value="254">254 - FE</option>
				<option value="255">255 - FF</option>
			</select>
		</p>
		<p>
			<input type="text" value="" name="finalcolor" id="finalcolor">
		</p>
	</form>
</body>
</html>

and here’s the javascript:

var mypage = {
	red: null,
	green: null,
	blue: null,
	colourbox: null,
	d2h: function(d) {
		var hex = parseInt(d).toString(16);
		if (hex.length < 2) {
			hex = '0' + hex;
		}
		return hex.toUpperCase();
	},
	update: function() {
		finalcolor = '#' + mypage.d2h(mypage.red.value) + mypage.d2h(mypage.green.value) + mypage.d2h(mypage.blue.value);
		mypage.colourbox.style.backgroundColor = finalcolor;
		mypage.output.value = finalcolor;
	}
};

window.onload = function() {
	mypage.red = document.getElementById('red');
	mypage.red.onchange = mypage.update;
	mypage.green = document.getElementById('green');
	mypage.green.onchange = mypage.update;
	mypage.blue = document.getElementById('blue');
	mypage.blue.onchange = mypage.update;
	mypage.colourbox = document.getElementById('colourbox');
	mypage.output = document.getElementById('finalcolor');
}
Advertisements

About Mr Chimp

I make music, draw pictures, browse the internet, programme, and make sweet, sweet cups of tea until the early hours.
This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

2 Responses to Colour Picker

  1. Danimal says:

    That is a lot of html. I take it you didN’t hand code the lot?

  2. Mr Chimp says:

    Haha! Nope, I wrote a python script for it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s