The KColor Figma Plugin brings your palette workflow directly into Figma, allowing you to generate, import, export, and inspect color palettes without ever leaving the design environment.
Accessing the Plugin
To get started, launch the plugin from the Figma plugin menu or via the right-click context menu. Once open, you’ll see your current palette, along with quick access tools at the bottom of the plugin window.
Open Figma plugin
Available Tools
- Export Palette: Copy or download your palette in multiple formats (e.g., CSS, SCSS, Tailwind).
- Import Palette: Paste comma-separated hex values to bring an existing palette into the plugin.
- Export As Variables: Turn your colors into Figma variables for seamless design system use.
- Export As Styles: Generate and apply Figma paint styles from your color set.
- Send to Canvas: Instantly place your palette as a row of color rectangles into your Figma file.
- Text Contrast Checker: Check WCAG contrast compliance for your color pairings.
- Accessibility: Additional tools to ensure color accessibility and clarity.
Generation Modes
Use the generation dropdown to explore different palette types:
- Auto: Generates a balanced palette automatically.
- Tints: Lighter variations of the base color.
- Shades: Darker tones for UI states and depth.
- Monochrome: Single-hue palettes for minimalist design.
- Gradient: Smooth transitions between two base colors.
- Tailwind: Generates a Tailwind-style scale based on your base color.
Best Practices
Once you’ve finalized a palette, export it as styles or variables to streamline your design system. Use the contrast tools to ensure accessibility and test variants in the canvas directly.
Next Steps
Try experimenting with different generation modes to find the best fit for your brand or project. Then export your selections and integrate them across your Figma file with a single click.