Sveltopia Colors
Generate a harmonious, accessible color palette tuned to your brand. One command gives you a drop-in replacement for the colors in your Tailwind or shadcn project.
Libraries like Tailwind and Radix already provide well designed color palettes, crafted for contrast and accessibility. These palettes are like a big box of crayons — comprehensive, beautiful, and ready to use. But the crayons aren't designed to adapt to your brand.
Your options are to pick the closest existing color and hope it feels right, or use a tool like Radix's custom color generator to create a single hue family that matches your brand input. The latter is a great step in the right direction, but when you drop that custom row into the rest of the palette there's no guarantee that it will harmonize with the other ~30 hue families.
Sveltopia Colors solves this by finding the closest perceptual match in the Radix baseline, or generating a custom row if it can't find an ideal match. Then it tunes the entire palette so every hue shifts to harmonize with your inputs. The shifts are subtle and dampened, so that everything across the full palette shares a "family resemblance" with your brand while maintaining the original cohesiveness of the Radix color choices. The result is a complete 31-hue system with light and dark mode, every step APCA-validated for accessibility, that feels like it was designed for you from the start.
Why Radix?
We chose Radix's 12-step scale as our foundation because each step has a clear semantic purpose: backgrounds, borders, solids, and text which take the guesswork out of choosing the right shade for a given UI context. The light/dark mode pairing is solved at the scale level, and twelve steps hits the sweet spot between flexibility and decision fatigue.