Sebelumnya sudah banyak tips seputar membuat 'peralatan' blog yang Gubuk Pintar bagikan, sekarang saatnya untuk cara membuat Color Picker di blog.
Ini dapat kamu manfaatkan untuk mencari kode warna secara spesifik untuk mengubah tampilan dari blog mu.
Cara membuatnya juga cukup sederhana karena kita hanya membutuhkan halaman statis blog saja tanpa harus mengubah HTML tema blog sehingga bisa dipastikan 100% aman!
Yuk, temukan panduan cara membuatnya pada bagian selanjutnya dari artikel ini!
| Daftar Isi |
Apa Itu Color Picker?
Color Picker adalah sebuah widget atau alat yang digunakan untuk memilih warna. Khusus untuk desainer grafis serta juga Blogger, widget ini dapat memberikan informasi kode warna HEX dan RGB yang berguna untuk mengetahui informasi warna secara spesifik.
Cara Membuat Color Picker di Blog
Panduan ini akan didemonstrasikan melalui platform Blogger tetapi juga dapat digunakan pada platform lainnya. Kode yang digunakan juga mobile friendly, dimana berfungsi sama baik seperti di desktop.
Ikuti panduan berikut ini untuk membuatnya,
- Buka dasbor Blogger dan pilih tab Halaman
- Buat halaman baru
- Pilih mode penulisan HTML dan letakkan kode berikut ini,
<h3 style="text-align: center;">Pilih Warna</h3>
<div style="text-align: center;"><input id="inputColor" type="color" value="#ff1a1a" /><br /></div>
<div style="text-align: center;"><a class="tombol" onclick="getColor()" title="Dapatkan Kode Warna">Dapatkan Kode Warna</a></div>
<p id="colorHex" style="text-align: center;"></p>
<p id="colorRGB" style="text-align: center;"></p>
<style type="text/css">
input{
width:20%;
cursor: pointer;
}
a.tombol{margin:3px;height:30px auto;padding:5px 10px;color:#ff1744;background-color:#f4f4f4;border:3px solid #f4f4f4;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;line-height:1.6;font-size:16px;transition:all 0.3s ease;font-family:'Roboto',sans-serif;position:relative}
a.tombol:hover{box-shadow:3px 3px 10px #999999;transition:all 0.3s ease}
@media only screen and(max-width:720px){tombol:width:95%}
</style>
<script type="text/javascript">
function getColor(id, text, btn) {
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-f\d]{2})([a-f\d]{2})([a-f\d]{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> - Publikasikan halaman
Kamu dapat melihat contoh dari penggunaan kode diatas pada halaman Color Picker Gubuk Pintar berikut ini,
Variasi Color Picker Alternatif
Apabila kamu ingin menggunakan tampilan Color Picker yang berbeda dari yang diatas, masih ada beberapa variasi gaya Color Picker yang dapat kamu gunakan. Berikut ini diantaranya,
- Grid
Untuk membuatnya, kamu dapat menggunakan kode berikut ini.
Grid Color Picker <div id="colorpicker">
<ul class="MC">
<li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span>
</li>
<li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span>
</li>
<li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span>
</li>
<li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span>
</li>
<li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span>
</li>
<li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span>
</li>
<li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span>
</li>
<li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span>
</li>
<li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span>
</li>
<li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span>
</li>
<li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span>
</li>
<li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span>
</li>
<li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span>
</li>
<li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span>
</li>
<li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span>
</li>
<li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span>
</li>
<li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span>
</li>
<li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span>
</li>
<li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span>
</li>
<li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span>
</li>
<li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span>
</li>
<li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span>
</li>
<li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span>
</li>
<li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span>
</li>
<li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span>
</li>
<li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span>
</li>
<li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span>
</li>
<li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span>
</li>
<li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span>
</li>
<li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span>
</li>
<li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span>
</li>
<li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span>
</li>
<li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span>
</li>
<li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span>
</li>
<li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span>
</li>
<li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span>
</li>
<li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span>
</li>
<li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span>
</li>
<li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span>
</li>
<li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span>
</li>
<li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span>
</li>
<li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span>
</li>
<li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span>
</li>
<li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span>
</li>
<li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span>
</li>
<li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span>
</li>
<li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span>
</li>
<li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span>
</li>
<li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span>
</li>
<li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span>
</li>
<li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span>
</li>
<li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span>
</li>
<li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span>
</li>
<li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span>
</li>
<li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span>
</li>
<li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span>
</li>
<li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span>
</li>
<li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span>
</li>
<li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span>
</li>
<li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span>
</li>
<li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span>
</li>
<li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span>
</li>
<li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span>
</li>
<li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span>
</li>
<li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span>
</li>
<li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span>
</li>
<li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span>
</li>
<li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span>
</li>
<li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span>
</li>
<li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span>
</li>
<li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span>
</li>
<li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span>
</li>
<li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span>
</li>
<li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span>
</li>
<li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span>
</li>
<li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span>
</li>
<li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span>
</li>
<li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span>
</li>
<li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span>
</li>
<li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span>
</li>
</ul>
</div>
<style scoped="" type="text/css">
/* COLOR PICKER */
#colorpicker ul.MC{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#colorpicker ul.MC li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#colorpicker ul.MC li:hover{z-index:4}
#colorpicker ul.MC li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#colorpicker ul.MC li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#colorpicker ul.MC li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#colorpicker ul.MC li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#colorpicker ul.MC li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#colorpicker ul.MC li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#colorpicker ul.MC li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#colorpicker ul.MC li{width:50%}}
@media screen and (max-width:480px){#colorpicker ul.MC li{width:100%}}
</style>
Namun, Color Picker dengan gaya ini memiliki warna yang terbatas. Warna-warna yang ada harus ditambah secara manual agar lebih banyak variasinya. - Circle Palette
Untuk membuatnya, silahkan kode berikut ini ya
Circle Palette Color Picker <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> - Bar Palette
Kamu bisa menggunakan kode berikut ini untuk membuatnya,
Bar Palette Color Picker <div class="one-stroke-color-picker">
<div class="columns">
<div class="column hue" data-col="hue"><div class="mark"></div></div>
<div class="column saturation" data-col="saturation"><div class="mark"></div></div>
<div class="column lightness" data-col="lightness"><div class="mark"></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%
)}.mark{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('.mark').style.top = this.hueEl.offsetHeight - this.hue / 360 * this.hueEl.offsetHeight + 'px';this.saturationEl.querySelector('.mark').style.top = this.saturationEl.offsetHeight - this.saturation / 100 * this.saturationEl.offsetHeight + 'px';this.lightnessEl.querySelector('.mark').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('.mark').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>
Penutup
Itulah cara membuat Color Picker di blog serta beberapa variasi gaya yang dapat kamu gunakan. Semoga kamu berhasil membuatnya ya dan bisa bermanfaat pula.
***
Apabila
memiliki pertanyaan seputar artikel Cara Membuat Color Picker di Blog, silahkan tulis dikolom komentar ya.
Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!
Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!
0 komentar:
Posting Komentar