Cara Membuat Color Picker di Blog - Gubuk Pintar
Cara Membuat Color Picker di Blog
Cara Membuat Color Picker di Blog

Cara Membuat Color Picker di Blog

Temukan cara membuat color picker di blog dalam artikel ini!

Cara Membuat Color Picker di Blog
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!




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,
  1. Buka dasbor Blogger dan pilih tab Halaman

  2. Buat halaman baru

  3. 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>

  4. 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
    Grid Color Picker
    Grid Color Picker
    Untuk membuatnya, kamu dapat menggunakan kode berikut ini.

    <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
    Circle Palette Color Picker
    Circle Palette Color Picker
    Untuk membuatnya, silahkan kode berikut ini ya

    <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
    Bar Palette Color Picker
    Bar Palette Color Picker
    Kamu bisa menggunakan kode berikut ini untuk membuatnya,

    <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!

Baca juga:

Gubuk Pintar
"If you waiting for idea for write than you're not a writter. You just a waiter"
Buka Komentar

0 komentar:

Posting Komentar