Free HEX Color Picker Tool

Color Picker - Palette is A Picker with a List of Color Collection; For web/graphics designers. This tool allows you to precisely choose specific colors by extracting the color values in HEX color model
How To create A Tool Like This

Press ✕ or ESC to close it

This tool was built in HTML, CSS and Javascript. Make sure you are familiar with implementing them.

You can paste the code below in you static page or site, or paste in a blogger post or page.

<div class="floating-icon">
 <a href="https://www.sdavidprince.space/p/tools.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhse8Sus7JQADjEciF4WskEGM_pcZ7m2rB8WoGakcGvvk10e68rPB36cvXdgRXHbcNJUMOixTo2oRbsZURps0__hCus_nGPrbyhJnqJV9Zuyo0d4X-iemuvuK8LZc0ffm-PplgoZCXqWLyRrIwMZFyk1RwX4_RHez8_XlWHZoBWyHtkpWe7IcuOjdR0DxsN/s1600/Screenshot_20231024162607.jpg" alt="color-picker"> </a>
</div>


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

  .adspacesdp {
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="adspacesdp arpContainer">
			  Place you Ad Here contact  <a href="https://www.sdavidprince.space/">SDavidPrince</a>   
		</div>
<br />

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

<iframe frameborder="0" height="2080" 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/AVvXsEgZvG95gIMRi23rfr6v0YlLAxEutzMdpwLiP2YeaZI_pu-sIFfS0KDVPih6q3elP2UmAbpBbcxpmcdb0_r-lhHknJCsu_0kj_aEIrm1w5rp1quQmTrom0uSvvMvEcU2Rtiiy9RN-CyYqnU/s1600/placeholder.png"
             layout="fixed-height"
             height="575"
             width="auto"
             placeholder><br />
    </amp-img><br />
  </iframe>  
<p>
  This tool allows you to precisely choose specific colors by extracting the color values in HEX (hexadecima) color model 
  </p>  
<p>Built with Html Css And Javascript: Special thanks to <a href="https://dev.to/iamarpain"> <strong>  IamArpain</strong> </a></p> 
<a style= 'color: blue;' href="https://sdavidprince.space/p/tools.html"> Explore more tools </a>
Please write your comments or send a webmention
Webmention Notice

This site accepts Webmentions via webmention.io/www.sdavidprince.space/webmention. You can also reply to syndicated posts, and your responses may be backfed (posted back here) via brid.gy.

What does all these mean? Read more about it. Respect this and keep mentions relevant.

Dark/Light
Font Size
A-
A+

Additional Widgets

Translate

Explore: Navigation