Project Chroma
A dynamic color palette generator for artists and designers. The main challenge was creating an algorithm that not only generates aesthetically pleasing combinations but also ensures accessibility standards (WCAG). Built with React and a custom color theory engine.
Overview
Project Chroma started from a simple frustration: most color palette tools give you five random swatches and call it a day. Real designers need palettes that work together — that maintain contrast ratios, that feel cohesive across light and dark modes, that account for color blindness.
The Problem
Generating a “nice” palette is easy. Generating a palette that passes WCAG AA contrast checks while remaining visually harmonious is hard. Most tools treat accessibility as an afterthought — you pick colors first, then check if they pass. Chroma reverses that logic.
The Color Theory Engine
At the core is a constraint-based color generation system:
- Seed selection — The user picks a base color or mood.
- Harmony generation — Using color wheel relationships (complementary, triadic, split-complementary, etc.) to generate candidate palettes.
- Accessibility filtering — Every candidate palette is tested against WCAG AA (4.5:1 for normal text, 3:1 for large text). Palettes that fail are adjusted by shifting lightness while preserving hue relationships.
- Cultural context weighting — Adjusts saturation and warmth based on the intended context (corporate, playful, editorial).
Technical Stack
- React with TypeScript for the UI
- Custom engine — no external color libraries beyond delta-E calculations
- OKLCH color space for perceptually uniform manipulations
- GPU-accelerated preview rendering for real-time adjustments
Lessons Learned
Building color algorithms taught me that “mathematically correct” and “visually pleasing” are not the same. The OKLCH color space got us closer to perceptual uniformity than HSL ever could, but human perception still has edge cases that no formula fully captures.