Color is deceptively difficult. We often treat it as an aesthetic choice, but in practice, it is a rigorous compliance constraint. If your interface fails WCAG 2.1 AA contrast ratios, you aren't just making a design mistake; you are excluding users. The typical workflow for solving this involves opening a separate tool, manually adjusting hues, checking contrast ratios, and then copying values back into your codebase. It is a context-switching tax that accumulates quickly.
I built ColorWell to remove the friction between selecting a base color and generating a fully compliant, accessible palette. The core philosophy was simple: the heavy lifting should happen where the data lives—in the browser.
The Wedge: Privacy and Performance via WebGPU
The defining constraint of this project was that no data should leave the user's device. Most palette generators require uploading your design files or sending hex codes to a server for processing. For sensitive projects, this is a non-starter. Furthermore, round-trip latency kills the "flow" state of design work.
ColorWell runs 100% in the browser using WebGPU. This allows the application to leverage the GPU for parallel processing of color space calculations without the overhead of WebGL. The result is a tool that works offline, respects privacy by default, and generates palettes instantly.
When you input a base color, the system doesn't just pick random harmonies. It calculates a range of complementary, analogous, and triadic schemes, then filters them through a strict WCAG 2.1 AA compliance layer. Every generated color is validated against both light and dark backgrounds to ensure legibility. If a color fails, it is adjusted or flagged, ensuring the final palette is not just beautiful, but usable.
Exporting to the Developer Workflow
A palette is useless if it stays in a UI. The second half of the tool focuses on integration. ColorWell exports directly to CSS custom properties, Tailwind configuration objects, and Figma tokens. This means you can copy a block of code and paste it directly into your globals.css or tailwind.config.js file.
The export format is clean and ready for production. For example, a Tailwind export includes not just the color values, but also the semantic naming structure that helps maintain consistency across a project.
:root {
--color-primary: #3b82f6;
--color-primary-hover: #2563eb;
--color-text-dark: #111827;
--color-bg-light: #f9fafb;
}
This reduces the manual error rate when translating design decisions into code. You don't have to worry about whether the hover state has sufficient contrast because the tool has already verified it.
The Role of On-Device AI
While the core generation logic is algorithmic, I integrated a small model that runs in your browser to assist with semantic labeling. This private on-device AI analyzes the base color and suggests contextual names (e.g., "Ocean Blue" vs. "Steel Gray") based on color theory and common usage patterns. This helps developers maintain consistent naming conventions in their CSS variables.
Because the model runs locally, there is no API call, no latency, and no data privacy concerns. It is a lightweight enhancement that adds intelligence without the infrastructure overhead.
Building in Public
Building ColorWell was an exercise in balancing complexity with simplicity. The challenge wasn't just the color math; it was ensuring the WebGPU implementation remained stable across different browsers and devices. Early versions struggled with shader compilation on some laptops, which required significant optimization of the compute shaders.
The tool is designed for developers and designers who value speed and privacy. It is a paid tool, with a 7-day trial available for anyone who wants to test the full export features. For those exploring the interactive aspects, games have free turns to try out the generation logic without commitment.
Why Local-First Matters
The trend toward local-first software is gaining traction for good reason. When you remove the server from the equation, you remove single points of failure, reduce latency, and enhance privacy. ColorWell is a small example of how modern web APIs like WebGPU can enable sophisticated tools that were previously only possible with desktop applications or heavy cloud services.
If you find yourself manually tweaking colors to meet accessibility standards, this tool might save you time. It is a focused utility that handles the tedious part of color theory so you can focus on the broader design system.
You can try it out at https://colorwell.bestpaid.app.
Top comments (0)