HueLab
An AI assisted tool that turns a feeling into a complete, accessible color system with contrast guaranteed by math instead of guesswork.
Visit siteWhy I built it
Color is where most designers, and almost every developer, get stuck. Accessibility gets left to the end, so colors are picked for looks and then fail contrast once real text sits on them. And a few nice swatches isn't a system. A real product needs full tonal scales and tokens for backgrounds, surfaces, text, borders and states.
The people who need the most help with color are the ones these tools serve the least. I wanted the opposite: start from a feeling, get back a complete system, and let the tool guarantee the accessibility for you.
The split that runs everything
AI is good at taste and bad at guarantees. Contrast math is the other way around. So I split the work along that line.
The design thesisAI decides taste. Math guarantees accessibility. Nothing crosses that line.
How it works
You start from intent, not hex codes.
Describe a vibe, add seed colors, or upload an image.
Type a feeling like “calm ocean fintech”, lock exact colors to roles, or pull them from an image. None of it needs you to know hex codes.
AI picks the direction only.
It returns the mood, hue family and temperature, never the final values. If it's offline, a rule-based fallback still gives a real system, so you never hit a dead end.
A deterministic engine does the math.
It builds eleven-step tonal scales for every role and guarantees contrast on each text-on-surface pair. This is the part that keeps the promise, and it's covered by a full test suite.
The decisions worth talking about
OKLCH as the working color space.
Every scale is built in perceptual OKLCH and only turned into HEX for display. That's why the steps look evenly spaced to the eye and the hue stays steady across the whole scale, instead of drifting or going muddy like plain HSL ramps.
Two contrast checks, on purpose.
Every pair is tested against WCAG 2.2 and APCA, the newer and more accurate model. A pass has to clear both. AAA is shown too, so you can aim higher when you want without being blocked by default.
Fixes keep your intent.
To fix a failing pair, the engine holds the hue and only shifts lightness, touching chroma as a last resort. It never swaps in an unrelated color to win the check, so your original choice survives.
The tool passes its own audit.
A color-accessibility tool that failed WCAG would be indefensible, so the app's own interface is held to WCAG 2.2 AA, checked before shipping.
Calm, honest states.
Empty, loading and error states all show a plain, reassuring message instead of a stack trace. For people who already feel unsure, how a failure feels is part of the design.
Contrast you can see, not audit
The contrast report is the heart of the trust. Every important text-on-surface pair is checked three ways at once, WCAG ratio, AA / AAA, and APCA, laid out so anyone can read it at a glance. Raise the target to AAA and the weak pairs show up right away, each with a one-click fix that nudges the color to pass while keeping its hue.
Accessibility becomes something you watch happen, not a scary report you run at the end.
Seen in a real layout
Color only means something in use, so the system is shown mapped onto real roles, background, surface, text, borders, brand and states, inside a realistic layout. A live preview paints the palette onto an actual dashboard, and a color-blindness simulator runs the whole thing through the three main types, clearly marked as a simulation.
Visual direction: pastel neo-brutalism
The interface is pastel neo-brutalism: warm paper, cream cards, thick black borders, hard shadows, chunky pastel-orange buttons and bold black type. A serious tool that still feels friendly.
There's a reason beyond taste. This high-contrast, black-on-pastel look is naturally accessible, so the style and the goal pull the same way. I kept the borders and hard shadows to cards and main controls, not every element, and stayed on warm neutral tones so your generated colors are always the star.
Outcome
HueLab turns a single sentence into a complete, accessible color system, and the accessibility is built in and checked by an automated test suite, not assumed. Save, variations, PDF export and share links all work with no accounts and no backend, so it stays private and quick.
It's the project where I got to design an opinionated tool and then build the engine that makes its core promise true. Most color tools hand you swatches and wish you luck. This one hands you a system and proves it's accessible.
Built with
Next.js and TypeScript, Tailwind with custom tokens and no component library. Gemini for the direction only. The color science runs on culori for OKLCH and apca-w3 for APCA, with IndexedDB and lz-string for saving and share links, jsPDF for export, and Upstash Redis for rate limiting. Because I designed and built it, I could carry the design intent all the way into the engine, which is exactly where a promise like “contrast guaranteed” has to live.