5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:T9ba,

Contrast-First Color Generation for 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
Theme Generation: Build entire multi-color themes with shared backgrounds, ensuring every palette harmonizes perfectly
Advanced Color Science: 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 "background colors" and the lightness for each.
Choose your contrast names and colors
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

59:[["$","$L5c",null,{"post":{"id":"019b0df3-a969-7fff-ba82-6160710aa441","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"13be9ea9-474a-43f7-9a74-8a34eefbe626","name":"Netoum","slug":"netoum","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1520598/avatar-pd3DJ0C2x6561oRqTiMcvqdv2GPWt4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"652","resolved":true,"title":"Accessible Colors","body":"$5d","bodyJson":null,"introduction":"Accessible Colors","slug":"accessible-colors","author":{"framerUserId":"13be9ea9-474a-43f7-9a74-8a34eefbe626","name":"Netoum","slug":"netoum","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1520598/avatar-pd3DJ0C2x6561oRqTiMcvqdv2GPWt4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/652-wqh9NxTfMoBeSuNa5gVOfQyqIwpVye"},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/652-UEIJIpjBgIsoqcV9VPpI7quveKQ5HG"}],"post":null,"createdAt":"2025-12-09T06:06:36.838Z","updatedAt":"2026-03-22T07:19:25.738Z","publishedAt":"2025-12-11T15:07:11.081Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"54ppm6kckpvwtstulnl5t4x89","paid":false,"categories":[{"id":"b238ea64-0ce9-413a-848d-43b73f0eea0f","name":"Design Workflow","slug":"design-workflow"}]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-11T15:07:11.081Z","updatedAt":"2025-12-11T15:07:11.081Z","reported":false}}],"$L5e"]

Suggested for you