0
How to Add Hex Color Chart to Blogger?This tutorial explains us how to add a simple color chart to Blogger with selection, customization and other options.

In one of our previous tutorial, we saw how to add a hex color wheel to Blogger website. Today, we will learn how to add a much better looking color chart to Blogger. Though, the previous color chart was much gorgeous, this color chart has many other options.

Every designer will be aware of hex colors and color charts. Keeping one in our own site helps a lot and keeps things handy while designing. It makes things easy by not going in search for new sites every time you design.

Here is a small demo of what we will be adding to our site:




Steps:

Step 1:Login to Blogger > Select Blog where you want to use the color code chart.

Step 2: Paste the below code:

<center> <object1 border="1" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <embed height="405" name="obj1" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" type="application/x-shockwave-flash" width="405"></embed> </object1></center>

Where to Paste the code:
1. HTML section of Blogger template(Within <body> and </body> tags.
2. HTML section of post page.
3. HTML section of Static pages.
4. In an HTML/JavaScript Gadget.

Simple to use right??

How To USE the Color Wheel?
1. Use your mouse cursor to drag the arrow to any point on the color chart to get a new hex color value for your design.

2. You can also control the values of Saturation, Hue, Brightness by entering values individually into the color chart. Once entered, click outside, the new values would take effect.


3. You can also produce new colors by changing or inputting values to Red, Green, and Blue field.

Customization:
1. To increase the width and height of the gadget:
Change the values of height="405" and width="405" to any other values.

2. To remove the centering of the gadget
Remove <center> and </center> tags from the above code.

Thanks for reading my article. Stay tuned for more such articles. Take care.

~iTechColumn
credit:2createawebsite 

Post a Comment

 
Top