Accessible Color Scale Generator
Create beautiful, accessible color palettes
4 followers
Create beautiful, accessible color palettes
4 followers
From color to complete system — accessible, scalable, and ready to build. Generate WCAG-compliant color scales, support dark mode, and export to CSS, SCSS, Tailwind, or JSON. Plus, import your palettes straight into Figma with the official plugin.
Free
Launch Team / Built With
CloudflareStill paying to deploy your apps? Try Cloudflare Workers for free
Promoted
I've created two small tools to help designers and developers work with colors.
1. Color Palette Generator
Unlike other generators, this tool doesn't just build shades around your chosen color - it first checks that the color itself is accessible for both black and white text. If it doesn't meet the standards (WCAG AA standards), the tool finds the closest color that does pass accessibility requirements and builds the palette based on that.
The result: the central shade (400) is always accessible in every situation, and the other shades are at least accessible against one of the two colors (black or white). The tool also generates a Dark Mode palette based on the same principle.
The generator allows you to export the palettes to various formats, including Figma, CSS, JSON, and Tailwind.
2. Figma Plugin for Importing Palettes
Enhanced Color Scale Importer | Figma
With one click, you can transfer the palette directly to Figma as Color Styles and Variables. If there's a mode limitation, the import automatically creates a separate collection for the Dark Mode palette, keeping everything organized and accessible.
https://www.figma.com/community/plugin/1538540918015982212/enhanced-color-scale-importer
Why did I build this?
In my projects, I was always looking for a way to get colors that are both accessible and look good, without compromising either way. I wanted a solution that puts accessibility as the foundation, while simultaneously maintaining design harmony and consistency. So I built a tool that works systematically, that can be replicated and scaled across any project, and naturally aligns with both Figma's capabilities and CSS best practices.