KrishnaVandanu

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 />

To specify background color:

To specify border color:

HTML Color Picke

Choosing Multiple Colors (optional) Choose/compare up to 3 colors. Click in a field below, then select a color from the co...

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;

To specify background color:

To specify border color:

HTML Color Picke

In HTML, you can specify color using its RGB value (using either hex or RGB notation), or by its color name. The HTML color picker below mak...

HTML Background Code

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div dir="ltr" style="text-align: left;" trbidi="on"><br />This page contains HTML background code. Feel free to copy and paste  the HTML background code into your own website, blog, MySpace page, or  other HTML document. And feel free to modify the code as you wish.<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s320/DSCF0494.JPG" width="563" /></a></div><br /><br /><br /><h2><br />Shorthand Background Code</h2><br />The quickest HTML code for backgrounds is the <code>background</code> property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The <code>background</code> property is a shorthand property for setting all background properties at once. <br /><br /><table border="0" cellspacing="0" class="example"><tbody><br /><tr><th>Source Code</th><th>Result</th></tr><br /><tr><td><textarea class="exampleCode" cols="70" name="bodyText" rows="3" style="height: 91px; width: 386px;"> <div style="background:#eee <br />url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) <br />repeat fixed;<br />  overflow:scroll;<br />  width:200px;<br />  height:100px;"><br /><p><br />This example sets all the background properties with one  property - the 'background' property. This keeps the code shorter and  easier to read.</p><br /></div><br />

This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.

Page Background

To set the background for the whole page, simply apply the background property against the body tag.

Example:

Alternative Background Codes

Below are more HTML background codes. In these examples, instead of using the background shorthand property, we use a property more specific to the actual effect we want to achieve. Doing this is simply an alternative - it's your choice which method you use.

Background Color

This example code applies a background color to a p tag using the background-color property. You can apply background color to any other HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Choose a color with the HTML color picker.

Source Code	Result
<!--<br /> Codes by HTMLcodes.me --> <p style="background-color:#0f0;color:black;width:200px;"><br />This text has got a background color applied. You could also apply background color to the whole page if you like.</p><br />	This text has got a background color applied. You could also apply background color to the whole page if you like.

Background Image

This example code applies a background color to a p tag using the background-color property. You can apply background color to any HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Source Code	Result
<!--<br /> Codes by HTMLcodes.me --> <div <br />style="background-image:url('http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG');color:blue;font-size:14px;width:300px;height:200px"><br />This div tag has got a background image. You could also apply a background image to the whole page if you like.</div><br />	This div tag has got a background image. You could also apply a background image to the whole page if you like.

Fixed Background Image

You can fix the background image so that it doesn't scroll when you scroll the div (or page, as the case may be).

Source Code	Result
<!--<br /> Codes by HTMLcodes.me --> <div <br />style="background-image:url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG);<br /><br /> background-repeat:repeat;<br /> background-attachment:fixed;<br /> overflow:scroll;<br /> width:200px;<br /> height:100px;"><br /><p><br />This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.</p><br /></div><br />	This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.

Source Code

Result

<!--<br /> Codes by HTMLcodes.me --> <div <br />style="background-image:url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG);<br /><br /> background-repeat:repeat;<br /> background-attachment:fixed;<br /> overflow:scroll;<br /> width:200px;<br /> height:100px;"><br /><p><br />This HTML background code demonstrates how to keep the  background image fixed. Scroll down to see what I mean - the background  image stays in the same position.</p><br /></div><br />

This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.

http://ajabingung.blogspot.com/2013/03/html-background-code.html

HTML Background Code

This page contains HTML background code. Feel free to copy and paste the HTML background code into your own website, blog, MySpace page, or...

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">This page contains HTML background code. Feel free to copy and paste  the HTML background code into your own website, blog, MySpace page, or  other HTML document. And feel free to modify the code as you wish.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s320/DSCF0494.JPG" width="563" /></a></div><br /><h2>Shorthand Background Code</h2>The quickest HTML code for backgrounds is the <code>background</code> property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The <code>background</code> property is a shorthand property for setting all background properties at once. <br /><table border="0" cellspacing="0" class="example"><tbody><tr><th>Source Code</th><th>Result</th></tr><tr><td><textarea class="exampleCode" cols="70" name="bodyText" rows="3" style="height: 91px; width: 386px;"> <div style="background:#eee  url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG)  repeat fixed;   overflow:scroll;   width:200px;   height:100px;"><p>This example sets all the background properties with one  property - the 'background' property. This keeps the code shorter and  easier to read.</p></div>