50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:Tb89,

CSS Color Importer for Framer

A powerful plugin that transforms your CSS color system into Framer color styles, preserving design tokens and making them instantly accessible.

What is CSS Color Importer?

CSS Color Importer bridges the gap between your CSS workflow and Framer's design system. It extracts and imports colors while maintaining their semantic meaning and organization.

Features

🎨 Smart Color Detection: Automatically identifies and extracts all color values from your CSS files

🌓 Dark Mode Support: Handles light/dark mode variants through media queries, CSS classes, and data attributes

🔧 Flexible Input Methods: Upload CSS files or paste CSS content directly

🧠 Intelligent Parsing: Supports hex, RGB, HSL, named colors, and CSS variables with fallbacks

📁 Smart Organization: Groups colors by prefix and maintains your naming conventions

⚙️ Customizable Options: Choose between merging light/dark variants or keeping them separate

✅ Selective Import: Pick exactly which colors to import into your Framer project

💾 Persistent Settings: Remembers your preferences for future imports

How to Use

Install the plugin from the Framer Marketplace
Upload your CSS file or paste CSS content
Preview extracted colors with their light/dark variants
Configure options like prefix stripping and variant merging
Select the colors you want to import
Import to create Framer color styles instantly

Why Use This Plugin?

Stop recreating your color system from scratch. This plugin preserves hours of design work by intelligently converting your existing CSS colors into Framer's native color styles.

Perfect for:

Designers migrating existing projects to Framer
Teams maintaining consistent color systems across platforms
Developers who want to use their CSS variables in Framer
Anyone working with established design systems or component libraries

Supported CSS Features

Color Formats: Hex (#RGB, #RRGGBB, #RRGGBBAA), RGB/RGBA, HSL/HSLA, named colors
CSS Variables: `var(--color-name)` with fallback support
Dark Mode: `@media (prefers-color-scheme: dark)`, `.dark-mode`, `[data-theme="dark"]`
Naming Conventions: Configurable prefix stripping (e.g., remove "tw-" from Tailwind colors)

52:T96f,

Radix Color Importer for Framer

A powerful plugin that gives you instant access to the professional-grade Radix Colors system (by WorkOS, https://www.radix-ui.com/colors) that enhances your design workflow and ensures accessibility.

What are Radix Colors?

Radix Colors is a sophisticated color system created by the UI experts at WorkOS (makers of Radix UI). This system offers:

Accessibility first: Colors designed to meet contrast standards
Complete design system: 30 color scales with 12 carefully calibrated steps each
Automatic dark mode: Built-in light/dark mode pairings for all colors
Scientific approach: Colors derived using color science principles
Transparency options: Alpha versions of all colors for versatile design

Features

🎨 Complete palette: Import all color scales with their variations
🌓 Light/dark mode ready: Colors automatically adapt to theme changes
🔍 Live preview: See how colors look in your current Framer theme
✅ Flexible selection: Choose exactly which colors to import
🧠 Smart organization: Intuitive naming for easy access (e.g., "Radix/blue10")

How to Use

Install the plugin from the Framer Marketplace
Open the plugin from the main toolbar
Select between solid colors or alpha (transparency) colors
Choose individual colors or entire color families
Click "Import" to add the selected colors to your project's color styles

Why Use This Plugin?

This plugin eliminates hours of manual color setup work. Instead of creating color styles one by one, you get immediate access to a professional color system used by top designers worldwide.

Perfect for:

Designers starting new projects who need a reliable color foundation
Teams wanting consistent colors across light and dark modes
Anyone looking to upgrade their design system with accessible, well-crafted colors

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-81de3965-3604-4f0a-93e5-d510919d79f2-all:/unified/creator/81de3965-3604-4f0a-93e5-d510919d79f2/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:81de3965-3604-4f0a-93e5-d510919d79f2:/unified/posts/?creator=81de3965-3604-4f0a-93e5-d510919d79f2&with=reposts":[{"data":[{"id":"0198f762-87d8-76f9-9392-3d8f4cfa5856","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"81de3965-3604-4f0a-93e5-d510919d79f2","name":"Matt Theuma","slug":"matt-theuma","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/288252/avatar-LckOl6Q3t2rp69lUZfGlSNQe6rIQZQ.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"489","resolved":true,"title":"CSS Color Importer","body":"$51","bodyJson":null,"introduction":"CSS Color Importer","slug":"css-color-importer","author":{"framerUserId":"81de3965-3604-4f0a-93e5-d510919d79f2","name":"Matt Theuma","slug":"matt-theuma","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/288252/avatar-LckOl6Q3t2rp69lUZfGlSNQe6rIQZQ.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/489-rZsLpC1OwgiCVtfZQJQb3zWDwpTjm3","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/489-b22Iw9XXAf2Es1xyueIgnQryUkpPGE","metadata":{"tint":{"h":240,"s":93,"l":30},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/489-8xoNLiI71dc2SaLZacAGp0RgoWDxM5","metadata":{"tint":{"h":240,"s":93,"l":30},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-27T21:32:36.323Z","updatedAt":"2025-08-27T21:32:39.746Z","publishedAt":"2025-08-29T19:51:26.424Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"1sp88fhr8ov6uho8ncyle6yb2","paid":false,"categories":[{"id":"b238ea64-0ce9-413a-848d-43b73f0eea0f","name":"Styles","slug":"styles"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-29T19:51:26.424Z","updatedAt":"2025-08-29T19:51:26.424Z"},{"id":"01959431-5e45-78a0-9d6e-dc46702dc04e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"81de3965-3604-4f0a-93e5-d510919d79f2","name":"Matt Theuma","slug":"matt-theuma","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/288252/avatar-LckOl6Q3t2rp69lUZfGlSNQe6rIQZQ.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"259","resolved":true,"title":"Radix Colors","body":"$52","bodyJson":null,"introduction":"Import Radix Colors with ease","slug":"radix-colors","author":{"framerUserId":"81de3965-3604-4f0a-93e5-d510919d79f2","name":"Matt Theuma","slug":"matt-theuma","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/288252/avatar-LckOl6Q3t2rp69lUZfGlSNQe6rIQZQ.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/259-s97gmc60x5C1gGpCtUrNRyxGJzWul3","metadata":{"tint":{"h":180,"s":26,"l":49},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/259-ZtqEqHvaHZDkLrD7HauNruNWIBvDMQ","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/259-QFSfp15hb9SQsHxJ9BrGsJtUviPaVF","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-03-02T13:10:27.753Z","updatedAt":"2025-03-02T13:10:27.751Z","publishedAt":"2025-03-14T10:26:58.245Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"vz8fyqnluzge7yj7n61j9lr8t","paid":false,"categories":[{"id":"b238ea64-0ce9-413a-848d-43b73f0eea0f","name":"Styles","slug":"styles"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-03-14T10:26:58.245Z","updatedAt":"2025-03-14T10:26:58.245Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]