Customize, spec, and instantly output palette source formats for standard code systems.
Best for programmatic use
Modern web standards
Ready for your theme
palette-export.json{
"name": "Oceanic Lab",
"colors": [
{
"name": "deep-navy",
"hex": "#001E2C",
"rgb": [0, 30, 44],
"hsl": [199, 100, 9]
},
{
"name": "sky-blue",
"hex": "#40C2FD",
"rgb": [64, 194, 253],
"hsl": [199, 98, 62]
},
{
"name": "off-white",
"hex": "#F7F9FB",
"rgb": [247, 249, 251],
"hsl": [210, 33, 98]
}
]
}The Palette Exporter bridge the gap between creative visual design and production code engineering. Transform custom color palettes instantly into clean, structured code snippets — formatted for Tailwind CSS configurations, CSS custom properties, JSON token catalogs, SCSS variables, and SVG visual spec sheets.
Export ready-to-paste tailwind.config.js theme objects. Automatically maps your Hex swatches to functional utilities like bg-brand-primary, text-brand-accent, and border-surface.
Generates vanilla CSS root variables (--color-primary: #1b31e7;) compatible with native CSS, Next.js, Vue, and Web Component stylesheets. Ideal for instant dark mode dynamic theme toggling.
Outputs structured W3C-compliant JSON token trees containing Hex, RGB, HSL, and human-readable swatch names — perfectly formatted for Style Dictionary pipelines and cross-platform mobile apps.
Download standalone vector SVG swatch cards with crisp color blocks and embedded Hex labels — ideal for client design handoff decks, brand guidelines PDFs, and documentation.
Primitive tokens store exact color values (e.g. --blue-500: #1b31e7). Semantic tokens map primitive values to interface roles (e.g. --button-bg: var(--blue-500)). This decouples visual design choices from component implementation.
Always verify that your background and foreground text tokens meet WCAG 2.1 AA standards (minimum 4.5:1 ratio). Pair dark text tokens with high-lightness surface tokens, and test active button states against focus ring colors.
Copy the generated Tailwind config object and paste it inside the theme.extend.colors block of your tailwind.config.js file. You can then instantly use class names like bg-custom-primary.
Yes! Copy the JSON token output and import it directly into Figma using popular token management plugins such as Tokens Studio (Figma Tokens) or native Variables importer.