HTML Color Picke


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) }
Choosing Multiple Colors (optional)
Choose/compare up to 3 colors. Click in a field below, then select a color from the color picker… Try it!
Color 1: # ____
Color 2: # ____
Color 3: # ____

 

R H
G S
B V

#

 

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 makes it easy to choose colors for your website.
To use the HTML color picker:

  1. Use the slider on the right to change the hue.
  2. Click anywhere in the large square to pick a color.
  3. Once you’re happy with the color, copy the hexadecimal value from the bottom field (the series of 6 digits/letters in bold (for example #FFFFFF).

 

Color Code Examples

Here are some quick examples of the code needed to apply color to your HTML documents. More about HTML color codes here.

To specify text color:
color:#ff0000;
To specify background color:
background-color:#ff0000;
To specify border color:
border:1px solid #ff0000;

Enhanced by Zemanta

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s