Generate accessible color palettes using Adobe Leonardo's open-source contrast generator. Create WCAG-compliant color systems with automatic dark mode support, all integrated directly into Framer.
Transform how you create color palettes with the only Framer plugin powered by Adobe Leonardo contrast-based color generator
What Makes This Different
Traditional color tools force you to pick colors first, then check if they're accessible. Leonardo flips this approach: you define your desired contrast ratios, and it generates beautiful, scientifically accurate colors that are guaranteed to meet accessibility standards. It's not just a color picker—it's an intelligent system built on perceptual color science.
Key Features
Contrast-Ratio Driven: Set target ratios (2:1, 3:1, 4.5:1, etc.) and generate colors that automatically meet WCAG AA and AAA standards
Adaptive Color Scales: Create full lightness scales from your key colors, interpolated in perceptually uniform color spaces like LCH, LAB, or CIECAM02
Theme Generation: Build entire multi-color themes with shared backgrounds, ensuring every palette harmonizes perfectly
Advanced Color Science: Leverages HSLuv for accurate perceptual lightness and supports multiple interpolation methods for optimal results
Dynamic & Accessible: Colors that work for both light and dark modes, with built-in support for color vision deficiencies
Perfect For
Design systems requiring scalable, accessible color tokens
Products that need adaptive themes or user-controlled brightness/contrast
Teams prioritizing WCAG compliance from the start, not as an afterthought
Creating consistent color scales (grays, blues, semantic colors) with predictable contrast relationships
How It Works
Define your "key colors"—anchor points in your desired hue
Set your target contrast ratios for different use cases (body text, large text, UI elements)
Leonardo generates a complete scale of accessible colors, properly ordered by perceptual lightness
Apply directly to your Framer variables and components
Built on the same open-source technology that powers Adobe's design system, this plugin brings professional-grade, accessibility-first color generation to Framer, because great design should be inclusive design.For support info@netoum.com
The uploaded zip file in in the correct format, exported with npm run pack