About 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.
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)
