Memilih warna yang tepat tentu memerlukan keahlian khusus, terutama untuk seorang desain grafis atau web desain. Apalagi jika warna yang akan digunakan untuk sebuah identitas atau ciri khas dari desain itu sendiri.
Di internet ada banyak website penyedia warna atau tools color picker, kita bisa dengan bebas gratis menggunakan alat tersebut sebagai referensi menentukan sebuah warna untuk berbagai jenis desain.
Nah pada artikel kali ini saya akan berbagi tutorial cara membuat alat color picker di blog kita sendiri agar tidak terlalu mengandalkan blog orang lain.
Apa itu Color Picker?
Color Picker adalah meruapakan tools online yang digunakan untuk memilih warna. Bagi seorang desain grafis dan juga blogger alat ini sangat bermanfaat karena bisa memberikan informasi warna kode HEX dan RGB secara detail.
Karena itu banyak para blogger membuat alat color picker kedalam halaman blog mereka untuk memudahkan pemilihan warna jika sewaktu-waktu ingin memodifikasi template blognya.
Membuat Tools Color Picker Responsiv di Blog
Lalu bagaimana jika kamu juga ingin membuat alat color picker di halaman blog sendiri? Disini saya akan membagikan caranya, terdapat 4 jenis gaya yang bisa kamu pilih sesuai selera untuk di pasang pada halaman statistik.
Halaman Blogger
- Buka
blogger.com> Halaman - Buat Halaman baru dan beri judul halaman tersebut
- Pilih bagian
HTMLbukanCompose - Copy dan paste kode dibawah ini
- Publikasikan, dan lihat hasilnya
Halaman Wordpress
- Buka
Dasbhor Wordpress> Halaman - Buat Halaman baru dan beri judul
- Pilih bagian
HTMLbukanCompose - Copy dan paste kode dibawah ini
- Publikasikan, dan lihat hasilnya
Style Tools Coloro Picker
Kamu bisa memilih menggunakan jenis gaya color picker yang tersedia di bawah ini :
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
<input id="inputColor" type="color" value="#ff1a1a" />
<button onclick="getColor()">Get Color</button>
<br />
<div id="colorHex">
</div>
<div id="colorRGB">
<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>
</div>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>Penutup
Nah itu tadi Cara Membuat Tools Color Picker Responsif di Blog baik untuk Blogger atau Wordpress. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan, jika ada kendala kamu bisa bertanya melalui kolom komentar.