I recently came across a site by name 2createawebsite, where you can find a color code wheel which was just awesome. Color codes are very important to design a web site, web page, graphics, animations, even Photoshop and much more. There are many websites out there which quickly gives us some beautiful hex colors to get picked by yourself and design your site. But, placing a color wheel or chart on your website/blog can be helpful to you as well as to others who are using your site consistently.
Here is a small demo of what we are planning to achieve by this tutorial.
There is no much coding and techinicalities involved in this tutorial. The tutorial is straight forward and easy to implement. As you can see that the color wheel chart is available on this page, you can paste it anywhere on the website or blog. The above gadget is a shock wave gadget with interactive sense.
Step 1:Login to Blogger > Select Blog where you want to use the color code chart.
Step 2: Paste the below code:
<center><object2 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="485" name="obj2" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/col.swf" type="application/x-shockwave-flash" width="485"></embed></object2></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.
As easy as that 🙂
How To USE the Color Wheel?
1. If you already have a Color HEX value with you:
Input the Hex value(Without “#”) to the form below and hit “update“. You will see the variations of all the related colors. You can use any one of them on your webpage or Blogger for designing.
2. If you don’t have an HEX value:
Then click on the wheel/color of your choice and get some variations of that color.
1. To increase the width and height of the gadget:
Change the values of height=”485“ and width=”485“ 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.