Add Color Picker Tool and Color Palette Tool in Blogger

How To Add A Colour Picker Tool and Color Palette In Blogger

Hello Guys, we are back with another simple color picker tool for bloggers in javascript code to add to your website. Along with this we are also providing you most used color palette collection to add to your website. So follow this article to add a color picker tool to your Blogger website.

Many designers and even website developers are using material design UI and use a specific color to make it look good. So In color theory, a color scheme is the choice of colors used in various artistic and design contexts.

If you are not in designing background then you must be wondering What is the use of it? Well, why should we know about it because we are into the blogging field so we provide such a tool to make their life easier Right!. So be proud to be in a blogging career now lets us know some basic definitions of each term.

Color Picker tool and color palettes in blogger script
Color Picker tool and color palettes in blogger script


More Scripts: Gradient Color Code Generator Script

What is a color picker tool?

A color picker is used to select and adjust color values. In graphic design and image editing, users typically choose colors via an interface with a visual representation of a color—organized with quasi-perceptually relevant hue, saturation, and lightness dimensions (HSL) – instead of keying in alphanumeric text values. Because color appearance depends on the comparison of neighboring colors (see color vision), many interfaces attempt to clarify the relationships between colors.

In layman's terms - A color picker is used to pick the specific colors from available colors.

For more detailed information visit Wikipedia.

What is a color palette?

For more information just google it now in simple words it is a collection of combinations of colors display on different device screens or interfaces.

Now let us add the Color picker tool to the blogger website follow the complete guide step by step with me.

How To Add A Colour Picker Tool In Blogger

Nowadays even many blog users need to get a color code when changing their template or widget color And blog designers also need a color code generator for best color matching.
 
So Why not add in our own website a color picker tool and some most used color palettes collection. So with the help of the steps mentioned in this article, you can easily install the color picker tool on your blog or website.

  • On the Blogger Dashboard, go to the Pages page.
  • Create or open the existing page to which you want to add this tool.
  • Switch to HTML mode. Click on the HTML button.
  • Paste the code below into the code window below your content.
  • Now before publishing your post or page see a preview.
  • If the preview is correct then simply publish it else make some small modifications using CSS.
  • That's it you successfully added a color picker tool on the blogger website or even on any website.

Now to add a color palette to the website just copy and paste the below code where you want to add to your website.

More script:HTML Sitemap Generator for Blogger

Add Best Color Palettes Collection in website

Copy below a simple line of code and paste it into your blogger page or post.

Complete code of Color Picker tool and Color Palettes collection. Double Click and copy code for use on your website page. DEMO - Check Blogger Script Demo of this script.



<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/AVvXsEgIADIhNJcZUNROsXentIPAJkj0opcDBUxzTsG0nMud9Yh6IYng74G1UTtfhsRjs7eBBXH-TBgI2c8I_9nSE4liE3YVn3Bxevks1avosai9cLZBr1HlTzQwdBN-XefCLI6eV_U2eRUNRDk/s1600/placeholder.png"
             layout="fixed-height"
             height="575"
             width="auto"
             placeholder><br />
    </amp-img><br />
  </iframe>  

That's it nothing to do more, isn't it great!?.

Amazing Script: Speech to text Converter Script

Keyword Finder Tool Script

For a complete demo of the script with a proper installation and usage guide please watch the complete video.

Color Picker Script and Color Palette collection




In Conclusion of How To Add Colour Picker Tool | Color Palette Tool in Blogger

I hope this guide will help you add this tool and a list of color palettes Blogger website. If you like this guide then don’t forget to share this with your friends stay updated for more updates.

Well, that’s it in this post, will see you again with a new and useful script for the blogger platform. I hope you like this script and share it with your friends. Thanks for visiting.

Thanks for Visiting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.

Also Check Interested Amazing another Script: 

Viral Slam Book Friendship Website Php Script

Love Calculator Prank Website Php Script

meme generator script

Previous
Next Post »

1 comments:

Click here for comments
6 July 2021 at 23:34 ×

I was very impressed by this post, this site has always been pleasant news Thank you very much for such an interesting post, and I meet them more often then I visited this site.
SANWELLSR2FIWRIU

Congrats Dalvinsmith147 you are first to comment...! hehehehe...
Reply
avatar