How To Add A Colour Picker Tool and Color Palette In Blogger
Hello Guys, we are back with another simple color picker tool for bloggers in javascript code to add to your website. Along with this we are also providing you most used color palette collection to add to your website. So follow this article to add a color picker tool to your Blogger website.
Many designers and even website developers are using material design UI and use a specific color to make it look good. So In color theory, a color scheme is the choice of colors used in various artistic and design contexts.
If you are not in designing background then you must be wondering What is the use of it? Well, why should we know about it because we are into the blogging field so we provide such a tool to make their life easier Right!. So be proud to be in a blogging career now lets us know some basic definitions of each term.
 |
| Color Picker tool and color palettes in blogger script |
More Scripts: Gradient Color Code Generator Script
What is a color picker tool?
A color picker is used to select and adjust color values. In graphic design and image editing, users typically choose colors via an interface with a visual representation of a color—organized with quasi-perceptually relevant hue, saturation, and lightness dimensions (HSL) – instead of keying in alphanumeric text values. Because color appearance depends on the comparison of neighboring colors (see color vision), many interfaces attempt to clarify the relationships between colors.
In layman's terms - A color picker is used to pick the specific colors from available colors.
For more detailed information visit Wikipedia.
What is a color palette?
For more information just google it now in simple words it is a collection of combinations of colors display on different device screens or interfaces.
Now let us add the Color picker tool to the blogger website follow the complete guide step by step with me.
How To Add A Colour Picker Tool In Blogger
Useful script for blogger: Automatically Add Related Articles in the Middle of the Post
- On the Blogger Dashboard, go to the Pages page.
- Create or open the existing page to which you want to add this tool.
- Switch to HTML mode. Click on the HTML button.
- Paste the code below into the code window below your content.
- Now before publishing your post or page see a preview.
- If the preview is correct then simply publish it else make some small modifications using CSS.
- That's it you successfully added a color picker tool on the blogger website or even on any website.
Now to add a color palette to the website just copy and paste the below code where you want to add to your website.
More script:HTML Sitemap Generator for Blogger
Add Best Color Palettes Collection in website
Copy below a simple line of code and paste it into your blogger page or post.
Complete code of Color Picker tool and Color Palettes collection. Double Click and copy code for use on your website page. DEMO - Check Blogger Script Demo of this script.
<div ng-app="app">
<color-picker color="foo"></color-picker>
<p style="margin-top: 10px; width: 100%;">color: {{ foo }}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
'use strict';
angular.module('app', ['colorPicker']);
}());
</script>
<style>
.adspacebytechnicalarp {
padding:2em;
box-shadow:0 5px 15px rgba(0,0,0,.16);
border-radius:5px;
margin-top:1em;
background:#fff;
text-align:left;
color:red;
}
.ng-scope {text-align: center;}
* {
box-sizing: border-box;
}
.color-picker {
display: inline-block;
position: relative;
}
.color-picker input { display: none; }
.canvas-wrapper {
border-radius: 1000px;
overflow: hidden;
}
.indicator {
top: calc(50% - 2rem);
left: 50%;
display: block;
position: absolute;
background-color: transparent;
transform: translate3d(-50%,-2rem,0);
pointer-events: none;
}
.indicator .selected-color {
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 30%;
border-radius: 1000px;
z-index: -1;
background-color: #fff;
-webkit-filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
}
</style>
<script>
(function(){
'use strict';
angular.module('app', ['colorPicker']);
angular.module('colorPicker', [])
.directive('colorPicker', [function () {
var updateEventListenerTargets = ['touchstart','touchmove','mouseup','mousemove'],
clientX, clientY,
mousedown = 0;
function ColorPicker() {
// Initialize at center position with white
this.ngModel = '#ffffff';
}
ColorPicker.$inject = [];
return {
restrict: 'E',
controller: ColorPicker,
bindToController: true,
controllerAs: 'colorPicker',
scope: {
ngModel: '=color'
},
replace: true,
template: [
'<div class="color-picker">',
'<canvas width="230px" height="230px"></canvas>',
'<span class="indicator">',
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="64" viewBox="0 0 25 32">',
'<path fill="#ffffff" d="M12.528 0c-6.943 0-12.528 5.585-12.528 12.528 0 10.868 12.528 19.472 12.528 19.472s12.528-9.585 12.528-18.792c0-6.868-5.66-13.208-12.528-13.208zM12.528 21.434c-4.981 0-9.057-4.075-9.057-9.057s4.075-9.057 9.057-9.057 9.057 4.075 9.057 9.057-4.075 9.057-9.057 9.057z"></path>',
'</svg>',
'<span class="selected-color"></span>',
'</span>',
'</div>'
].join(''),
link: function (scope, el, attrs, colorPicker) {
var canvas = el.find('canvas')[0];
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = x;
var counterClockwise = false;
for(var angle=0; angle<=360; angle+=1){
var startAngle = (angle-2)*Math.PI/180;
var endAngle = angle * Math.PI/180;
context.beginPath();
context.moveTo(x, y);
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.closePath();
var gradient = context.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0,'hsl('+angle+', 10%, 100%)');
gradient.addColorStop(1,'hsl('+angle+', 100%, 50%)');
context.fillStyle = gradient;
context.fill();
}
var updateColorPicker = function(e){
e.preventDefault();
if (e.type === 'mousemove' && !mousedown) { return; }
clientX = (e.clientX) ? e.clientX : e.changedTouches[0].clientX;
clientY = (e.clientY) ? e.clientY : e.changedTouches[0].clientY;
var canvasOffset = canvas.getBoundingClientRect();
var canvasX = Math.floor(clientX - canvasOffset.left);
var canvasY = Math.floor(clientY - canvasOffset.top);
// get current pixel
var imageData = context.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
var indicator = el.find('span')[0];
var selectedColor = indicator.getElementsByClassName('selected-color')[0];
if(!pixel[pixel.length - 1]) {
return;
}
var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
colorPicker.ngModel = '#' + ('0000' + dColor.toString(16)).substr(-6);
indicator.style.left = canvasX + 'px';
indicator.style.top = canvasY - 32 + 'px';
selectedColor.style.backgroundColor = colorPicker.ngModel;
scope.$apply(function(){
colorPicker.ngModel = colorPicker.ngModel;
});
};
for (var i=0, len = updateEventListenerTargets.length; i<len; i++) {
canvas.addEventListener(updateEventListenerTargets[i], updateColorPicker, false);
}
canvas.addEventListener('mousedown', function(){
mousedown = 1;
}, false);
document.addEventListener('mouseup', function(){
mousedown = 0;
}, false);
}
};
}]);
}());
</script>
<div class="adspacebytechnicalarp arpContainer">
Place you Ad Code 1
</div>
<br />
<h3 style="text-align: center;"><span style="color: red;">List of Best Color Palettes Collection</span></h3>
<iframe frameborder="0" height="1080" layout="fixed-height" noloading="" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups" src="https://raw.githack.com/IamArpain/free-blogger-scripts/IamArpain-start-1/scripts/color-palettes2.html" title="Color Palette" width="100%"><br />
<amp-img noloading src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIADIhNJcZUNROsXentIPAJkj0opcDBUxzTsG0nMud9Yh6IYng74G1UTtfhsRjs7eBBXH-TBgI2c8I_9nSE4liE3YVn3Bxevks1avosai9cLZBr1HlTzQwdBN-XefCLI6eV_U2eRUNRDk/s1600/placeholder.png"
layout="fixed-height"
height="575"
width="auto"
placeholder><br />
</amp-img><br />
</iframe>
That's it nothing to do more, isn't it great!?.
Amazing Script: Speech to text Converter Script
For a complete demo of the script with a proper installation and usage guide please watch the complete video.
Color Picker Script and Color Palette collection
In Conclusion of How To Add Colour Picker Tool | Color Palette Tool in Blogger
I hope this guide will help you add this tool and a list of color palettes Blogger website. If you like this guide then don’t forget to share this with your friends stay updated for more updates.
Well, that’s it in this post, will see you again with a new and useful script for the blogger platform. I hope you like this script and share it with your friends. Thanks for visiting.
Thanks for Visiting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.
Also Check Interested Amazing another Script:
Viral Slam Book Friendship Website Php Script
1 comments:
Click here for commentsI was very impressed by this post, this site has always been pleasant news Thank you very much for such an interesting post, and I meet them more often then I visited this site.
SANWELLSR2FIWRIU
ConversionConversion EmoticonEmoticon