3 ms·
Show HN: Paletra – Build WCAG ready color palettes and test them on components
I built Paletra (https://paletra.cc 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 https://paletra.cc
Thanks for checking it out!
- mazahermuraj 1y agoThought 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)