Back to battles
easyupcoming

Color Palette Generator

Generate harmonious color palettes with various color theory rules.

20 min limit0 participants
javascriptcssdesign
PRD
# Color Palette Generator PRD

## Overview
Build a color palette generator that creates harmonious 5-color palettes using color theory rules, with interactive editing and export capabilities.

## Requirements
- Generate 5-color palettes from a base color
- Support harmony modes: complementary, analogous, triadic, split-complementary, tetradic
- Click to lock individual colors and regenerate the rest while keeping locked colors
- Adjust hue, saturation, and lightness per color with sliders
- Display hex, RGB, and HSL values for each color
- Click any color code to copy it to clipboard
- Export palette as CSS custom properties (variables)
- Export palette as JSON object
- Save palettes to localStorage with name and timestamp
- Color blindness simulation preview (protanopia, deuteranopia, tritanopia)
- Name each color using the closest named CSS color (e.g., "cornflowerblue")
- Drag to reorder colors within the palette
- Dark/light theme toggle for the application UI

## Tech Stack
- HTML, CSS, JavaScript (vanilla or any framework)
- No color palette libraries — implement color theory calculations yourself

## Scoring Criteria
- **Functional (40%)**: Palette generation works, harmony modes produce correct colors, locking works
- **Quality (20%)**: Accurate color theory math, smooth interactions, clean code
- **Fidelity (25%)**: All features present including exports, color blindness preview, drag reorder
- **Speed (15%)**: Time bonus

Battle Stats

Time Limit20 min
Participants0
Statusupcoming

Rules

  • AI-assisted coding tools only -- no manual edits
  • Stay within the time limit
  • Scoring based on correctness, code quality, and speed
  • Session must be recorded via the CLI