Add Color Picker Tool and Color Palette Tool in Blogger

 

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

  .adspacebytechnicalarp {
padding:2em;
box-shadow:0 5px 15px rgba(0,0,0,.16);
border-radius:5px;
margin-top:1em;
background:#fff;
text-align:left;
color:red;
}

  
  .ng-scope {text-align: center;}
  * {
  box-sizing: border-box;
}
.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>

		<div class="adspacebytechnicalarp arpContainer">
			  Place you Ad Code 1     
		</div>
<br />

<h3 style="text-align: center;"><span style="color: red;">List of Best Color Palettes Collection</span></h3>

<iframe frameborder="0" height="1080" layout="fixed-height" noloading="" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups" src="https://raw.githack.com/IamArpain/free-blogger-scripts/IamArpain-start-1/scripts/color-palettes2.html" title="Color Palette" width="100%"><br />
    <amp-img noloading src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGp-dJhGT-UHxTVTk4-j9u400j8wRVhBUDCU05E0YNmwkmFkMEYSnIwckV_HAVS-n5TISdoJ55NpFR-TokJpcLSMPPIjpakuObk4Im4ceroQdLkOBApqMMUnM-eZOS3BwXsWh2ZJeA1c/s1600/placeholder.png"
             layout="fixed-height"
             height="575"
             width="auto"
             placeholder><br />
    </amp-img><br />
  </iframe>