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!
mazahermuraj•5mo ago
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)