Unique Color Generator

A vanilla JavaScript function for returning contrasting colors based given an integer index.

by Scott Means

HTML

<x-colors></x-colors>

CSS

x-colors {
  display: flex;
  flex-wrap: wrap;
}

x-color {
  display: inline-block;
  height: 6em;
  width: 6em;
  text-align: center;
  line-height: 6em;
  margin: .5em;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
	const colors = document.querySelector('x-colors');
  
	for (let i = 1; i <= 1024; i++) {
  	const color = document.createElement('x-color');
    
    color.style.background = 
    color.innerText = getUniqueColor(i);
    
    colors.appendChild(color);
  }
});

function getUniqueColor(n) {
	const rgb = [0, 0, 0];
  
  for (let i = 0; i < 24; i++) {
  	rgb[i%3] <<= 1;
    rgb[i%3] |= n & 0x01;
    n >>= 1;
  }
  
  return '#' + rgb.reduce((a, c) => (c > 0x0f ? c.toString(16) : '0' + c.toString(16)) + a, '')
}