Create a color palette generator that produces aesthetically pleasing color schemes. Users can generate random palettes, lock specific colors, and export palettes for use in design projects.

Project Checklist

• Generate random color palettes (5-7 colors)
• Display colors with hex codes and RGB values
• Allow users to copy color codes to clipboard
• Implement color locking to keep specific colors while regenerating others
• Add different palette generation algorithms (complementary, triadic, analogous)
• Create a visual preview area showing colors together

Bonus Project Checklist Items

• Add color picker to manually select starting colors
• Implement accessibility checking (contrast ratios, WCAG compliance)
• Add export options (CSS, JSON, PNG image)
• Create a favorites system to save preferred palettes
• Add color name detection (e.g., “Crimson Red”)
• Implement gradient generation from palette

Inspiration (Any companies/libraries similar)

• Coolors
• Adobe Color
• Paletton

Hint/Code snippet to start

To get started, you can use the following code snippet to generate colors:

function generateRandomColor() {
  return '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
}

function generatePalette(count = 5) {
  const palette = [];
  for (let i = 0; i < count; i++) {
    palette.push(generateRandomColor());
  }
  return palette;
}

function generateComplementaryPalette(baseColor) {
  const hsl = hexToHsl(baseColor);
  const complementary = [(hsl[0] + 180) % 360, hsl[1], hsl[2]];
  return [baseColor, hslToHex(complementary)];
}