Distinct Colours

by Anton

HTML

<div id="colors"></div>
<div id="types"></div>

CSS

.color {
  width: 120px;
  padding: 7px 10px;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0,0,0,1);
}

#colors, #types {
  float: left;
  margin: 0 20px 0 0;
}

JavaScript

const colors = [
  '#FF6600', // orange
  '#FCD202', // yellow
  '#B0DE09', // ligher green
  '#0D8ECF', // lighter blue
  '#2A0CD0', // Blue
  '#CD0D74', // Magenta
  '#CC0000', // Red
  '#00CC00', // Green
  '#6a3d9a', // Violet, was '#0000CC',
  '#fb9a99', // Pink
  '#999999', // Light grey
  '#948b3e', // Khaki
  '#333333', // Dark grey
  '#990000', // Burgundy
  '#33a02c', // Darker green
  '#b15928' // Brown
];

$('#colors').html(colors.map(c => `<div class="color" style="background-color:${c}">${c}</div>`));

const types = [
	{ desc: 'Location', color: '#FF6600' },
  { desc: 'Product', color: '#33A02C' },
  { desc: 'EndUseProperty', color: '#990000' },
  { desc: 'FilterField', color: '#0D8ECF' },
	{ desc: 'Run', color: '#FCD202' },
	{ desc: 'Site', color: '#B0DE09' },
	{ desc: 'Custom', color: '#6a3d9a' },
	{ desc: 'Other', color: '#999999' },
	{ desc: 'SkuProperty', color: '#2A0CD0' },
  { desc: 'Dates', color: '#333333' },
  { desc: 'Values', color: '#948b3e' },
  { desc: 'Calculation', color: '#b15928' },
];

$('#types').html(types.map(c => `<div class="color" style="background-color:${c.color}">${c.desc}</div>`));