BUILDJUNIOR

Build a Color Palette Generator

30 minutes

0 completed

color-theorycssaccessibilityreact

Description

Build a tool that generates harmonious color palettes with contrast checking and multiple export formats.

Requirements

Generate 5-color palettes using color theory: complementary, analogous, triadic, split-complementary

Lock individual colors and regenerate the rest

WCAG contrast checker: show pass/fail for text on each color combination

Copy colors in multiple formats: HEX, RGB, HSL, Tailwind class names

Palette history (last 10 generated)

Click any color to open a full color picker

Spacebar to generate new random palette

Implement color space conversions (HEX, RGB, HSL). WCAG contrast ratio formula uses relative luminance.

Extract palette from uploaded image

Export as CSS variables, Tailwind config, or Figma-ready JSON

Colorblind simulation preview

You will be guided through MCP setup before the timer starts