mir4a/generateColorRange.js

## generateColorRange.js
const fs = require('fs');
const path = require('path');


function printToHTMLColorMap() {
  const header = `
    <!doctype html>
    <html>
    <head>
    <title>16 lime colors</title>
    <style>
      body {
        padding: 0;
        margin: 0;
        font-size: 0;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        background: repeating-linear-gradient( 135deg, #FFF, #FFF 9px, #000 9px, #000 11px);
        background-attachment: fixed;
      }
      .color {
        font: italic 10px/1 arial;
        color: #333;
        text-align: center;
        display: flex;
        min-width: 5px;
        height: 5px;
        text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
        flex: auto;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-around;
        align-content: center;
      }
    </style>
    </head>
    <body>
  `;
  const footer = `
    </body>
    </html>
  `;

  var colors = '';

  const lime = parseInt('ffffff', 16);

  console.time('16 lyams');

  var str = '', lengthDiff = 0, hex = '000000'.split('');

  for (var i = 0; i < lime; i += 500) {
    str = i.toString(16);
    lengthDiff = 6 - str.length;
    for (var j = 5; j >= 0; j--) {
      if ((j - lengthDiff) >= 0) {
        hex[j] = str[j - lengthDiff];
      } else {
        break;
      }
    }
    // console.log(`#${hex.join('')}`);
    try {
      colors += `
        <div
          class="color"
          style="background: #${hex.join('')};">
        </div>
      `;
    } catch (err) {
      console.log(`hex = ${hex}, i = ${i}`);
      console.timeEnd('16 lyams');
      throw err;
    }
  }

  var data = header + colors + footer;

  console.timeEnd('16 lyams');
  return fs.writeFileSync('16-lime-colors.html', data, 'utf-8');
}

printToHTMLColorMap();
	const fs = require('fs');
	const path = require('path');


	function printToHTMLColorMap() {
	const header = `
	<!doctype html>
	<html>
	<head>
	<title>16 lime colors</title>
	<style>
	body {
	padding: 0;
	margin: 0;
	font-size: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	background: repeating-linear-gradient( 135deg, #FFF, #FFF 9px, #000 9px, #000 11px);
	background-attachment: fixed;
	}
	.color {
	font: italic 10px/1 arial;
	color: #333;
	text-align: center;
	display: flex;
	min-width: 5px;
	height: 5px;
	text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
	flex: auto;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-around;
	align-content: center;
	}
	</style>
	</head>
	<body>
	`;
	const footer = `
	</body>
	</html>
	`;

	var colors = '';

	const lime = parseInt('ffffff', 16);

	console.time('16 lyams');

	var str = '', lengthDiff = 0, hex = '000000'.split('');

	for (var i = 0; i < lime; i += 500) {
	str = i.toString(16);
	lengthDiff = 6 - str.length;
	for (var j = 5; j >= 0; j--) {
	if ((j - lengthDiff) >= 0) {
	hex[j] = str[j - lengthDiff];
	} else {
	break;
	}
	}
	// console.log(`#${hex.join('')}`);
	try {
	colors += `
	<div
	class="color"
	style="background: #${hex.join('')};">
	</div>
	`;
	} catch (err) {
	console.log(`hex = ${hex}, i = ${i}`);
	console.timeEnd('16 lyams');
	throw err;
	}
	}

	var data = header + colors + footer;

	console.timeEnd('16 lyams');
	return fs.writeFileSync('16-lime-colors.html', data, 'utf-8');
	}

	printToHTMLColorMap();