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:150px;
  height:50px;
  margin:0 0 0 20px;
  line-height: 50px;
  text-align: center;
}

p {
margin:20px;
}

JavaScript

$(document).ready(function(){
    function getSimilarColors (color) {
        var base_colors=["660000","990000","cc0000","cc3333","ea4c88","993399","663399","333399","0066cc","0099cc","66cccc","77cc33","669900","336600","666600","999900","cccc33","ffff00","ffcc33","ff9900","ff6600","cc6633","996633","663300","000000","999999","CCCCCC","FFFFFF"];
        
        var new_base_colors = [
"000000", "00C7A9", "1F95CE", "237a91", "2c9ab7", "33D5BD", "373737", "373737", "373737", "449a88", "484848", "484848", "4BB747", "4CAAD8", "5270CF", "52bad5", "595959", "5CDDCA", "626262", "6BC467", "6cb3a4", "6dc5dc", "70BBE0", "72c1b0", "737373", "7542C4", "758DD9", "848484", "85E6D7", "875c83", "89D085", "8E63D1", "91A4E1", "94CCE8", "959595", "959595", "95d1c4", "9f7d9c", "A582DA", "A5C637", "A6DCA4", "ACBBE8", "ADEEE5", "b1e0ec", "b79db5", "b7b7b7", "B7D15F", "B7DDEF", "BBA1E3", "C4E7C2", "C5DA7F", "c5e5de", "C8D1F0", "ccebf3", "cfbecd", "d0d0d0", "d0d0d0", "D2C1ED", "D4E39F", "d4ece6", "d6b250", "D83B80", "d9d9d9", "db3a1b", "DB6816", "E0629A", "E08C00", "e0e0e0", "e0e0e0", "E2EDBF", "e85c41", "ee836e", "EF8E49", "F186B5", "F2A56D", "f2f2f2", "F3AC36", "F4A4C8", "f5b7ab", "F5BB92", "F5BD5E", "f67f1e", "f69343", "f8a969", "F8C3DA", "F8CD86", "f8d0c8", "F8F8F8", "F9D2B6", "FADEAF", "fbd4b4", "febe12", "fed156", "fede88", "ffe8aa", "ffeebf", "ffffff"];
        base_colors = new_base_colors;
        
        //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...