Add a ROSEIC HEXA COLOR CODE GENERATOR TOOL to Blogger

dreamstime_17776541[1]

Blogger Tools are very important in these days. Just because, some blogs have many unique and awesome tools. But they never share these tools with their visitors. But we want to share our tools with you. and here is the hexa color code generator. You doesn’t need to search for codes of your fav color. You click on your fav color and the color code will be show automatically. This is not a SWF tool, this is simply created with  JavaScript.

Step – Ist  Add Hexa Color Code Generator

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed >  Expand Widget Templates
  • Press Ctrl + F and search the code shown below.

</head>

  • Paste below code just before </head>

<script language=’javascript’>
function Barva(koda)
{
document.getElementById(“vzorec”).bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById(“vzorec2”).bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</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”
}

// 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)
if (hexvalue!=”#FFFFFF”) document.getElementById(“pickerhexval”).select();
}

</script><!–[if gte IE 5.5000]>
<script type=”text/javascript”>

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id='” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class='” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title='” + img.title + “‘ ” : “title='” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”” + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=\'” + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}

YAHOO.util.Event.addListener(window, “load”, correctPNG);

</script>

  • Now Save your template.

 Step – IInd  Add Hexa Color Code Generator

  • Go to Blogger posting area
  • Click on HTML and paste below code in that area.

 

<center><form name=”hcc” id=”hcc”>
<table style=”border-collapse: collapse;” align=”center” border=”1″ bordercolor=”#cccccc” cellpadding=”0″ cellspacing=”0″><tbody><tr><td><table align=”center” border=”0″ cellpadding=”0″ cellspacing=”1″ width=”375″><tbody><tr height=”24″><td onclick=”Barva(this.bgColor)” bgcolor=”#190707″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#2a0a0a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#3b0b0b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#610b0b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#8a0808″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#b40404″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#df0101″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#ff0000″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#fe2e2e”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#fa5858″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f78181″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f5a9a9″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f6cece”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f8e0e0″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#fbefef”>
</td></tr><tr height=”24″><td onclick=”Barva(this.bgColor)” bgcolor=”#191007″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#2a1b0a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#3b240b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#61380b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#8a4b08″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#b45f04″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#df7401″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#ff8000″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#fe9a2e”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#faac58″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f7be81″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f5d0a9″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f6e3ce”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f8ece0″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#fbf5ef”>
</td></tr><tr height=”24″><td onclick=”Barva(this.bgColor)” bgcolor=”#181907″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#292a0a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#393b0b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#5e610b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#868a08″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#aeb404″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#d7df01″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#ffff00″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f7fe2e”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f4fa58″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f3f781″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f2f5a9″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f5f6ce”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f7f8e0″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#fbfbef”>
</td></tr><tr height=”24″><td onclick=”Barva(this.bgColor)” bgcolor=”#101907″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#1b2a0a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#243b0b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#38610b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#4b8a08″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#5fb404″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#74df00″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#80ff00″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#9afe2e”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#acfa58″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#bef781″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#d0f5a9″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#e3f6ce”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#ecf8e0″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f5fbef”>
</td></tr><tr height=”24″><td onclick=”Barva(this.bgColor)” bgcolor=”#071907″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0a2a0a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0b3b0b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0b610b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#088a08″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#04b404″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#01df01″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#00ff00″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#2efe2e”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#58fa58″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#81f781″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#a9f5a9″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#cef6ce”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#e0f8e0″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#effbef”>
</td></tr><tr height=”24″><td onclick=”Barva(this.bgColor)” bgcolor=”#071910″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0a2a1b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0b3b24″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0b6138″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#088a4b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#04b45f”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#01df74″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#00ff80″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#2efe9a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#58faac”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#81f7be”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#a9f5d0″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#cef6e3″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#e0f8ec”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#effbf5″>
</td></tr><tr height=”24″><td onclick=”Barva(this.bgColor)” bgcolor=”#071918″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0a2a29″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0b3b39″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0b615e”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#088a85″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#04b4ae”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#01dfd7″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#00ffff”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#2efef7″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#58faf4″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#81f7f3″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#a9f5f2″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#cef6f5″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#e0f8f7″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#effbfb”>
</td></tr><tr height=”24″><td onclick=”Barva(this.bgColor)” bgcolor=”#071019″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0a1b2a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0b243b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0b3861″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#084b8a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#045fb4″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0174df”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0080ff”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#2e9afe”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#58acfa”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#81bef7″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#a9d0f5″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#cee3f6″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#e0ecf8″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#eff5fb”>
</td></tr><tr height=”24″><td onclick=”Barva(this.bgColor)” bgcolor=”#070719″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0a0a2a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0b0b3b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0b0b61″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#08088a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0404b4″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0101df”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0000ff”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#2e2efe”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#5858fa”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#8181f7″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#a9a9f5″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#cecef6″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#e0e0f8″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#efeffb”>
</td></tr><tr height=”24″><td onclick=”Barva(this.bgColor)” bgcolor=”#100719″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#1b0a2a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#240b3b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#380b61″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#4b088a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#5f04b4″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#7401df”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#8000ff”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#9a2efe”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#ac58fa”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#be81f7″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#d0a9f5″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#e3cef6″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#ece0f8″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f5effb”>
</td></tr><tr height=”24″> <td onclick=”Barva(this.bgColor)” bgcolor=”#190718″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#2a0a29″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#3b0b39″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#610b5e”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#8a0886″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#b404ae”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#df01d7″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#ff00ff”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#fe2ef7″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#fa58f4″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f781f3″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f5a9f2″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f6cef5″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f8e0f7″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#fbeffb”>
</td></tr><tr height=”24″><td onclick=”Barva(this.bgColor)” bgcolor=”#190710″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#2a0a1b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#3b0b24″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#610b38″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#8a084b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#b4045f”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#df0174″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#ff0080″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#fe2e9a”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#fa58ac”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f781be”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f5a9d0″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f6cee3″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f8e0ec”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#fbeff5″>
</td></tr><tr height=”24″><td onclick=”Barva(this.bgColor)” bgcolor=”#000000″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#0b0b0b”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#151515″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#1c1c1c”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#2e2e2e”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#424242″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#585858″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#6e6e6e”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#848484″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#a4a4a4″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#bdbdbd”>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#d8d8d8″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#e6e6e6″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#f2f2f2″>
</td><td onclick=”Barva(this.bgColor)” bgcolor=”#ffffff”>
</td></tr></tbody></table></td></tr></tbody></table><table align=”center” border=”0″ cellpadding=”0″ cellspacing=”2″><tbody><tr height=”24″><td id=”vzorec” height=”24″ width=”24″>
</td><td valign=”bottom”><p><font face=”verdana”><b>Color Code : </b></font><input name=”barva” id=”barva” style=”font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;” maxlength=”7″ size=”9″ type=”text”></p></td></tr></tbody></table>
<a href=”http://www.widgetgenerators.blogspot.com” style=”color: #ffffff”>Widget Generators</a>
</form></center>

 

  • Now Publish Your Post and that’s done.

 

You can also add this by using iframe

  •  Go to Blogger posting area
  • Click on HTML and paste below code in that area.

 

<center>
<iframe frameborder=”0″ height=”420px” marginheight=”0px” marginwidth=”0px” name=”Roseic Hexa Color COde Generator” scrolling=”no” src=”https://dl.dropbox.com/u/63968842/roseic%20color%20code%20generator%28www.widgetgenerators.blogspot.com%29.html” style=”border: 0px #FFFFFF none;” width=”500px”></iframe>
</center>

 

  •  Now Publish Your Post and that’s done.

 

If Any Problem , Ask in Comments

Reply