16 - Color Palette Generator

Description

Develop a web application that generates unique and visually appealing color palettes. Users can:

• Choose a starting color or use a random seed.

• Adjust the palette size (number of colors).

• Select a color harmony mode (e.g., complementary, analogous, triadic).

• Generate new palettes with a single click.

• Preview and copy individual color codes.

Algorithm

1. Color Model and Functions:

   • Use a color model like HSL (Hue, Saturation, Lightness) for representing and manipulating colors.

   • Implement functions to generate random HSL values within specified ranges.

   • Create algorithms for different color harmony modes based on HSL relationships (e.g., complementary angles, distance on the hue wheel).

2. User Interface:

   • Display a starting color swatch with input controls for hue, saturation, and lightness.

   • Provide options to pick a random color or change palette size.

   • Offer a dropdown menu for selecting different color harmony modes.

   • Include a "Generate" button and display the generated palette below.

   • Make individual color swatches in the palette clickable for copyable color codes.

3. Palette Generation and Rendering:

   • On "Generate" click, call the selected harmony mode function with the starting color or random seed.

   • The function returns an array of HSL values based on the chosen harmony algorithm.

   • Convert HSL values to hex codes for display and copy functionality.

   • Render the palette with corresponding color swatches and hex codes.

Code

import React, { useState } from 'react';

// Color model functions
const generateRandomHSL = () => ({
  h: Math.random() * 360,
  s: 50 + Math.random() * 50,
  l: 50 + Math.random() * 50,
});

const hslToHex = (hsl) => {
  const { h, s, l } = hsl;
  // ... (Conversion logic using `hslToHex` function from a color library)
};

// Color harmony algorithms
const COLOR_MODES = {
  complementary: (startH) => [
    { h: startH, s: 100, l: 50 },
    { h: (startH + 180) % 360, s: 100, l: 50 },
  ],
  analogous: (startH) => [
    { h: startH, s: 100, l: 50 },
    { h: (startH + 30) % 360, s: 100, l: 50 },
    { h: (startH + 60) % 360, s: 100, l: 50 },
  ],
  // ... (Add more harmony modes with their calculations)
};

function ColorPaletteGenerator() {
  const [startColor, setStartColor] = useState(generateRandomHSL());
  const [paletteSize, setPaletteSize] = useState(5);
  const [colorMode, setColorMode] = useState('complementary');
  const [palette, setPalette] = useState([]);

  const generatePalette = () => {
    const colors = COLOR_MODES[colorMode](startColor.h);
    const hexColors = colors.map(hslToHex);
    setPalette(hexColors.slice(0, paletteSize));
  };

  return (
    <div className="palette-generator">
      {/* Input controls for starting color, size, and mode */}
      <button onClick={generatePalette}>Generate</button>
      <div className="palette">
        {palette.map((hex) => (
          <ColorSwatch key={hex} hex={hex} />
        ))}
      </div>
    </div>
  );
}

function ColorSwatch({ hex }) {
  const copyColor = () => {
    // ... (Clipboard copy logic using a library like `clipboard.js`)
  };

  return (
    <div style={{ backgroundColor: hex }} onClick={copyColor}>
      <p>{hex}</p>
    </div>
  );
}

Explanation

1. Color Model Functions:

   • generateRandomHSL: Generates a random HSL object for starting colors.

   • hslToHex: Converts HSL values to hex codes for display and copy functionality.

2. Color Harmony Algorithms:

   • COLOR_MODES: Object containing functions for different color harmony modes.

     • Each function takes a starting hue and returns an array of HSL values based on the harmony logic.

3. Component Structure:

   • ColorPaletteGenerator: Main component managing state and UI interactions.

     • Uses useState to store starting color, palette size, color mode, and generated palette.

     • generatePalette function: Calls the selected harmony mode function, converts HSL to hex, and updates the palette state.

   • ColorSwatch: Renders individual color swatches with hex codes and copy functionality.

Additional Notes

• Consider using a color library for HSL conversion and color manipulation functions.

• Integrate a clipboard copy library for user-friendly color copying.

• Explore advanced color theory concepts for more sophisticated harmony modes.

• Add visual features like a color wheel or sliders