HTML Color Picke

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><br /><link href="http://www.htmlcodes.me/color/color_picker/css/screen.css" rel="stylesheet" type="text/css"></link> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/ddcolorposter.js" type="text/javascript"></script> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/YAHOO.js" type="text/javascript"></script> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/log.js" type="text/javascript2"></script> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/color.js" type="text/javascript"></script> <br /> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/event.js" type="text/javascript"></script> <br /> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/dom.js" type="text/javascript"></script> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/animation.js" type="text/javascript"></script> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/dragdrop.js" type="text/javascript"></script> <br /> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/slider.js" type="text/javascript"></script> <br /><script type="text/javascript"> <br /> <br /> var hue;<br /> var picker;<br /> //var gLogger;<br /> var dd1, dd2;<br /> var r, g, b;<br /> <br /> function init() {<br /> if (typeof(ygLogger) != "undefined")<br /> ygLogger.init(document.getElementById("logDiv"));<br /> pickerInit();<br /> ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"<br /> ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"<br /> ddcolorposter.fillcolorbox("colorfield3", "colorbox3") //PREFILL "colorbox1" with hex value from "colorfield1"<br /> }<br /> <br /> // Picker ---------------------------------------------------------<br /> <br /> function pickerInit() {<br /> hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);<br /> hue.onChange = function(newVal) { hueUpdate(newVal); };<br /> <br /> picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector",<br /> 0, 180, 0, 180);<br /> picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };<br /> <br /> hueUpdate();<br /> <br /> dd1 = new YAHOO.util.DD("pickerPanel");<br /> dd1.setHandleElId("pickerHandle");<br /> dd1.endDrag = function(e) {<br /> // picker.thumb.resetConstraints();<br /> // hue.thumb.resetConstraints();<br /> };<br /> }<br /> <br /> executeonload(init);<br /> <br /> function pickerUpdate(newX, newY) {<br /> pickerSwatchUpdate();<br /> }<br /> <br /> <br /> function hueUpdate(newVal) {<br /> <br /> var h = (180 - hue.getValue()) / 180;<br /> if (h == 1) { h = 0; }<br /> <br /> var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);<br /> <br /> document.getElementById("pickerDiv").style.backgroundColor =<br /> "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";<br /> <br /> pickerSwatchUpdate();<br /> }<br /> <br /> function pickerSwatchUpdate() {<br /> var h = (180 - hue.getValue());<br /> if (h == 180) { h = 0; }<br /> document.getElementById("pickerhval").value = (h*2);<br /> <br /> h = h / 180;<br /> <br /> var s = picker.getXValue() / 180;<br /> document.getElementById("pickersval").value = Math.round(s * 100);<br /> <br /> var v = (180 - picker.getYValue()) / 180;<br /> document.getElementById("pickervval").value = Math.round(v * 100);<br /> <br /> var a = YAHOO.util.Color.hsv2rgb( h, s, v );<br /> <br /> document.getElementById("pickerSwatch").style.backgroundColor =<br /> "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";<br /> <br /> document.getElementById("pickerrval").value = a[0];<br /> document.getElementById("pickergval").value = a[1];<br /> document.getElementById("pickerbval").value = a[2];<br /> var hexvalue = document.getElementById("pickerhexval").value =<br /> YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);<br /> ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)<br /> }<br /></script> <br /><br /><br /><br /><table style="background-color: #ffffcc;"> <br /><tbody><br /><tr> <br /><td style="vertical-align: top;"><div><br /><form><br /><b>Choosing Multiple Colors</b> (optional)<br /><br />Choose/compare up to 3 colors. Click in a field below, then select a color from the color picker... Try it!<br /><br />Color 1: # <input id="colorfield1" onfocus="ddcolorposter.echocolor(this, 'colorbox1')" size="6" type="text" /> <span class="colorbox" id="colorbox1">____</span> <br /><br />Color 2: # <input id="colorfield2" onfocus="ddcolorposter.echocolor(this, 'colorbox2')" size="6" type="text" /> <span class="colorbox" id="colorbox2">____</span><br /><br />Color 3: # <input id="colorfield3" onfocus="ddcolorposter.echocolor(this, 'colorbox3')" size="6" type="text" /> <span class="colorbox" id="colorbox3">____</span> <br /></form><br /></div><br /></td> <br /><td style="vertical-align: top;"><div class="dragPanel" id="pickerPanel" style="left: 1px; top: 1px;"><br /><h4 id="pickerHandle"><br /> </h4><br /><div id="pickerDiv" style="background-color: red;"><br /><img alt="" id="pickerbg" src="http://www.htmlcodes.me/color/color_picker/img/pickerbg.png" /> <br /> <br /> <br /><br /><div id="selector" style="left: 0px; top: 0px;"><br /><img src="http://www.htmlcodes.me/color/color_picker/img/select.gif" /></div><br /></div><br /><div id="hueBg"><br /><div id="hueThumb" style="left: 0px; top: 0px;"><br /><img src="http://www.htmlcodes.me/color/color_picker/img/hline.png" /></div><br /></div><br /><div id="pickervaldiv"><br /><form name="pickerform" onsubmit="return pickerUpdate()"><br /><br /><br />R <input id="pickerrval" maxlength="3" name="pickerrval" size="3" type="text" value="0" /> <br /> H <input id="pickerhval" maxlength="3" name="pickerhval" size="3" type="text" value="0" /> <br /> <br /><br />G <input id="pickergval" maxlength="3" name="pickergval" size="3" type="text" value="0" /> <br /> S <input id="pickersval" maxlength="3" name="pickergsal" size="3" type="text" value="0" /> <br /> <br /><br />B <input id="pickerbval" maxlength="3" name="pickerbval" size="3" type="text" value="0" /> <br /> <br /> V <input id="pickervval" maxlength="3" name="pickervval" size="3" type="text" value="0" /> <br /> <br /><br /><br /><br /># <input id="pickerhexval" maxlength="6" name="pickerhexval" size="6" style="font-size: 18px; font-weight: bold;" type="text" value="0" /> <br /> </form><br /></div><br /><div id="pickerSwatch" style="background-color: white;"><br /></div><br /></div><br /></td> <br /></tr><br /></tbody></table><br /><h2><br /> </h2><br />In HTML, you can specify color using its RGB value (using either hex or RGB notation), or by its color name. <br /><br />The HTML color picker below makes it easy to choose colors for your website. <br /><br />To use the HTML color picker:<br /><br /><ol style="list-style-position: inside;"><br /><li>Use the slider on the right to change the hue.</li><br /><li>Click anywhere in the large square to pick a color.</li><br /><li>Once you're happy with the color, copy the hexadecimal value from the bottom field (the series of 6 digits/letters in <b>bold</b> (for example <b>#FFFFFF</b>).</li><br /></ol><br /><h2><br /> </h2><br /><h2><br />Color Code Examples</h2><br />Here are some quick examples of the code needed to apply color to your HTML documents. More about <a href="http://www.htmlcodes.me/color/html-color-codes.cfm">HTML color codes here</a>.<br /><br /><div style="float: left; margin: 15px; width: 180px;"><br />To specify text color:<br /><br /><textarea class="example" onclick="this.focus();this.select()">color:#ff0000;<br />

HTML Color Picke

<div dir="ltr" style="text-align: left;" trbidi="on">In HTML, you can specify color using its RGB value (using either hex or RGB notation), or by its color name. <br />The HTML color picker below makes it easy to choose colors for your website. <br />To use the HTML color picker:<br /><ol style="list-style-position: inside;"><li>Use the slider on the right to change the hue.</li><li>Click anywhere in the large square to pick a color.</li><li>Once you're happy with the color, copy the hexadecimal value from the bottom field (the series of 6 digits/letters in <b>bold</b> (for example <b>#FFFFFF</b>).</li></ol><link href="http://www.htmlcodes.me/color/color_picker/css/screen.css" rel="stylesheet" type="text/css"></link> <script src="http://www.htmlcodes.me/color/color_picker/js/ddcolorposter.js" type="text/javascript"></script> <script src="http://www.htmlcodes.me/color/color_picker/js/YAHOO.js" type="text/javascript"></script> <script src="http://www.htmlcodes.me/color/color_picker/js/log.js" type="text/javascript2"></script> <script src="http://www.htmlcodes.me/color/color_picker/js/color.js" type="text/javascript"></script> <script src="http://www.htmlcodes.me/color/color_picker/js/event.js" type="text/javascript"></script> <script src="http://www.htmlcodes.me/color/color_picker/js/dom.js" type="text/javascript"></script> <script src="http://www.htmlcodes.me/color/color_picker/js/animation.js" type="text/javascript"></script> <script src="http://www.htmlcodes.me/color/color_picker/js/dragdrop.js" type="text/javascript"></script> <script src="http://www.htmlcodes.me/color/color_picker/js/slider.js" type="text/javascript"></script> <script type="text/javascript"> var hue; var picker; //var gLogger; var dd1, dd2; var r, g, b; function init() { if (typeof(ygLogger) != "undefined") ygLogger.init(document.getElementById("logDiv")); pickerInit(); ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1" ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1" ddcolorposter.fillcolorbox("colorfield3", "colorbox3") //PREFILL "colorbox1" with hex value from "colorfield1" } // Picker --------------------------------------------------------- function pickerInit() { hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180); hue.onChange = function(newVal) { hueUpdate(newVal); }; picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180); picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); }; hueUpdate(); dd1 = new YAHOO.util.DD("pickerPanel"); dd1.setHandleElId("pickerHandle"); dd1.endDrag = function(e) { // picker.thumb.resetConstraints(); // hue.thumb.resetConstraints(); }; } executeonload(init); function pickerUpdate(newX, newY) { pickerSwatchUpdate(); } function hueUpdate(newVal) { var h = (180 - hue.getValue()) / 180; if (h == 1) { h = 0; } var a = YAHOO.util.Color.hsv2rgb( h, 1, 1); document.getElementById("pickerDiv").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; pickerSwatchUpdate(); } function pickerSwatchUpdate() { var h = (180 - hue.getValue()); if (h == 180) { h = 0; } document.getElementById("pickerhval").value = (h*2); h = h / 180; var s = picker.getXValue() / 180; document.getElementById("pickersval").value = Math.round(s * 100); var v = (180 - picker.getYValue()) / 180; document.getElementById("pickervval").value = Math.round(v * 100); var a = YAHOO.util.Color.hsv2rgb( h, s, v ); document.getElementById("pickerSwatch").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; document.getElementById("pickerrval").value = a[0]; document.getElementById("pickergval").value = a[1]; document.getElementById("pickerbval").value = a[2]; var hexvalue = document.getElementById("pickerhexval").value = YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]); ddcolorposter.initialize(a[0], a[1], a[2], hexvalue) } </script> <br /><table style="background-color: #ffffcc;"> <tbody><tr> <td style="vertical-align: top;"><div><form><b>Choosing Multiple Colors</b> (optional)<br />Choose/compare up to 3 colors. Click in a field below, then select a color from the color picker... Try it!<br />Color 1: # <input id="colorfield1" onfocus="ddcolorposter.echocolor(this, 'colorbox1')" size="6" type="text" /> <span class="colorbox" id="colorbox1">____</span> <br />Color 2: # <input id="colorfield2" onfocus="ddcolorposter.echocolor(this, 'colorbox2')" size="6" type="text" /> <span class="colorbox" id="colorbox2">____</span><br />Color 3: # <input id="colorfield3" onfocus="ddcolorposter.echocolor(this, 'colorbox3')" size="6" type="text" /> <span class="colorbox" id="colorbox3">____</span> </form></div></td> <td style="vertical-align: top;"><div class="dragPanel" id="pickerPanel" style="left: 1px; top: 1px;"><h4 id="pickerHandle"> </h4><div id="pickerDiv" style="background-color: red;"><img alt="" id="pickerbg" src="http://www.htmlcodes.me/color/color_picker/img/pickerbg.png" /> <br /><div id="selector" style="left: 0px; top: 0px;"><img src="http://www.htmlcodes.me/color/color_picker/img/select.gif" /></div></div><div id="hueBg"><div id="hueThumb" style="left: 0px; top: 0px;"><img src="http://www.htmlcodes.me/color/color_picker/img/hline.png" /></div></div><div id="pickervaldiv"><form name="pickerform" onsubmit="return pickerUpdate()"><br />R <input id="pickerrval" maxlength="3" name="pickerrval" size="3" type="text" value="0" /> H <input id="pickerhval" maxlength="3" name="pickerhval" size="3" type="text" value="0" /> <br />G <input id="pickergval" maxlength="3" name="pickergval" size="3" type="text" value="0" /> S <input id="pickersval" maxlength="3" name="pickergsal" size="3" type="text" value="0" /> <br />B <input id="pickerbval" maxlength="3" name="pickerbval" size="3" type="text" value="0" /> V <input id="pickervval" maxlength="3" name="pickervval" size="3" type="text" value="0" /> <br /><br /># <input id="pickerhexval" maxlength="6" name="pickerhexval" size="6" style="font-size: 18px; font-weight: bold;" type="text" value="0" /> </form></div><div id="pickerSwatch" style="background-color: white;"></div></div></td> </tr></tbody></table><h2>Color Code Examples</h2>Here are some quick examples of the code needed to apply color to your HTML documents. More about <a href="http://www.htmlcodes.me/color/html-color-codes.cfm">HTML color codes here</a>.<br /><div style="float: left; margin: 15px; width: 180px;">To specify text color:<br /><textarea class="example" onclick="this.focus();this.select()">color:#ff0000;