How to Make Responsive Color Picker Tools on Blogs

How to Make Responsive Color Picker Tools on Blogs
How to Make Responsive Color Picker Tools on Blogs



How to Make Responsive Color Picker Tools on a Blog - Choosing the right color certainly requires special skills, especially for a graphic designer or web designer. Especially if the color to be used for an identity or characteristic of the design itself.

On the internet there are many color provider websites or color picker tools, we can freely use these tools as a reference for determining a color for various types of designs.

So, in this article, I will share a tutorial on how to make a color picker tool on our own blog so you don't rely too much on other people's blogs.

What is Color Picker?

Color Picker is an online tool used to select colors. For graphic designers and bloggers, this tool is very useful because it can provide detailed HEX and RGB code color information.

Because of that, many bloggers make a color picker tool into their blog pages to make it easier to choose colors if they want to modify their blog template at any time.

Creating Responsive Color Picker Tools on the Blog

So what if you also want to create a color picker tool on your own blog page? Here I will share the method, there are 4 types of styles that you can choose according to your taste to be installed on the statistics page.

Creating Color Picker Tools on Blogger Pages

  • Go to blogger.com> Pages
  • Create a new Page and give the page a title
  • Select the section HTMLinstead of Compose
  • Copy and paste the code below
  • Publish , and see the results

Create a Color Picker Tool on Wordpress Pages

  • Go to Dasbhor Wordpress> Pages
  • Create a new Page and give it a title
  • Select the section HTMLinstead of Compose
  • Copy and paste the code below
  • Publish , and see the results

Style Tools Coloro Picker

You can choose to use the type of color picker style available below:

Style 1

<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;}.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>

Style 2

<input id="inputColor" type="color" value="#ff1a1a" />
<button onclick="getColor()">Get Color</button>
<br />
<div id="colorHex">
</div>
<div id="colorRGB">
<script>
function getColor() {
    document.getElementById("colorHex").innerHTML = 'HEX : ' + document.getElementById("inputColor").value;
    document.getElementById("colorRGB").innerHTML = 'RGB : '+ hexToRgb(document.getElementById("inputColor").value);
}
function hexToRgb(hex) {
    var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
    var r = parseInt(result[1], 16);
    var g = parseInt(result[2], 16);
    var b = parseInt(result[3], 16);
    return 'RGB('+r+','+g+','+b+')'; 
}
</script>
</div>

Style 3

<iframe frameborder="0" src="https://raw.githack.com/onbloging/kompi-html/master/color-palettes2.html" style="height: 575px; width: 100%;" title="Color Palette"></iframe>
Read Also:
  • Complete Guide to Register Blog to Google News
  • How to Create a Rating Widget on Blogger Posts
  • How to Add Cookies Notification on Blog

Closing

So, that was How to Make a Responsive Color Picker Tool on a Blog, either for Blogger or Wordpress. If this article is useful, you can share and recommend it to friends who need it, if you have problems you can ask via the comments column.

Post a Comment

Welcome to Jehangir Khan's Tech Blog! We're thrilled to have you join the conversation. Your comments and feedback are valuable to us and help us create a community of tech enthusiasts who share ideas and insights. We encourage you to share your thoughts related to the post and engage in a respectful and meaningful conversation with others. Please refrain from spamming or promoting your own content in the comments section. We also ask that you avoid using inappropriate language or attacking others. Please note that all comments will be reviewed before they are posted, and we reserve the right to remove any comments that violate our policies. Let's explore the world of technology together and inspire each other to achieve our goals!

Previous Post Next Post