JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<p>
    <input type="text" value="#ffcc00"/>
    <button>Get the closest color</button> 
</p>

<p>Base color:</p>
<div class="base_color"></div>

<p>Closest color:</p>
<div class="nearest_color"></div>

CSS

div {
width:50px;
height:50px;
margin:0 0 0 20px;
}

p {
margin:20px;
}

JavaScript

$(document).ready(function(){
    function getSimilarColors (color) {
        var base_colors=["#000000", " #1F95CE", " #237A91", " #2C9AB7", " #373737", " #449A88", " #484848", " #52BAD5", " #595959", " #5CDDCA", " #626262", " #6BC467", " #6DC5DC", " #72C1B0", " #737373", " #848484", " #91A4E1", " #959595", " #95D1C4", " #B1E0EC", " #B7B7B7", " #C5E5DE", " #CCEBF3", " #D0D0D0", " #D4ECE6", " #D6B250", " #D9D9D9", " #DB3A1B", " #E0E0E0", " #E85C41", " #EE836E", " #F2A56D", " #F2F2F2", " #F5B7AB", " #F8D0C8", " #F8F8F8", " #FEBE12", " #FED156", " #FEDE88", " #FFE8AA", " #FFEEBF", " #FFFFFF"];
        
        //Convert to RGB, then R, G, B
        var color_rgb = hex2rgb(color);
        var color_r = color_rgb.split(',')[0];
        var color_g = color_rgb.split(',')[1];
        var color_b = color_rgb.split(',')[2];
        
        //Create an emtyp array for the difference betwwen the colors
        var differenceArray=[];
        
        //Function to find the smallest value in an array
        Array.min = function( array ){
               return Math.min.apply( Math, array );
        };
        
        
        //Convert the HEX color in the array to RGB colors, split them up to R-G-B, then find out the difference between the "color" and the colors in the array
        $.each(base_colors, function(index, value) { 
            var base_color_rgb = hex2rgb(value);
            var base_colors_r = base_color_rgb.split(',')[0];
            var base_colors_g = base_color_rgb.split(',')[1];
            var base_colors_b = base_color_rgb.split(',')[2];
        
            //Add the difference to the differenceArray
            differenceArray.push(Math.sqrt((color_r-base_colors_r)*(color_r-base_colors_r)+(color_g-base_colors_g)*(color_g-base_colors_g)+(color_b-base_colors_b)*(color_b-base_colors_b)));
        });
        
        //Get the lowest number from the differenceArray
        var lowest = Array.min(differenceArray);
        
        //Get the index for...