Hello Everyone! Welcome back to FreemiumTech Website. How are you all? I Hope you all are well. Today our Article is about Colour Picker Tool Script For Blogger. You can add it on your blogger website. So let's start today's article.
How to Make a Responsive Color Picker Tool - Choosing the right colors certainly requires special skills, especially for a graphic designer or web designer. Especially if the color will be used for an identity or characteristic of the design itself.
On the internet there are many color provider websites or color picker tools, we can freely use these tools as a reference for determination a color for various types of designs.
So in this article I will share a tutorial on how to make a color picker tool on our own blog so we don't delay too much on other people's blogs.
What is Color Picker?
Color Picker is an online tool used to choose colors. For graphic designers and bloggers, this tool is very useful because it can provide detailed HEX and RGB color code information.
Because of this, many bloggers create color picker tools on their blog pages to make it easier to choose colors if they want to modify their blog template at any time.
Creating Responsive Color Picker Tools on Blogs
So what if you also want to create a color picker tool on your own blog page? Here I will share the method, there are 3 types of styles that you can choose according to your taste to install on the statistics page.
Creating Color Picker Tools on Blogger Pages
- Go to blogger.com> Pages
- Create a new Page and give the page a Title
- Select the HTML View.
- Copy and paste the code below.
- Publish , and see the results
Style Tools Coloro Picker
You can choose to use the type of color picker style available below:
Style 1
<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>.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>
Style 2
<br/>
<center><input id="inputColor" type="color" value="#ff1a1a" /></center> <br/>
<center><button class='button' onclick="getColor()">Get Color</button></center> <br />
<center><div id="colorHex"> </div>
<div id="colorRGB"> </center>
<script>
function getColor() { document.getElementById("colorHex").innerHTML = 'HEX : ' + document.getElementById("inputColor").value; document.getElementById("colorRGB").innerHTML = 'RGB : '+ hexToRgb(document.getElementById("inputColor").value);
}
function hexToRgb(hex) {
var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
var r = parseInt(result[1], 16);
var g = parseInt(result[2], 16);
var b = parseInt(result[3], 16);
return 'RGB('+r+','+g+','+b+')';
}
</script>
Style 3
<iframe frameborder="0" src="https://raw.githack.com/onbloging/kompi-html/master/color-palettes2.html" style="height: 575px; width: 100%;" title="Color Palette"></iframe>
CONCLUSION
In this post I have made a tutorial about How to make a Colour Picker Tool on Blogger. I hope you have liked it and please share with your friends and follow our blog for more.If you face any problems in this code or have any questions so feel free to ask me in comments section or join our Telegram Group for discussion.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.