Web Tool Color Flat Picker

Pengen Buat Color Picker Keren seperti ini?

Cara Membuat Color Picker versi 1

Silahkan Copy Paste Code dibawah ini, langsung ke halaman sobat. 

 

Loh bang punyakmu kok tidak bisa di copy code colornya? karena terpengaruh oleh script anti copas yang ada di blog ini.. :D , kemungkinan besar kalo kode ini ditempatkan di blog kamu yang tidak ada script anti copas nya.. maka akan bisa langsung di copas code warnanya, seperti kalo kamu buka COLORHEX di google. 

Boleh buat tutorialnya bang.. silahkan silahkan.. jangan lupa sumbernya halaman ini ya.. thanks..

<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>
  
  /* Color Picker - rahmancyber.net */
  
 
  .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>

color: {{ foo }}

---

Cara Membuat Color Picker versi 2

Kalo yang ini dari arlina dzgn dulu udah lama banget, masih mejeng di halaman ini.. btw sekarang domain arlinadzgn pindah topik ternyata.. hehe
Ini dia gan, langsung aja untuk kodenya... yang ada alamat domainnya arlinadzgn gak usah dihapus ya gan..

<div id="flatuarlina">    <ul class="flatui">      <li style="background: rgb(92, 151, 191) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span><br />
      </li>
      <li style="background: rgb(75, 119, 190) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span><br />
      </li>
      <li style="background: rgb(31, 58, 147) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span><br />
      </li>
      <li style="background: rgb(37, 116, 169) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span><br />
      </li>
      <li style="background: rgb(103, 128, 159) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span><br />
      </li>
      <li style="background: rgb(52, 73, 94) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span><br />
      </li>
      <li style="background: rgb(58, 83, 155) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span><br />
      </li>
      <li style="background: rgb(30, 139, 195) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span><br />
      </li>
      <li style="background: rgb(107, 185, 240) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span><br />
      </li>
      <li style="background: rgb(34, 49, 63) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span><br />
      </li>
      <li style="background: rgb(51, 110, 123) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span><br />
      </li>
      <li style="background: rgb(25, 181, 254) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span><br />
      </li>
      <li style="background: rgb(137, 196, 244) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span><br />
      </li>
      <li style="background: rgb(44, 62, 80) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span><br />
      </li>
      <li style="background: rgb(52, 152, 219) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span><br />
      </li>
      <li style="background: rgb(34, 167, 240) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span><br />
      </li>
      <li style="background: rgb(148, 224, 238) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span><br />
      </li>
      <li style="background: rgb(82, 179, 217) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span><br />
      </li>
      <li style="background: rgb(89, 171, 227) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span><br />
      </li>
      <li style="background: rgb(38, 166, 91) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span><br />
      </li>
      <li style="background: rgb(30, 130, 76) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span><br />
      </li>
      <li style="background: rgb(0, 177, 106) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span><br />
      </li>
      <li style="background: rgb(42, 187, 155) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span><br />
      </li>
      <li style="background: rgb(77, 175, 124) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span><br />
      </li>
      <li style="background: rgb(3, 166, 120) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span><br />
      </li>
      <li style="background: rgb(38, 194, 129) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span><br />
      </li>
      <li style="background: rgb(1, 152, 117) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span><br />
      </li>
      <li style="background: rgb(63, 195, 128) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span><br />
      </li>
      <li style="background: rgb(22, 160, 133) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span><br />
      </li>
      <li style="background: rgb(46, 204, 113) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span><br />
      </li>
      <li style="background: rgb(197, 239, 247) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span><br />
      </li>
      <li style="background: rgb(200, 247, 197) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span><br />
      </li>
      <li style="background: rgb(4, 147, 114) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span><br />
      </li>
      <li style="background: rgb(54, 215, 183) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span><br />
      </li>
      <li style="background: rgb(102, 204, 153) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span><br />
      </li>
      <li style="background: rgb(27, 163, 156) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span><br />
      </li>
      <li style="background: rgb(27, 188, 155) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span><br />
      </li>
      <li style="background: rgb(101, 198, 187) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span><br />
      </li>
      <li style="background: rgb(191, 191, 191) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span><br />
      </li>
      <li style="background: rgb(171, 183, 183) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span><br />
      </li>
      <li style="background: rgb(218, 223, 225) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span><br />
      </li>
      <li style="background: rgb(149, 165, 166) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span><br />
      </li>
      <li style="background: rgb(197, 220, 226) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span><br />
      </li>
      <li style="background: rgb(189, 195, 199) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span><br />
      </li>
      <li style="background: rgb(238, 238, 238) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span><br />
      </li>
      <li style="background: rgb(210, 215, 211) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span><br />
      </li>
      <li style="background: rgb(240, 226, 197) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span><br />
      </li>
      <li style="background: rgb(235, 149, 50) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span><br />
      </li>
      <li style="background: rgb(230, 126, 34) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span><br />
      </li>
      <li style="background: rgb(242, 121, 53) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span><br />
      </li>
      <li style="background: rgb(249, 191, 59) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span><br />
      </li>
      <li style="background: rgb(247, 202, 24) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span><br />
      </li>
      <li style="background: rgb(249, 105, 14) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span><br />
      </li>
      <li style="background: rgb(243, 156, 18) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span><br />
      </li>
      <li style="background: rgb(211, 84, 0) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span><br />
      </li>
      <li style="background: rgb(244, 208, 63) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span><br />
      </li>
      <li style="background: rgb(245, 171, 53) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span><br />
      </li>
      <li style="background: rgb(235, 151, 78) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span><br />
      </li>
      <li style="background: rgb(242, 120, 75) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span><br />
      </li>
      <li style="background: rgb(244, 179, 80) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span><br />
      </li>
      <li style="background: rgb(232, 126, 4) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span><br />
      </li>
      <li style="background: rgb(231, 76, 60) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span><br />
      </li>
      <li style="background: rgb(207, 0, 15) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span><br />
      </li>
      <li style="background: rgb(192, 57, 43) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span><br />
      </li>
      <li style="background: rgb(214, 69, 65) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span><br />
      </li>
      <li style="background: rgb(239, 72, 54) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span><br />
      </li>
      <li style="background: rgb(150, 40, 27) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span><br />
      </li>
      <li style="background: rgb(217, 30, 24) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span><br />
      </li>
      <li style="background: rgb(226, 106, 106) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span><br />
      </li>
      <li style="background: rgb(255, 0, 0) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span><br />
      </li>
      <li style="background: rgb(242, 38, 19) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span><br />
      </li>
      <li style="background: rgb(224, 130, 131) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span><br />
      </li>
      <li style="background: rgb(155, 89, 182) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span><br />
      </li>
      <li style="background: rgb(142, 68, 173) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span><br />
      </li>
      <li style="background: rgb(190, 144, 212) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span><br />
      </li>
      <li style="background: rgb(191, 85, 236) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span><br />
      </li>
      <li style="background: rgb(154, 18, 179) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span><br />
      </li>
      <li style="background: rgb(145, 61, 136) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span><br />
      </li>
      <li style="background: rgb(114, 45, 106) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span><br />
      </li>
      <li style="background: rgb(116, 10, 78) none repeat scroll 0% 0%;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span><br />
      </li>
    </ul></div><style scoped="" type="text/css">
/* Flat UI Color by www.arlinadzgn.com */
#flatuarlina ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatuarlina ul.flatui 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)}
#flatuarlina ul.flatui li:hover{z-index:4}
#flatuarlina ul.flatui 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)}
#flatuarlina ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatuarlina ul.flatui 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}
#flatuarlina ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatuarlina ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatuarlina ul.flatui 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){#flatuarlina ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatuarlina ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatuarlina ul.flatui li{width:100%}}
</style>

Langsung aja taruh di halaman baru... jangan lupa modenya tampilan html...

---

• Kode Warna #5C97BF
  
• Kode Warna #4B77BE
  
• Kode Warna #1F3A93
  
• Kode Warna #2574A9
  
• Kode Warna #67809F
  
• Kode Warna #34495E
  
• Kode Warna #3A539B
  
• Kode Warna #1E8BC3
  
• Kode Warna #6BB9F0
  
• Kode Warna #22313F
  
• Kode Warna #336E7B
  
• Kode Warna #19B5FE
  
• Kode Warna #89C4F4
  
• Kode Warna #2C3E50
  
• Kode Warna #3498DB
  
• Kode Warna #22A7F0
  
• Kode Warna #94E0EE
  
• Kode Warna #52B3D9
  
• Kode Warna #59ABE3
  
• Kode Warna #26A65B
  
• Kode Warna #1E824C
  
• Kode Warna #00B16A
  
• Kode Warna #2ABB9B
  
• Kode Warna #4DAF7C
  
• Kode Warna #03A678
  
• Kode Warna #26C281
  
• Kode Warna #019875
  
• Kode Warna #3FC380
  
• Kode Warna #16A085
  
• Kode Warna #2ECC71
  
• Kode Warna #C5EFF7
  
• Kode Warna #C8F7C5
  
• Kode Warna #049372
  
• Kode Warna #36D7B7
  
• Kode Warna #66CC99
  
• Kode Warna #1BA39C
  
• Kode Warna #1BBC9B
  
• Kode Warna #65C6BB
  
• Kode Warna #BFBFBF
  
• Kode Warna #ABB7B7
  
• Kode Warna #DADFE1
  
• Kode Warna #95A5A6
  
• Kode Warna #C5DCE2
  
• Kode Warna #BDC3C7
  
• Kode Warna #EEEEEE
  
• Kode Warna #D2D7D3
  
• Kode Warna #F0E2C5
  
• Kode Warna #EB9532
  
• Kode Warna #E67E22
  
• Kode Warna #F27935
  
• Kode Warna #F9BF3B
  
• Kode Warna #F7CA18
  
• Kode Warna #F9690E
  
• Kode Warna #F39C12
  
• Kode Warna #D35400
  
• Kode Warna #F4D03F
  
• Kode Warna #F5AB35
  
• Kode Warna #EB974E
  
• Kode Warna #F2784B
  
• Kode Warna #F4B350
  
• Kode Warna #E87E04
  
• Kode Warna #E74C3C
  
• Kode Warna #CF000F
  
• Kode Warna #C0392B
  
• Kode Warna #D64541
  
• Kode Warna #EF4836
  
• Kode Warna #96281B
  
• Kode Warna #D91E18
  
• Kode Warna #E26A6A
  
• Kode Warna #FF0000
  
• Kode Warna #F22613
  
• Kode Warna #E08283
  
• Kode Warna #9B59B6
  
• Kode Warna #8E44AD
  
• Kode Warna #BE90D4
  
• Kode Warna #BF55EC
  
• Kode Warna #9A12B3
  
• Kode Warna #913D88
  
• Kode Warna #722D6A
  
• Kode Warna #740A4E