Generating random colors for fun and profit

I came across this snippet of code on Stack Overflow and thought it was pretty cool. It generates a random color in hex format.

// https://stackoverflow.com/questions/61922779/how-to-generate-non-repeating-random-results
function generateRandomColor() {
  return "#" + Math.floor(Math.random() * 16777215).toString(16);
}

I extended it to generate a grid of random colors:

I asked ChatGPT if it could make edits to ensure the color would be unique. It suggested using a cache. Given that I only plan to generate a few hundred numbers that seems simple and effective.

const generatedColors = [];

function generateRandomColor() {
  let newColor;
  do {
    newColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
  } while (generatedColors.includes(newColor));
  generatedColors.push(newColor);
  return newColor;
}

I then asked ChatGPT if it could update the code to return HSL colors instead.

This function produces much different results!

Maybe one day I will extend this to output complementary color combinations...

I ask Chat GPT a moment later to generate appealing color combinations in sets of 5. It came up with this:

const generatedColors = [];

function generateRandomColorSet() {
  const hue = Math.floor(Math.random() * 360);
  const saturationBase = Math.floor(Math.random() * 61) + 20;
  const lightnessBase = Math.floor(Math.random() * 41) + 30;
  const alpha = 1;
  const saturationStep = 10;
  const lightnessStep = 10;
  let colorSet = [];

  for (let i = 0; i < 5; i++) {
    const saturation = saturationBase + i * saturationStep;
    const lightness = lightnessBase + i * lightnessStep;
    const newColor = `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
    colorSet.push(newColor);
  }

  // Check if the color set is unique, otherwise try again
  while (
    generatedColors.some((set) =>
      set.every((color, i) => color === colorSet[i])
    )
  ) {
    colorSet = generateRandomColorSet();
  }

  generatedColors.push(colorSet);
  return colorSet;
}

Still kind of dull, but maybe I will play around with it more later. Try it out and see what you come up with!

Part 2: LCH Colors