generate-contrasted-colors.js

function generateContrastingColors(baseColor, numberOfColors, minContrastRatio = 4.5) {
  const colors = [];
  let attempts = 0;
  const maxAttempts = numberOfColors * 100;

  while (colors.length < numberOfColors && attempts < maxAttempts) {
    const newColor = getRandomColor();
    const contrastRatio = getContrastRatio(baseColor, newColor);
    if (contrastRatio >= minContrastRatio) {
      colors.push(newColor);
    }
    attempts++;
  }

  return colors;
}

function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16),
      }
    : null;
}

function getLuminance(hex) {
  const rgb = hexToRgb(hex);
  let r = rgb.r / 255;
  let g = rgb.g / 255;
  let b = rgb.b / 255;

  r = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
  g = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
  b = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);

  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function getContrastRatio(color1, color2) {
  const luminance1 = getLuminance(color1);
  const luminance2 = getLuminance(color2);

  const brighter = Math.max(luminance1, luminance2);
  const darker = Math.min(luminance1, luminance2);

  return (brighter + 0.05) / (darker + 0.05);
}
console.log(generateContrastingColors("#FFFFFF", 100));
// [
//   '#035A54', '#9F635B', '#05407C', '#2905C4', '#551034', '#79296D',
//   '#860170', '#5F775C', '#515AAD', '#6A1147', '#247366', '#A64D43',
//   '#6D6756', '#AE4500', '#3055AB', '#1637CC', '#8347E1', '#576F79',
//   '#657111', '#A51AFD', '#560043', '#5066C4', '#81450E', '#77309E',
//   '#0634A6', '#594EFD', '#6E465A', '#0A0CC1', '#5D27D7', '#371F6D',
//   '#A75182', '#9708FC', '#01355B', '#64716D', '#3F7957', '#1E396E',
//   '#BC2081', '#073608', '#9B1277', '#5E0574', '#0F475F', '#C25322',
//   '#1F0D19', '#075CD7', '#C44260', '#3A5D94', '#3E1642', '#7F7408',
//   '#9A4BB2', '#596A50', '#613A98', '#515D7F', '#C7078C', '#3147A3',
//   '#0F380A', '#2F1644', '#4E478D', '#287A27', '#8036B1', '#502CE6',
//   '#3C0546', '#3A4F70', '#4C656B', '#7B4CC7', '#0F2C4F', '#266B55',
//   '#B10DE0', '#676776', '#8861B2', '#457B40', '#6139C6', '#216990',
//   '#963DFA', '#764635', '#845720', '#BB145F', '#AB2FC7', '#080691',
//   '#435045', '#2D25CC', '#337F9D', '#7B45E5', '#3B529F', '#1A7567',
//   '#706C76', '#582093', '#DC143C', '#B71865', '#291209', '#2F78A2',
//   '#3E61C4', '#40786B', '#5906D0', '#8E59B2', '#E40040', '#2520B1',
//   '#208382', '#002E36', '#901DFD', '#0653F9'
// ]

console.log(generateContrastingColors("#000000", 100));
// [
//   '#D3550A', '#929945', '#A8705C', '#F0EE27', '#DBA05C', '#9AEC79',
//   '#E33C26', '#23C65C', '#3DC663', '#68E32F', '#AB5890', '#F02C78',
//   '#D2E663', '#DA8334', '#47FE34', '#FBD1CC', '#589D2A', '#209A50',
//   '#D4E5F7', '#E7B2C0', '#78E36C', '#C64986', '#CC74CE', '#9FD7F8',
//   '#368C54', '#CB2EFE', '#A478CF', '#95F99A', '#BEE8EB', '#AB8FF7',
//   '#95E5B9', '#218830', '#F9AC09', '#6CEA89', '#2FC7BF', '#E939B4',
//   '#3DCFDA', '#94DAC3', '#767E9A', '#77EBF9', '#CC5400', '#F3F458',
//   '#31B243', '#3AF98B', '#3B7BC0', '#CE5078', '#DD8014', '#A37C3C',
//   '#69920D', '#A2DA3E', '#62E3E6', '#75BD21', '#AAFFC8', '#05FF62',
//   '#34AA8A', '#65CCAD', '#D1E08B', '#B3BFEF', '#9D66EC', '#FE410B',
//   '#07EAEA', '#6B9AFF', '#F32583', '#E3F5E5', '#FB28D6', '#02C685',
//   '#FB2366', '#43C533', '#BE6FC5', '#BFA09B', '#38DB2B', '#B28C12',
//   '#F2CB21', '#A3E2CD', '#10A922', '#5EF8EC', '#F41A75', '#AC77A3',
//   '#CBF157', '#8E9F6C', '#D4AB3C', '#F7FAEF', '#1BD2E0', '#727F79',
//   '#00C71E', '#EA63E2', '#C2C3ED', '#1B9A9F', '#1E94C4', '#CD8D0A',
//   '#68FDE0', '#E63C75', '#AD6E39', '#1D82B2', '#33ACC0', '#62AA77',
//   '#A1DDBC', '#6B7FF4', '#F8D298', '#F1A884'
// ]