Sometimes when we start to get bored with the appearance of the blog, whether it's a widget design or color size, the way to get rid of boredom is to make a few changes.
Changes that will begin to be seen usually in the colors. Then to find the type of color that we want, of course we will look for the many color picker tools available online on many sites.
What if then you want to make your own color picker tool and install it on a static blog page. This has been done by many bloggers, including the good plokis blog site itself. The reason for installing this color picker is so that we no longer have to frequently prowl to a website that provides the tool.
Here, I will share 2 different types of styles in this color picker tool. If you are interested in installing it on your blog, please choose a style that you think is suitable to be installed as a color picker tool on a static page.
↳ Color Picker Tool -1 ↲
<div class="one-stroke-color-picker">
<div class="columns">
<div class="column hue" data-col="hue"><div class="nqnia"></div></div>
<div class="column saturation" data-col="saturation"><div class="nqnia"></div></div>
<div class="column lightness" data-col="lightness"><div class="nqnia"></div></div>
</div>
<div class="color-info">
<div class="final-color"></div>
<table class="color-values">
<tr><td>HSL:<td><input type="text" class="color-value value-hsl" data-format="hsl">
<tr><td>RGB:<td><input type="text" class="color-value value-rgb" data-format="rgb">
<tr><td>Hex:<td><input type="text" class="color-value value-hex" data-format="hex">
</table>
</div>
</div>
<style scoped="" type="text/css">
*,*::before,*::after{box-sizing:border-box}#post-wrapper{width:100%}.post-body table tr:nth-of-type(odd) td{background-color:#c35171}.post-body table tr:nth-of-type(even) td{background-color:#4e4e4e}html{}body{margin:10px;background:hsl(0,0%,20%);color:white;font-family:Open sans,Segoe UI,Helvetica Neue,Helvetica,sans serif}.one-stroke-color-picker{text-align:center}.columns{height:500px;max-height:85vh;display:inline-flex;vertical-align:middle}.column{position:relative;width:100px;height:100%;display:inline-block;overflow:hidden}@media screen and (max-width:760px){.columns{margin:0 40px;height:50vh}.column{flex:1 1 auto}}.hue{background:linear-gradient(to top,hsl(0,100%,50%) 0%,hsl(30,100%,50%) 8.333%,hsl(60,100%,50%) 16.666%,hsl(90,100%,50%) 25%,hsl(120,100%,50%) 33.333%,hsl(150,100%,50%) 41.666%,hsl(180,100%,50%) 50%,hsl(210,100%,50%) 58.333%,hsl(240,100%,50%) 66.666%,hsl(270,100%,50%) 75%,hsl(300,100%,50%) 83.333%,hsl(330,100%,50%) 91.666%,hsl(360,100%,50%) 100%
)}.nqnia{position:absolute;left:0;bottom:0;width:100%;height:8px;border:solid 2px white;transform:translateY(-50%)}.color-info{display:inline-block;margin-left:30px;vertical-align:middle}.final-color{width:15rem;height:15rem;margin:20px auto}@media screen and (max-width:760px){.color-info{margin-left:0;margin-top:30px}.final-color{margin:auto}}.color-values{margin:auto}.color-values td:first-child{width:3rem;text-align:left}.color-values td:last-child{width:11rem}input[type=text]{border:none;width:100%;padding:.3em;font-size:1em;background:transparent;border-bottom:solid 1px hsl(0,0%,80%);outline:none;color:white;font-style:italic}input[type=text]:focus{border-color:hsl(210,100%,50%)}
</style>
<script>
class OneStrokeColorPicker{constructor(el){this.hue = 0;this.saturation = 0;this.lightness = 0;this.hueEl = el.querySelector('.hue');this.saturationEl = el.querySelector('.saturation');this.lightnessEl = el.querySelector('.lightness');this.finalColorEl = el.querySelector('.final-color');this.valueHslEl = el.querySelector('.value-hsl');this.valueRgbEl = el.querySelector('.value-rgb');this.valueHexEl = el.querySelector('.value-hex');this.setHsl(0,0,0)}setHue(hue){this.hue = +hue;this.saturationEl.style.backgroundImage = `linear-gradient(to top,hsl(${hue},0%,50%),hsl(${hue},100%,50%))`;this.updateFinalColor()}setSaturation(sat){this.saturation = +sat;this.lightnessEl.style.backgroundImage = `linear-gradient(to top,hsl(${this.hue},${sat}%,0%),hsl(${this.hue},${sat}%,50%),hsl(${this.hue},${sat}%,100%))`;this.updateFinalColor()}setLightness(l){this.lightness = +l;this.updateFinalColor()}setHsl(h,s,l){this.setHue(h);this.setSaturation(s);this.setLightness(l);this.hueEl.querySelector('.nqnia').style.top = this.hueEl.offsetHeight - this.hue / 360 * this.hueEl.offsetHeight + 'px';this.saturationEl.querySelector('.nqnia').style.top = this.saturationEl.offsetHeight - this.saturation / 100 * this.saturationEl.offsetHeight + 'px';this.lightnessEl.querySelector('.nqnia').style.top = this.lightnessEl.offsetHeight - this.lightness / 100 * this.lightnessEl.offsetHeight + 'px'}updateFinalColor(){var hsl = `hsl(${Math.round(this.hue)},${Math.round(this.saturation)}%,${Math.round(this.lightness)}%)`,rgb,hex;this.finalColorEl.style.background = hsl;rgb = getComputedStyle(this.finalColorEl,null).backgroundColor;hex = rgb.match(/\d+/g).reduce((hex,c) =>{c = (+c).toString(16);if(c < 16) c = '0' + c;return hex + c},'#');this.valueHslEl.value = hsl;this.valueRgbEl.value = rgb;this.valueHexEl.value = hex}}var colorPicker = new OneStrokeColorPicker(document.querySelector('.one-stroke-color-picker'));$('.one-stroke-color-picker .column').on('mousemove',function(e){var bb = this.getBoundingClientRect(),offset = (bb.height - e.clientY + bb.top) / bb.height;this.querySelector('.nqnia').style.top = e.clientY - bb.top + 'px';switch(this.dataset.col){case 'hue':colorPicker.setHue(offset * 360);break;case 'saturation':colorPicker.setSaturation(offset * 100);break;case 'lightness':colorPicker.setLightness(offset * 100);break}});$(".color-value").click(function(){this.select()}).change(function(){var hsl;switch(this.dataset.format){case 'hsl':hsl = this.value.match(/\d+/g);break;case 'rgb':hsl = this.value.match(/\d+/g);if(!hsl || hsl.length !== 3) return;hsl = rgbToHsl.apply(null,hsl);break;case 'hex':hsl = hexToHsl(this.value);break}if(!hsl || hsl.length !== 3) return;colorPicker.setHsl(hsl[0],hsl[1],hsl[2])});function hexToHsl(hex){var rgb = hex.match(/\w\w/g),error;if(!rgb || rgb.length !== 3) return false;rgb = rgb.map(function(c){c = parseInt(c,16);if(isNaN(c)) error = true;return c});if(error) return false;return rgbToHsl.apply(null,rgb)}// Source:https://github.com/JuhQ/rgb-to-hsl/blob/master/index.js
function rgbToHsl(r,g,b){var d,h,l,max,min,s;r /= 255;g /= 255;b /= 255;max = Math.max(r,g,b);min = Math.min(r,g,b);h = 0;s = 0;l = (max + min) / 2;if (max === min){h = s = 0}else{d = max - min;s = l > 0.5 ? d / (2 - max - min):d / (max + min);switch (max){case r:h = (g - b) / d + (g < b ? 6:0);break;case g:h = (b - r) / d + 2;break;case b:h = (r - g) / d + 4}h /= 6}h = h * 360;s = (s * 100);l = (l * 100);return [h,s,l]}
</script>
↪ Color Picker Tool -2 ↩
<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;
}
body {
text-align: center;
padding-top: 75px;
}
.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>
How to Make a Color Picker Tool on Blogger Static Pages
1. Login to Blogger Account ➤ Pages ➤ New Pages
2. Write the title of the page first For example here I write "Color Picker". This is according to taste or whatever the title of the page you want then click "publish".
3. Go back to the Page that you have created then select the HTML menu (next to Compose).
4. Copy and paste all the code in one of the color picker tools above into the HTML page.
5. Finally click "Upadate".
Now please check the results by opening the page that you created.
This tutorial is about how to create a static color picker tool page on a blog. May be useful. thanks.