Javascript Project to Find Nearest or Closest Matching HTML5 Color Name From Given Hex Color Code in Browser

In case you are in trouble, our website is waiting to help you. Javascript Project to Find Nearest or Closest Matching HTML5 Color Name From Given Hex Color Code in Browser are going to find out through this article.

Javascript Project to Find Nearest or Closest Matching HTML5 Color Name From Given Hex Color Code in Browser

Javascript Project to Find Nearest or Closest Matching HTML5 Color Name From Given Hex Color Code in Browser

<div id="main">
	<div id="inputWrap">
		<div>
			<span id="sharp">#</span>
			<input id="input" type="text" placeholder="1e90ff" maxlength="6" pattern="[\da-f]*"/>
		</div>
		<span id="whattodo">write an #rgb color here</span>
	</div>
	<div id="resultWrap">
		<span id="result"></span>
		<span id="resultDetails">
			<span id="resultRGB"></span>
			<span id="resultDiff"></span>
		</span>
	</div>
</div>
<p>
	#rgb ➡ namedColor
</p>


html, body {
	height: 100%;
}
body {
	font: 24px sans-serif;
	margin: 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	background-color: #333;
}
p {
	max-width: 250px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	opacity: .15;
}

#main {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 0 4px rgba( 0, 0, 0, .2 );
}
#inputWrap,
#resultWrap {
	width: 250px;
	height: 150px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	background-color: #444;
	transition: .2s background-color;
}

#sharp {
	opacity: .5;
	margin-right: .3em;
}
#input {
	color: inherit;
	font: inherit;
	font-family: monospace;
	width: 6.3ch;
	border: 0;
	background: none;
}
#resultDetails {
	font-size: 14px;
	font-weight: bold;
	opacity: .6;
}
#resultRGB:empty,
#resultRGB:empty + #resultDiff { display: none }
#resultRGB::before { font-weight: normal; content: "#"; }
#resultDiff::before { font-weight: normal; content: "(diff: "; }
#resultDiff::after { font-weight: normal; content: ")"; }

#whattodo {
	font-size: 11px;
	opacity: .6;
}


const colors = new Map( [
  [ "aliceblue", [ "f0f8ff" ] ],
  [ "antiquewhite", [ "faebd7" ] ],
  [ "aqua", [ "00ffff" ] ],
  [ "aquamarine", [ "7fffd4" ] ],
  [ "azure", [ "f0ffff" ] ],
  [ "beige", [ "f5f5dc" ] ],
  [ "bisque", [ "ffe4c4" ] ],
  [ "black", [ "000000" ] ],
  [ "blanchedalmond", [ "ffebcd" ] ],
  [ "blue", [ "0000ff" ] ],
  [ "blueviolet", [ "8a2be2" ] ],
  [ "brown", [ "a52a2a" ] ],
  [ "burlywood", [ "deb887" ] ],
  [ "cadetblue", [ "5f9ea0" ] ],
  [ "chartreuse", [ "7fff00" ] ],
  [ "chocolate", [ "d2691e" ] ],
  [ "coral", [ "ff7f50" ] ],
  [ "cornflowerblue", [ "6495ed" ] ],
  [ "cornsilk", [ "fff8dc" ] ],
  [ "crimson", [ "dc143c" ] ],
  [ "cyan", [ "00ffff" ] ],
  [ "darkblue", [ "00008b" ] ],
  [ "darkcyan", [ "008b8b" ] ],
  [ "darkgoldenrod", [ "b8860b" ] ],
  [ "darkgray", [ "a9a9a9" ] ],
  [ "darkgreen", [ "006400" ] ],
  [ "darkkhaki", [ "bdb76b" ] ],
  [ "darkmagenta", [ "8b008b" ] ],
  [ "darkolivegreen", [ "556b2f" ] ],
  [ "darkorange", [ "ff8c00" ] ],
  [ "darkorchid", [ "9932cc" ] ],
  [ "darkred", [ "8b0000" ] ],
  [ "darksalmon", [ "e9967a" ] ],
  [ "darkseagreen", [ "8fbc8b" ] ],
  [ "darkslateblue", [ "483d8b" ] ],
  [ "darkslategray", [ "2f4f4f" ] ],
  [ "darkturquoise", [ "00ced1" ] ],
  [ "darkviolet", [ "9400d3" ] ],
  [ "deeppink", [ "ff1493" ] ],
  [ "deepskyblue", [ "00bfff" ] ],
  [ "dimgray", [ "696969" ] ],
  [ "dodgerblue", [ "1e90ff" ] ],
  [ "firebrick", [ "b22222" ] ],
  [ "floralwhite", [ "fffaf0" ] ],
  [ "forestgreen", [ "228b22" ] ],
  [ "fuchsia", [ "ff00ff" ] ],
  [ "gainsboro", [ "dcdcdc" ] ],
  [ "ghostwhite", [ "f8f8ff" ] ],
  [ "gold", [ "ffd700" ] ],
  [ "goldenrod", [ "daa520" ] ],
  [ "gray", [ "808080" ] ],
  [ "green", [ "008000" ] ],
  [ "greenyellow", [ "adff2f" ] ],
  [ "honeydew", [ "f0fff0" ] ],
  [ "hotpink", [ "ff69b4" ] ],
  [ "indianred", [ "cd5c5c" ] ],
  [ "indigo", [ "4b0082" ] ],
  [ "ivory", [ "fffff0" ] ],
  [ "khaki", [ "f0e68c" ] ],
  [ "lavender", [ "e6e6fa" ] ],
  [ "lavenderblush", [ "fff0f5" ] ],
  [ "lawngreen", [ "7cfc00" ] ],
  [ "lemonchiffon", [ "fffacd" ] ],
  [ "lightblue", [ "add8e6" ] ],
  [ "lightcoral", [ "f08080" ] ],
  [ "lightcyan", [ "e0ffff" ] ],
  [ "lightgoldenrodyellow", [ "fafad2" ] ],
  [ "lightgray", [ "d3d3d3" ] ],
  [ "lightgreen", [ "90ee90" ] ],
  [ "lightpink", [ "ffb6c1" ] ],
  [ "lightsalmon", [ "ffa07a" ] ],
  [ "lightsalmon", [ "ffa07a" ] ],
  [ "lightseagreen", [ "20b2aa" ] ],
  [ "lightskyblue", [ "87cefa" ] ],
  [ "lightslategray", [ "778899" ] ],
  [ "lightsteelblue", [ "b0c4de" ] ],
  [ "lightyellow", [ "ffffe0" ] ],
  [ "lime", [ "00ff00" ] ],
  [ "limegreen", [ "32cd32" ] ],
  [ "linen", [ "faf0e6" ] ],
  [ "magenta", [ "ff00ff" ] ],
  [ "maroon", [ "800000" ] ],
  [ "mediumaquamarine", [ "66cdaa" ] ],
  [ "mediumblue", [ "0000cd" ] ],
  [ "mediumorchid", [ "ba55d3" ] ],
  [ "mediumpurple", [ "9370db" ] ],
  [ "mediumseagreen", [ "3cb371" ] ],
  [ "mediumslateblue", [ "7b68ee" ] ],
  [ "mediumslateblue", [ "7b68ee" ] ],
  [ "mediumspringgreen", [ "00fa9a" ] ],
  [ "mediumturquoise", [ "48d1cc" ] ],
  [ "mediumvioletred", [ "c71585" ] ],
  [ "midnightblue", [ "191970" ] ],
  [ "mintcream", [ "f5fffa" ] ],
  [ "mistyrose", [ "ffe4e1" ] ],
  [ "moccasin", [ "ffe4b5" ] ],
  [ "navajowhite", [ "ffdead" ] ],
  [ "navy", [ "000080" ] ],
  [ "oldlace", [ "fdf5e6" ] ],
  [ "olive", [ "808000" ] ],
  [ "olivedrab", [ "6b8e23" ] ],
  [ "orange", [ "ffa500" ] ],
  [ "orangered", [ "ff4500" ] ],
  [ "orchid", [ "da70d6" ] ],
  [ "palegoldenrod", [ "eee8aa" ] ],
  [ "palegreen", [ "98fb98" ] ],
  [ "paleturquoise", [ "afeeee" ] ],
  [ "palevioletred", [ "db7093" ] ],
  [ "papayawhip", [ "ffefd5" ] ],
  [ "peachpuff", [ "ffdab9" ] ],
  [ "peru", [ "cd853f" ] ],
  [ "pink", [ "ffc0cb" ] ],
  [ "plum", [ "dda0dd" ] ],
  [ "powderblue", [ "b0e0e6" ] ],
  [ "purple", [ "800080" ] ],
  [ "rebeccapurple", [ "663399" ] ],
  [ "red", [ "ff0000" ] ],
  [ "rosybrown", [ "bc8f8f" ] ],
  [ "royalblue", [ "4169e1" ] ],
  [ "saddlebrown", [ "8b4513" ] ],
  [ "salmon", [ "fa8072" ] ],
  [ "sandybrown", [ "f4a460" ] ],
  [ "seagreen", [ "2e8b57" ] ],
  [ "seashell", [ "fff5ee" ] ],
  [ "sienna", [ "a0522d" ] ],
  [ "silver", [ "c0c0c0" ] ],
  [ "skyblue", [ "87ceeb" ] ],
  [ "slateblue", [ "6a5acd" ] ],
  [ "slategray", [ "708090" ] ],
  [ "snow", [ "fffafa" ] ],
  [ "springgreen", [ "00ff7f" ] ],
  [ "steelblue", [ "4682b4" ] ],
  [ "tan", [ "d2b48c" ] ],
  [ "teal", [ "008080" ] ],
  [ "thistle", [ "d8bfd8" ] ],
  [ "tomato", [ "ff6347" ] ],
  [ "turquoise", [ "40e0d0" ] ],
  [ "violet", [ "ee82ee" ] ],
  [ "wheat", [ "f5deb3" ] ],
  [ "white", [ "ffffff" ] ],
  [ "whitesmoke", [ "f5f5f5" ] ],
  [ "yellow", [ "ffff00" ] ],
  [ "yellowgreen", [ "9acd32" ] ],
] );

colors.forEach( ( col, n ) => {
  const [ r, g, b ] = getRGB( col[ 0 ] );

  colors.get( n ).push( r, g, b );
} );

function getRGB( rgb ) {
  return [
    +( "0x" + rgb.substr( 0, 2 ) ),
    +( "0x" + rgb.substr( 2, 2 ) ),
    +( "0x" + rgb.substr( 4, 2 ) ),
  ];
}

function cleanValue( c ) {
  c = c.toLowerCase();
  if ( c.length === 3 ) {
    c = c[ 0 ] + c[ 0 ] + c[ 1 ] + c[ 1 ] + c[ 2 ] + c[ 2 ];
  }
  return c;
}

function findColor( rawcol ) {
  const col = cleanValue( rawcol ),
    [ r, g, b ] = getRGB( col );
  let closest,
    closeby = Infinity;

  colors.forEach( ( c, n ) => {
    const diff =
        Math.abs( r - c[ 1 ] ) +
        Math.abs( g - c[ 2 ] ) +
        Math.abs( b - c[ 3 ] );

    if ( diff < closeby ) {
      closeby = diff;
      closest = [ col, c[ 0 ], n, diff ];
    }
  } );
  return closest;
}

// .........................................................

const el = {},
	colorsArr = Array.from( colors.values() );
let inc = 0;

document.querySelectorAll( "[id]" ).forEach( elem => el[ elem.id ] = elem );

setInterval( () => (
	el.input.placeholder = colorsArr[ inc++ % colorsArr.length ][ 0 ]
), 240 );

input.oninput = () => {
	const color = findColor( el.input.value );

	if ( color ) {
		const name = color[ 2 ],
			rgb = colors.get( name );

		el.inputWrap.style.backgroundColor = "#" + el.input.value;
		el.resultWrap.style.backgroundColor =
		el.result.textContent = name;
		el.resultRGB.textContent = color[ 1 ];
		el.resultDiff.textContent = color[ 3 ];
		el.resultWrap.style.animation = "none";
		if ( rgb[ 1 ] + rgb[ 2 ] + rgb[ 3 ] < 128 * 3 ) {
			el.main.style.color = "white";
		}
	} else {
		el.main.style.color =
		el.result.textContent =
		el.resultRGB.textContent =
		el.resultWrap.style.animation =
		el.resultWrap.style.backgroundColor =
		el.inputWrap.style.backgroundColor = "";
	}
}

Final Words

We hope you enjoyed the article Javascript Project to Find Nearest or Closest Matching HTML5 Color Name From Given Hex Color Code in Browser. The reason is that all your doubts will be resolved through this article.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment