How to efficiently/quickly generate hex strings of all colors in JavaScript

Question

My initial attempt at generating all the color values takes ~8 seconds to run:

var colors = []

var start = Date.now()

for (var a = 0; a < 16; a++) {
  for (var b = 0; b < 16; b++) {
    for (var c = 0; c < 16; c++) {
      for (var d = 0; d < 16; d++) {
        for (var e = 0; e < 16; e++) {
          for (var f = 0; f < 16; f++) {
            colors.push(color(a, b, c, d, e, f))
          }
        }
      }
    }
  }
}

var end = Date.now()

console.log('time', end - start + 'ms')
console.log(colors)

function color(a, b, c, d, e, f) {
  return String(a)
    + String(b)
    + String(c)
    + String(d)
    + String(e)
    + String(f)
}

Output is this:

node gen-color
time 7906ms
[ '000000',
  '000001',
  '000002',
  '000003',
  '000004',
  '000005',
  '000006',
  '000007',
  '000008',
  '000009',
  '0000010',
  '0000011',
  '0000012',
  '0000013',
  '0000014',
  '0000015',
  '000010',
  '000011',
  '000012',
  '000013',
  '000014',
  '000015',
  '000016',
  '000017',
  '000018',
  '000019',
  '0000110',
  '0000111',
  '0000112',
  '0000113',
  '0000114',
  '0000115',
  '000020',
  '000021',
  '000022',
  '000023',
  '000024',
  '000025',
  '000026',
  '000027',
  '000028',
  '000029',
  '0000210',
  '0000211',
  '0000212',
  '0000213',
  '0000214',
  '0000215',
  '000030',
  '000031',
  '000032',
  '000033',
  '000034',
  '000035',
  '000036',
  '000037',
  '000038',
  '000039',
  '0000310',
  '0000311',
  '0000312',
  '0000313',
  '0000314',
  '0000315',
  '000040',
  '000041',
  '000042',
  '000043',
  '000044',
  '000045',
  '000046',
  '000047',
  '000048',
  '000049',
  '0000410',
  '0000411',
  '0000412',
  '0000413',
  '0000414',
  '0000415',
  '000050',
  '000051',
  '000052',
  '000053',
  '000054',
  '000055',
  '000056',
  '000057',
  '000058',
  '000059',
  '0000510',
  '0000511',
  '0000512',
  '0000513',
  '0000514',
  '0000515',
  '000060',
  '000061',
  '000062',
  '000063',
  ... 16777116 more items ]

Wondering how to quickly generate all the colors, or if this is actually the quickest way, since there is a lot of data.

Answer 1

I don't think it's ever going to be really fast, but you can do it a lot more simply.

function allColors() {
  var num = 256 * 256 * 256, colors = [];
  var zeros = "000000";
  for (var i = 0; i < num; i++) {
    let str = i.toString(16);
    colors.push(zeros.slice(str.length) + str);
  }
  return colors;
}

Answer 2

All the values up to #FFFFFF? Slightlier pretty version:

Array(0xFFFFFF).fill(0).map((x, y) => (x + y).toString(16).padStart(6, '0'))

Performance (ish) version:

const colors = (_c = []) => {
    for (let i=0xFFFFFF; i>=0; --i)
        _c[i] = i.toString(16).padStart(6, '0');
    return _c;
}