Primitive & Semantic colors Generator

About this plugin

Color System Generator

Create, manage, and document comprehensive color systems with ease. Perfect for design systems, brand guidelines, and maintaining color consistency across projects.

Key Features:

1. Smart Color Generation: Automatically generate harmonious color scales from a single primary color
2. Dark Mode Support: Create and sync dark mode variants with one click
3. Semantic Color System: Build semantic color tokens (primary, secondary, neutral, etc.) mapped to your base colors
4. Live Preview: See your color system in action with an interactive UI mockup
5. Documentation Export: Generate beautiful, comprehensive color documentation directly in Figma
6. Multiple Export Formats: Export your color system as CSS variables, SCSS, or JSON
7. Preset Libraries: Quick-start with popular color systems like Material Design, Apple Design, and Tailwind

Perfect for:

1. Design System Teams
2. UI/UX Designers
3. Brand Designers
4. Frontend Developers
5. Design Ops

How It Works:

1. Choose a primary color
2. Adjust tint/shade generation settings
3. Enable dark mode if needed
4. add semantic color mapping

Preview in real-time

Generate variables and documentation

Create professional color systems in minutes instead of hours. Maintain consistency across your design system while ensuring accessibility and visual harmony.