Personal projectUI Palette Generation and Validation
An interactive tool that turns a single color into a complete UI palette and validates it across real interface scenarios.
See the site liveThe project
swatches and still create problems when applied to text, surfaces, borders, states, or charts. PaletteUI explores a way to bridge that gap: evaluating color within the interface where it will actually be used. The tool turns a single HEX color into a complete 50–950 scale using an OKLCH-based generation system, then applies it in real time across interactive UI scenes. From there, users can explore how the palette behaves, identify which steps are being used by each element with Inspect, evaluate color contrast with APCA and WCAG, and finally export the tokens for implementation. The product is built around a continuous loop: Generate → Explore → Inspect → Validate → Export Rather than treating a palette as a collection of isolated colors, PaletteUI makes the interface itself part of the exploration and decision-making process.
My contribution
I defined the interaction model and built the complete experience, from the preview system and exploration controls to Inspect and the accessibility and export workflows. I built the OKLCH-based palette generation pipeline, the system for dynamically applying colors across the UI scenes, and the state architecture connecting palettes, scenes, themes, contrast, and interactions. One of the main design decisions was to make the interface itself the environment for evaluating the palette. This allowed Inspect and contrast analysis to become an integrated part of the exploration process rather than separate tools.
The impact
PaletteUI brings palette generation, real UI exploration, accessibility analysis, and token export into a single workflow. The result is an experience that helps move from “this color looks good” to “this system works within an interface,” making the relationship between color decisions and their application in a product more tangible. Rather than building another palette generator, the project explores a simple idea: the best place to evaluate a color system isn't the swatch — it's the interface.
Independent Product
Design Engineer & Frontend Developer
React, Next.js, TypeScript, Tailwind CSS, Zustand, OKLCH, APCA, Base UI, Phosphor Icons, Biome, Vercel