Cara Membuat Color Picker Tool di Halaman Statis Blog

Kadang - kadang ketika kita mulai jenuh dengan tampilan blog, entah itu design widget ukuran ataupun warna maka cara untuk menghilangkan kebosanan tersebut adalah dengan melakukan sedikit perubahan. Perubahan yang akan mulai terlihat biasanya pada warna. Kemudian untuk mencari jenis warna yang kita inginkan, tentu kita akan mencari tool color picker yang banyak disediakan secara online di banyak situs.

Merubah warna pada template atau bagian lain pada blog tidak memerlukan keahlian khusus. Anda cukup mengcopy kode warna yang diinginkan kemudian dipasangkan pada kode CSS dan otomatis akan merubah warna tampilan HTML yang terpilih. Memilih warna yang tepat juga tidak membutuhkan skill spesial, Anda cukup mengcopy color code melalui tool color picker yang banyak tersedia di beberapa situs web.

Bagaimana jika kemudian Anda ingin membuat sendiri color picker tool tersebut dan memasangnya pada halaman statis blog. Hal ini sudah banyak dilakukan oleh banyak blogger, termasuk situs dewa plokis blog ini sendiri. Alasan untuk memasang color picker ini adalah agar kita tidak lagi harus sering mondar-mandir ke suatu situs web penyedia tool tersebut.

Disini, saya akan membagikan 2 jenis style yang berbeda pada color picker tool ini. Jika Anda berminat memasangnya pada blog Anda, silakan pilih style yang menurut Anda cocok untuk dipasangkan sebagai tool color picker pada halaman statis.

Pasang Color Picker Style Pertama

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

Pasang Color Picker Style Kedua

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