RGB Color picker HTML tool is a very essential tool for all bloggers, Youtuber, and Graphics Designers also. With this RGB Color Picker tool script, you can choose your color easily and apply it anywhere and this tool allows you to copy RGB Color HEX code. So Blogger friends in this article we are going to show you how to add an RGB color picker tool HTML script on a blogger site without further due let's get started.
What is the RGB Color picker tool?
RGB color picker is an HTML blogger script that allows you to pick any color from the color board and you can copy the color hex code from the RGB color picker HTML script. With the RGB color picker tool, you can check the color and color hex code tool easily. RGB Color picker tool allows you to pick any color hex tool.
RGB Color picker tool blogger HTML script.
If you are looking for an RGB color picker tool blogger HTML script you are on the right site. In this article, we are going to show you how you can create your own RGB color picker tool for your own website.
What is the benefit of the RGB Color picker tool?
- You can choose any color from the tool
- You can easily copy color hex code from the RGB color picker tool.
- This RGB color picker tool is fully responsible.
How to add an online RGB color picker tool on a blogger site?
Step-1: First login to your blogger Dashboard.
Step-2: Then you will have to create a page or a post where you want to create an RGB color picker tool.
Step-3: Now edit the post as "Edit HTML".
Step-4: Then copy the RGB color picker tool script given below.
<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.4JUdGzvrMFDWrUUwY3toJATSeNwjn54LkCnKBPRzDuhzi5vSepHfUckJNxRL2gjkNrSqtCoRUrEDAgRwsQvVCjZbRyFTLRNyDmT1a1boZV075-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>
<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/AVvXsEjTE3Pp7EU3aS1iJD6vwFvbkSHaP0SRyBWY86ocFMtMTLsoJEBFdrO8GEAUBDDGr2NG14EZxMcrODRB19B812jgKbmAA7oJl4sDH3B4zPZ064V4rXDMsPOIRBul8hEaKYaAD9VpkXzRIvY/s1600/placeholder.png"
layout="fixed-height"
height="575"
width="auto"
placeholder><br />
</amp-img><br />
</iframe>
<br /><a href="https://techedubyte.com" target="_blank">***</a>
<br /><div><br /></div><div><br /></div><div><br /></div><div><span><!--more--></span><h2 style="text-align: left;">HTML Color Pallet & Color Code Picker</h2></div><div><div>Write a good description here.</div></div><div><br /></div>Step-5: Now past the copied RGB color picker script.
Step-6: Finally don't forget to save the post or page.
After saving the post view the post you will have to tool. You don't need any further customization on this script just copy the RGB color picker tool script and past it. If you liked this post do share it with your blogger friend and if you have any questions about this rbg color picker HTML script write a comment here we will answer it as soon as possible.
Final word.
In this blog we are sharing so many articles in the Blogger help section you can read all the articles and scripts keep following our blog thank you.
Related Tag:
HTML color picker code javascript
color picker HTML script
color hex code
rgb online color code
online rgb
0 Comments