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