CSS Color Importer
A powerful plugin that converts CSS colors to Framer color styles, maintaining design tokens and making color extraction and import easy.
A powerful plugin that converts CSS color systems into Framer color styles, making them instantly accessible while preserving design tokens.
What is CSS Color Importer?
CSS Color Importer bridges the gap between your CSS workflow and Framer design systems. It extracts and imports colors while maintaining meaning and structure.
Main Features
Smart Color Detection: Automatically identifies and extracts all color values from CSS files
Dark Mode Support: Handles light/dark mode variations via media queries, CSS classes, and data attributes
Flexible Input Methods: Supports CSS file uploads or direct pasting of CSS content
Intelligent Parsing: Supports hex, RGB, HSL, named colors, and CSS variables with fallbacks
Smart Organization: Groups colors by prefix and maintains naming conventions
User-Customizable Options: Choose to merge or maintain separate light/dark variations
Selective Import: Precisely choose which colors to import into your Framer project
Save Settings: Remembers your preferred settings for future imports
How to Use
Install the plugin from the Framer Marketplace
Upload a CSS file or paste CSS content
Preview extracted colors and light/dark variations
Configure options like prefix removal and variation merging
Select colors to import
Instantly import into Framer color styles
Why Use This Plugin?
No need to recreate color systems from scratch. This plugin smartly converts existing CSS colors into Framer's native color styles, saving hours of design work.
This plugin is perfect for:
Designers migrating existing projects to Framer
Teams maintaining consistent color systems across platforms
Developers wanting to use CSS variables in Framer
Anyone using existing design systems or component libraries
Supported CSS Features
Color Formats: Hex (#RGB, #RRGGBB, #RRGGBBAA), RGB/RGBA, HSL/HSLA, specified colors
CSS Variables: With fallback support,
var(--color-name)Dark Mode:
@media (prefers-color-scheme: dark),.dark-mode,[data-theme="dark"]Naming Conventions: Option to remove prefixes (e.g., removing "tw-" from Tailwind colors)
Explore More Plugins