Show HN: Paletra – Build WCAG ready color palettes and test them on components

1 mazahermuraj 1 8/28/2025, 12:58:42 AM paletra.cc ↗
I built Paletra (https://paletra.cc) to simplify the frustrating workflow of designing accessible color palettes across light and dark modes.

The idea came from a designer I work with - she was using ChatGPT to generate tints, Coolors to visualize them, and WebAIM to check contrast, all before copying them into Figma.

Paletra aims to streamline all that:

- Generate tints, shades, and dark mode versions from a base color - View WCAG contrast scores (live, on both black and white backgrounds) - See matching complementary colors - Preview colors on actual UI components (buttons, hover/disabled states, etc.) - Save palettes into folders - Export as JSON/CSS/SCSS - Figma plugin: apply palettes directly OR analyze any component's accessibility

Still a work in progress—would love feedback on: - The color design workflow - UX and clarity of accessibility guidance - Anything you'd want it to do better

Site (Free to start): https://paletra.cc

Thanks for checking it out!

Comments (1)

mazahermuraj · 8h ago
Thought I'd add some directions

1. Generate a random color or add your own hex 2. Select colors to add to your palette 3. Save your palette to your library (requires an account – free to start) 4. Click the “Playground” (bottom right) → switch to the “Library” tab to pick from your saved palettes 5. Insert a component (currently only buttons; more coming soon – Pro only) 6. Download the Paletra Figma plugin - Apply your saved palettes to Figma designs - OR select any component and get a WCAG contrast check - (Figma plugin access requires a Pro account)