CSS Color Importer for Framer

Import your CSS color system into Framer as color styles, preserving design tokens.

Features

• Smart Color Detection: Extracts color values from CSS.
• Dark Mode Support: Handles light/dark variants from media queries and CSS classes.
• Flexible Input: Upload CSS files or paste content.
• Intelligent Parsing: Supports hex, RGB, HSL, named colors, and CSS variables.
• Smart Organization: Groups colors by prefix, maintaining naming conventions.
• Customizable Options: Merge light/dark variants or keep them separate.
• Selective Import: Choose which colors to import.
• Persistent Settings: Remembers preferences.

How to Use

1. Install the plugin.
2. Upload your CSS file or paste content.
3. Preview extracted colors.
4. Configure options.
5. Select colors to import.
6. Import to create Framer color styles.

Why Use This Plugin?

Stop recreating your color system. Convert your existing CSS colors into Framer's native color styles. Perfect for:

• Designers migrating projects to Framer.
• Teams maintaining consistent color systems.
• Developers using CSS variables in Framer.
• Anyone working with established design systems.

Supported CSS Features

• Color Formats: Hex, 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.