CSS Color Importer

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.

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)

CSS Color Importer