Skip to main content
FANCYBLOGGERTRICKS

follow us

How to Store Material Design Color Palette on Blogger Blog


How to Store Material Design Color Palette on Blogger Blog -  As a blogger, I believe you have a little coding knowledge on about CSS and the use of color palette. Better still, using a color palette will allow you to easily find your desired color tag to be used in beautifying your blog main elements and some other parts of the blog. Also, we can choose the dominant colors and derivative colors for an element on our blog so the colors don't get messy.


What is a Material Design Color Palette

Material Design Color Palette is a group containing all the possible types of colors and also provide them with tags that can be easily used in CSS color design. In determining the color and background of a particular element a color tag is used. Now we don't need to write colors in words like Red, Blue, Black etc, as we can easily represent them in CSS like #ffffff (instead of white) and #000000 (instead of black). All these colors can be found in the Material Design color palette tool. 

Today I am going to write a tutorial on how to store material design color palette tool on blogger, so you can easily locate your colors when you need them without searching elsewhere. This color palette tool is made from Material Design, but I have made it very easy to install on a blogger blog.


How to Install Material Design Color Palette on Blogger Blog

To install this color palette generator, we need to create an empty Static Page or Post Page and embed the color palette tool using an iframe in the HTML mode. Kindly follow the below step by step tutorial to successfully embed material design color palette on a blogger blog.
1. Login to your Blogger Dashboard
2. Goto Pages, then Create a New Page
3. Now in your Editor, click HTML to switch from Compose mode to HTML mode.
4. Clear all the pre-existing HTML codes, then copy and paste the below HTML in the empty space


<iframe title="Color Palette" src="https://cdn.rawgit.com/Princebrainlord/master-pismaa.js/57edb02e/Color-palettes1.html" frameborder="0" style="height:575px;width:100%"></iframe>

5. Finally hit Publish and view your page to see the color palette selector running live.

Conclusion

To use the color palette, click on your desired color and the tag code will be automatically copied to the clipboard. Just place it in your CSS to style any element you want. Do you find this helpful? Let us know through the comment section.

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment