As a developer working with UI/UX teams, I’ve seen how much of a pain it still is to create accessible, well-balanced color palettes.

A colleague of mine (UI/UX designer) mentioned how frustrating it is to:

- Generate tints and shades from a brand color - Check WCAG accessibility contrast - Preview how those colors will actually look on buttons and components - Then jump between 2–3 tools just to get something usable

So I built a tool to help fix that.

1. Choose a base color 2. Generate automatic tints/shades 3. Get WCAG contrast ratings live (against black/white backgrounds) 4. See automatically suggested complementary colors 5. And drop your palette directly onto real UI components (buttons for now, more coming) to visualise how your palette actually looks in a design system.

You get to create your color palettes in context, not isolation

Here’s the tool (free, no signup required to get started): https://colorpal-sage.vercel.app/

I'd appreciate feedback from this community on: - Is the new UX clear or confusing? - Is the “component playground” something you’d actually use? - Anything that feels unnecessary or missing? - Anything else?

I am genuinely grateful for any insights from designers or developers working with colour systems.

Thanks in advance!