u/Harmilgoti

I got tired of LLMs generating muddy, washed-out colour palettes, so I built a dedicated Colour Shade Generator that uses real OKLCH math instead.

It generates a perfectly balanced 11-step scale from any hex colour - with Tailwind v4 `@theme` export, dark mode overrides, and WCAG contrast badges baked in.

No login. No tokens wasted. Just paste your brand colour and copy the code.

Try it out for you next project : 🔗 https://tailwindthememaker.com/tools/color-shade

Would love feedback from anyone building design systems!

I keep running into this more than I expected.

On paper, picking colours for design tokens feels pretty straightforward - define a palette, map a few semantic tokens, and you’re done.

But in real UI… it’s rarely that simple.

A colour that looks fine on its own suddenly feels off when used in buttons or cards. Contrast issues pop up, hierarchy gets messy, and even small tweaks start affecting multiple components.

I’ve found myself stuck in this loop way too often:
adjust values --> check in UI --> tweak again --> repeat

It’s even worse when working with existing brand colours or without a solid design system in place.

What actually helped was changing the way I approach it.

Instead of trying to “get the colours right” upfront, I started testing everything directly in context, applying tokens to real components early and iterating from there.

That shift made a noticeable difference:

• issues show up immediately
• decisions are easier to explain
• way fewer back-and-forth tweaks

Lately I’ve been using a setup/tool(website) that lets me preview and generate tokens (colours) directly on real UI components. It saves a lot of time compared to doing everything manually.

Curious how others handle this,

Do you try to lock colours upfront, or figure them out while building the UI?

I've been building TailwindThemeMaker and just shipped something I think Figma designers will actually find useful, so sharing it here.

The problem: You have a brand image, a logo, or a mood board reference. You want to turn it into a real design system in Figma. So you manually eyedrop colors, name them, organize them, and then set them up as tokens in Token Studio. It's tedious and honestly kills the creative flow.

What this does: Upload any image and it:

• Extracts a complete color palette from it
• Lets you preview the colors live on real UI components before committing
• Exports a Figma-ready token object, just copy and paste it straight into Token Studio

No manual naming. No hex code hunting. You go from image → design tokens in seconds.

The live UI preview is what I'm most proud of, you can see how the colors actually feel on buttons, cards, and inputs before you bring them into Figma. So by the time you paste the tokens, you already know the palette works.

Would love feedback from anyone deep in Token Studio — especially if the token format needs any tweaks to fit your workflow better.

I've been working on TailwindThemeMaker for a while now, and just shipped a feature I've personally needed for a long time — so figured I'd share it here.

The problem I kept running into: Every time I started a project with a brand or design reference, I'd spend way too long manually picking colors, plugging them into my stylesheet, and then realising the palette felt off in actual UI context.

What I built: You upload any image — a logo, product shot, screenshot, whatever — and it:

• Extracts a complete color palette from it
• Previews it live on real UI components (buttons, cards, inputs, etc.)
• Exports ready-to-use Tailwind v4 CSS variables — just paste and go

The part I'm most proud of is the live preview on real components. Most palette tools just dump hex codes at you. This shows you how the colors actually feel in a UI before you write a single line of code. That gap was always the most frustrating part of my own workflow.

🔗 Try it: https://tailwindthememaker.com

Would love feedback — especially if something feels off or missing. Happy to answer any questions about how it works under the hood.