JSFiddle - React, Tailwind, and code Playground

by Denis Plotnikov

HTML

<div id="log">
2
</div>

CSS

.colorPad{
  width:75px;
  height:30px;
  display:block;
}
body{

}

JavaScript

/*var yellow1 = "FFFF99";
var yellow2 = "FFFF00";
var blue = "0000FF";*/

var availColors = [
	{ id : 466, hex : 'A87800' },
  { id : 457, hex : '852300' },
  { id : 456, hex : '000000' },
  { id : 454, hex : '031657' },
  { id : 453, hex : 'A1A1A1' },
  { id : 452, hex : '690000' },
  { id : 429, hex : '1C0C36' },
  { id : 414, hex : '092E00' }
];

function colorLuminance(hex, lum) {	// Сделать цвет немного ярче
	// validate hex string
	hex = String(hex).replace(/[^0-9a-f]/gi, '');
	if (hex.length < 6) {
		hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
	}
	lum = lum || 0;

	// convert to decimal and change luminosity
	var rgb = "#", c, i;
	for (i = 0; i < 3; i++) {
		c = parseInt(hex.substr(i*2,2), 16);
		c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
		rgb += ("00"+c).substr(c.length);
	}
	return rgb;
}

function hexColorDelta(hex1, hex2) {
    // get red/green/blue int values of hex1
    var r1 = parseInt(hex1.substring(0, 2), 16);
    var g1 = parseInt(hex1.substring(2, 4), 16);
    var b1 = parseInt(hex1.substring(4, 6), 16);
    // get red/green/blue int values of hex2
    var r2 = parseInt(hex2.substring(0, 2), 16);
    var g2 = parseInt(hex2.substring(2, 4), 16);
    var b2 = parseInt(hex2.substring(4, 6), 16);
    // calculate differences between reds, greens and blues
    var r = 255 - Math.abs(r1 - r2);
    var g = 255 - Math.abs(g1 - g2);
    var b = 255 - Math.abs(b1 - b2);
    // limit differences between 0 and 1
    r /= 255;
    g /= 255;
    b /= 255;
    // 0 means opposit colors, 1 means same colors
    return (r + g + b) / 3;
}

function findColor( hex ) {
	var outHTML = '<table>';
	for ( var i = 0; i < availColors.length; i++) {
  	var color1 = colorLuminance(hex.toUpperCase(), 0.1).replace('#','');
    var color2 = colorLuminance(availColors[i].hex, 0.5).replace('#','');
    
  	outHTML += '<tr><td><div class="colorPad" style="background:#'+color1+'"></div></td><td><div class="colorPad"...