-->
Skip to content Skip to sidebar Skip to footer
Cara Membuat Color Picker Tool di Halaman Statis Blog

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.
Cara Membuat Color Picker Tool di Halaman Statis Blog
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

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>


Pasang Color Picker Style Kedua

color picker tool

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

Cara Membuat Color Picker Tool di Halaman Statis Blogger

1. Masuk ke Akun Blogger ➤ Pages ➤ New Pages

2. Tuliskan pada judul pagenya terlebih dahulu. Sebagai contoh disini saya menulis "Color Picker". Ini sesuai selera saja atau terserah dengan tulisan judul halaman yang Anda inginkan kemudian klik "publish".

3. Masuk kembali ke Page yang sudah Anda buat kemudian pilih menu HTML (sebelah compose).

4. Copy dan pastekan semua kode salah satu color picker tool diatas kedalam halaman HTML tersebut.

5. Terakhir klik "Upadate".

Sekarang silakan Anda check hasilnya dengan membuka halaman yang sudah Anda buat tersebut.

Demikinan tutorial kali ini tentang cara membuat halaman statis color picker tool pada blog. Semoga bermanfaat. Terima kasih.
Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed

Berlangganan via Email