Export and Integration

Supa Colors Studio supports exporting your color palettes in multiple formats, making it easy to integrate with your design tools, frameworks, and development workflows.

All exports maintain color accuracy and include proper formatting for each target platform. You can export individual palettes or entire collections.

Export colors as CSS custom properties or SCSS variables for use in your stylesheets. Perfect for modern CSS workflows and Sass/SCSS projects.

CSS Variables:

:root {
  --color-blue-50: oklch(97% 0.01 250);
  --color-blue-100: oklch(94% 0.02 250);
  --color-blue-500: oklch(65% 0.18 250);
  --color-blue-900: oklch(25% 0.12 250);
}

SCSS Variables:

$blue-50: oklch(97% 0.01 250);
$blue-100: oklch(94% 0.02 250);
$blue-500: oklch(65% 0.18 250);
$blue-900: oklch(25% 0.12 250);

Export colors in Tailwind CSS configuration format. Ready to paste into your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          50: 'oklch(97% 0.01 250)',
          100: 'oklch(94% 0.02 250)',
          500: 'oklch(65% 0.18 250)',
          900: 'oklch(25% 0.12 250)',
        },
      },
    },
  },
}

Export colors as TypeScript objects with type safety. Perfect for TypeScript projects and design system libraries.

export const colors = {
  blue: {
    50: 'oklch(97% 0.01 250)',
    100: 'oklch(94% 0.02 250)',
    500: 'oklch(65% 0.18 250)',
    900: 'oklch(25% 0.12 250)',
  },
} as const;

Export colors in standard design token formats for use with design system tooling and automation. Supa Colors Studio supports multiple token formats:

• W3C Design Tokens (DTCG): Emerging standard JSON format for design tokens that ensures interoperability across different tools and platforms. Compatible with tools like Style Dictionary and Tokens Studio. Includes proper type definitions and metadata.
• Style Dictionary: Amazon Style Dictionary format widely used in enterprise design systems. Transforms design tokens into platform-specific formats and supports multi-platform token distribution.
• Tokens Studio: Tokens Studio (formerly Figma Tokens) format compatible with Tokens Studio for Figma plugin and other design token tools. Maintains relationships between tokens and supports advanced features like aliases and references.

Export colors as Figma Variables JSON. Import directly into Figma using the Variables feature for seamless design-to-code workflows.

Figma Variables format ensures your colors are available as variables in Figma, maintaining consistency between design and development.

Export palettes as SVG files with visual color swatches. Perfect for documentation, presentations, and sharing color palettes visually.

SVG exports include color names, values, and visual swatches arranged in a clean, printable format.