Color Texture Atlas Generator

A modern, web-based color palette design engine and texture atlas utility built with Next.js, React, and Tailwind CSS. This tool is specifically engineered for game developers, technical artists, and UI designers to procedurally generate, sample, and compile discrete color palettes directly into optimized texture atlas sheets.

Core Features

• Advanced Image Color Extraction: Utilizes a customized K-Means Clustering algorithm to parse uploaded images and group dominant color profiles into clean mathematical centers.
• Color Theory Generators: Rules-based algorithmic generation modules covering Monochromatic, Analogous, Complementary/Split-Complementary, Triadic, and Tetradic color spaces.
• Procedural Math Generators: Continuous-to-discrete conversion tools including Inigo Quilez Cosine Wave functions
• Stack Color Mode: Non-destructive pipeline toggle allowing developers to append swatches from multiple generation algorithms successively onto the same active canvas layout.
• Export Controls: Direct rendering configuration options mapping palettes cleanly across user-defined row and column configurations for game engine compatibility.

Installation and Local Setup

Follow these steps to configure the development environment locally:

1. Clone the repository:

   git clone https://github.com/MegaTheGoat/Color-Palette-Generator.git
   cd Color-Palette-Generator

2. Install project dependencies:

    npm install
    # or
    yarn install
    # or
    pnpm install

3. Initialize the development server:

    npm run dev
    # or
    yarn dev
    # or
    pnpm dev

Open http://localhost:3000 in your browser to open web interface.

Architecture and Core Algorithms

K-Means Clustering Extractor

The image processing engine parses raw pixel buffers asynchronously from an HTML5 Canvas interface. It randomly seeds K cluster centers within the 3D RGB color space and iteratively matches active image coordinates based on squared Euclidean distance:

d(a, b) = (r_a - r_b)^2 + (g_a - g_b)^2 + (b_a - b_b)^2

Centers update dynamically based on the geometric mean of assigned pixel coordinates until the execution boundary fulfills user-configured max iteration thresholds.

Cosine Wave Procedural Generation

Mathematical color tracking runs over the graphics equation:

color(t) = a + b * cos(2 * pi * (c * t + d))

Where phase shifts (d) and frequencies (c) are manipulated dynamically via user configurations to step linearly across the interval t in [0, 1].

Roadmap

• Add 1D Perlin/Simplex Noise walk generation mechanics.
• Integrate Median Cut color quantization algorithms for faster deterministic image extraction.
• Support direct downloading of palette assets as .ase (Adobe Swatch Exchange) or .gpl (Gimp/Aseprite) file extensions.
• Provide cubic Bezier curve controllers for pixel art ramp interpolation.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Next.js template

This is a Next.js template with shadcn/ui.

Adding components

To add components to your app, run the following command:

npx shadcn@latest add button

This will place the ui components in the components directory.

Using components

To use the components in your app, import them as follows:

import { Button } from "@/components/ui/button";