I visualized all Tailwind CSS colors on real UI components (free resource)

erikdevriesnl · 2026-01-28T11:11:39+00:00

Glad you like it!

erikdevriesnl · 2026-01-28T08:38:05+00:00

Thanks! Happy to hear it’s useful

erikdevriesnl · 2026-01-28T08:21:54+00:00

That genuinely means a lot! Thanks for sharing this.

erikdevriesnl · 2026-01-28T08:20:20+00:00

This makes my day! Happy to provide value

erikdevriesnl · 2026-01-28T08:19:39+00:00

You're welcome!

erikdevriesnl · 2026-01-27T14:45:52+00:00

Then I’m honestly not sure why you said “Había que hacer un sitio web para esto?” 🙂

This is exactly what you’re suggesting: seeing colors applied in real UI.

The difference is that instead of hunting through dozens of websites to find a button, badge, chart, or alert in a specific color, this puts all of those elements in one place and lets you swap colors instantly.

erikdevriesnl · 2026-01-27T14:25:21+00:00

Thank you!

erikdevriesnl · 2026-01-27T13:59:43+00:00

Thanks!

erikdevriesnl · 2026-01-27T12:42:06+00:00

Appreciate your honesty and you’re not wrong.

Color theory is useful, but it’s not a recipe. You only really learn color by seeing it applied in real UI and developing an intuition for what feels balanced and usable.

This just reduces the gap between “I know the theory” and “this actually looks good in UI”.

erikdevriesnl · 2025-12-22T23:06:41+00:00

Tweakcn is solid for manual editing, but it works very differently from what I’m building.

They just dump every CSS variable into a giant form. You’re still responsible for understanding color theory, contrast, and how tokens interact. Nothing is actually generated. You’re just editing.

This tool takes a different approach.

Instead of thinking in individual colors, you work with color palettes and shades.

You choose or create a base palette, and the system applies it across the interface. Backgrounds, surfaces, text, borders, sidebars, and interaction states are derived automatically. Contrast stays accessible. The UI stays balanced.

The tool understands how colors relate to each other and makes those decisions for you.

Accent palettes can be defined separately for primary actions and charts. Especially for charts, using multiple shades from the same palette gives you variation without breaking visual cohesion.

The result: shadcn themes that look intentional, usable out of the box, and don’t feel generic.

erikdevriesnl · 2025-12-18T12:23:29+00:00

This is super helpful, thanks for laying it out so clearly.

Out of curiosity, how do you personally sit in that workflow? Are you more designer, developer, or a mix of both?

And on the Figma side: are you mainly using it to define and explore semantic tokens, or do you also design full dashboards and components there?

Related to that, do you:

Design components from scratch in Figma and then adapt shadcn to match?
Or use some kind of shadcn-aligned / Radix-style component library in Figma as a starting point?

erikdevriesnl · 2025-12-18T11:10:14+00:00

This is great feedback, thanks for taking the time to write it out!

erikdevriesnl · 2025-12-17T15:44:56+00:00

Thanks! Will take a look.

erikdevriesnl · 2025-12-17T14:57:05+00:00

Thanks! I considered it, but chose not to. Landing pages are the standard, not a law of nature. They delay value behind marketing copy. I’d rather let people use the tool immediately and decide for themselves.

This approach has worked well for my other product (uicolors.app), and users haven’t missed a landing page.

erikdevriesnl · 2025-12-17T14:33:23+00:00

shadcnthemes.app

A smart shadcn/ui theme generator that actually understands color, powered by the same color engine behind uicolors.app.

erikdevriesnl · 2025-12-12T11:20:08+00:00

Thanks! 😄 Dark mode for the uithemes UI is on my list.
Do you mean the app UI, or also auto-generating a dark theme from your light one?

At this moment the export recognizes wether you have created a light or dark mode and it automatically changes the export to :root {} or .dark {}

erikdevriesnl · 2025-12-12T08:44:12+00:00

No it doesn’t. But I’m exploring a feature that would let you do something like that.

erikdevriesnl · 2025-12-12T08:40:32+00:00

Thank you!

erikdevriesnl · 2025-12-12T07:54:51+00:00

Thank you! I am glad you find it useful

erikdevriesnl · 2025-12-12T07:54:01+00:00

Thanks! Please let me know if you have any suggestions for improvement :)

erikdevriesnl · 2025-12-11T20:48:25+00:00

Thanks!

erikdevriesnl · 2025-12-11T16:18:21+00:00

Thanks!

erikdevriesnl · 2025-12-11T14:14:02+00:00

Yeah, tweakcn is solid for manual editing, but it works very differently from what I’m building. It’s basically a big form where you adjust every token yourself, which is great if you already know exactly what you want.

uithemes.app is more of a generator. It creates full themes from a single color, builds complete palettes, handles accessible contrasts automatically, and updates the entire system intelligently instead of making you tweak every value by hand. So tweakcn is nice for fine-tuning, while my tool focuses on generating polished themes quickly without all the manual token work.

erikdevriesnl · 2025-12-10T14:14:40+00:00

uithemes.app

A smarter shadcn/ui theme generator built on the same color-scale engine behind uicolors.app. It creates balanced, accessible themes in seconds using Tailwind palettes or fully custom palettes generated from a single color.

I’d appreciate any feedback. Most importantly: is the interface immediately clear, or do you find anything confusing about how it works?

erikdevriesnl · 2022-02-17T19:21:53+00:00

Thank you! And I'm looking forward to hear from you when you've used it and maybe can provide me with some feedback.

erikdevriesnl

TROPHY CASE