---
title: "CSS Color Importer — Free Framer plugin · Best of Framer"
description: "Free Framer plugin · by Matt Theuma · Styles. CSS Color Importer for Framer A powerful plugin that transforms your CSS color system into Framer color styles, preserving design tokens and making…"
canonical: "https://framer.elliotli.dev/plugin/css-color-importer"
---

[Home](/)/[Plugins](/plugins)/[Styles](/plugins/category/styles)/CSS Color Importer

# CSS Color Importer

CSS Color Importer

[View on Framer](https://framer.com/marketplace/plugins/css-color-importer/?via=elliot-li)

![CSS Color Importer preview image 1](https://framer.elliotli.dev/og/plugin/css-color-importer/408f5d26015cc49c/1600x1200.jpg)

## Summary

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.

## Description

## 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

1.  **Install** the plugin from the Framer Marketplace
    
2.  **Upload** your CSS file or paste CSS content
    
3.  **Preview** extracted colors with their light/dark variants
    
4.  **Configure** options like prefix stripping and variant merging
    
5.  **Select** the colors you want to import
    
6.  **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)
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #445

## Details

- **Author**: Matt Theuma
- **Published**: 2025-08-29
- **Updated**: 2025-08-27
- **Added**: 2025-08-27
- **Categories**: Styles

## More like this

-   [Sealcraft](/plugin/sealcraft) — Cyedi Creative Studio · Free — Badges, stamps and spinning seals
-   [Divider Lab](/plugin/divider-lab) — ANASS TB · Free — Shape dividers for clean sections
-   [Tablecraft](/plugin/tablecraft) — ANASS TB · Free — Paste rows, get a designed table
-   [Cookiewall](/plugin/cookiewall) — ANASS TB · Free — Cookie banners, done in seconds