Color Palette Exporter
Build a custom palette and export it as CSS variables, SCSS, JSON, Tailwind config, SVG, or PNG.
Load preset
Colors (6/16)
My Palette
Indigo
#6366f1
Violet
#8b5cf6
Pink
#ec4899
Emerald
#10b981
Amber
#f59e0b
Blue
#3b82f6
Export
:root {
--color-indigo: #6366f1;
--color-violet: #8b5cf6;
--color-pink: #ec4899;
--color-emerald: #10b981;
--color-amber: #f59e0b;
--color-blue: #3b82f6;
}How to Use the Palette Exporter
- 1.Start by loading a preset palette or name your palette and add swatches from scratch.
- 2.Click any swatch to open a color picker and change its color. Edit its name for meaningful variable names.
- 3.Add up to 16 swatches with the + Add Color button.
- 4.Choose an export format: CSS Variables, SCSS, JSON, Tailwind Config, SVG, or PNG.
- 5.Click Copy or Download to get your palette in the chosen format.
What are Color Palette Exports?
A palette export converts your set of chosen colors into a format your codebase or design tools can consume directly. CSS custom properties (--color-primary: #6366f1) are the most versatile web format - defined once in :root, they cascade to every element and can be updated with JavaScript for dynamic theming. SCSS variables work similarly for Sass-based projects. JSON exports represent design tokens - a format compatible with tools like Style Dictionary, Figma Tokens, and Amazon Style Dictionary for cross-platform design systems. Tailwind config exports let you add named colors directly to theme.extend.colors, making them available as Tailwind utilities. SVG exports create a visual swatch card you can share or embed. PNG exports let you save a visual reference of your palette as an image file.
Frequently Asked Questions
How do I import a CSS variable palette into a project?
Copy the CSS export and paste it inside a :root { } block in your global stylesheet. Then use the variables throughout your CSS: background: var(--color-primary). They work in any browser that supports CSS custom properties (all modern browsers).
Can I import this palette into Figma?
Use the JSON export with a Figma plugin like Figma Tokens or Variables Importer to import your palette as local variables or styles. SVG exports can be placed directly as reference swatches in any Figma file.
What is the difference between CSS variables and SCSS variables?
CSS custom properties (--var: value) are resolved at runtime in the browser and can be changed dynamically with JavaScript. SCSS variables ($var: value) are compiled at build time and cannot be changed after compilation - but SCSS offers powerful functions like lighten() and darken() for palette manipulation during development.