TFT

Palette Export Tool

Export your color palette as CSS variables, JSON, or plain text. Seamlessly transfer your colors into code, design tools, or documentation.

Color Palette
Add and name your colors
#
#
#
#
#
#
Export Formats
Choose your preferred format and copy or download
:root {
  --primary: #3B82F6;
  --secondary: #8B5CF6;
  --accent: #F59E0B;
  --success: #10B981;
  --danger: #EF4444;
}
Palette Preview

Primary

#3B82F6

Secondary

#8B5CF6

Accent

#F59E0B

Success

#10B981

Danger

#EF4444

Related Color Tools

CSS Variables Generator

Generate CSS custom properties

Extract Colors from Image

Get colors from images

Color History Tool

Track recently used colors

Favorite Colors Manager

Save and organize colors

What This Tool Exports

You paste or enter a color palette (2-20 colors), and this tool converts it into ready-to-use code for your specific tech stack. Choose from CSS, SCSS, JSON, Tailwind, plain text, SwiftUI, or Android XML formats.

Supported Export Formats

CSS Variables

--color-1: #3B82F6;
--color-2: #10B981;

Use with var(--color-1) in any CSS property.

SCSS Variables

$color-1: #3B82F6;
$color-2: #10B981;

Import into Sass/SCSS projects.

JSON

{"color1": "#3B82F6",
"color2": "#10B981"}

Import into JavaScript or design tools.

Tailwind Config

colors: {
  brand1: '#3B82F6',
  brand2: '#10B981',
}

Extend Tailwind's theme.colors.

SwiftUI

Color(hex: "3B82F6")
Color(hex: "10B981")

iOS app color definitions.

Android XML

<color name="color1">#3B82F6</color>
<color name="color2">#10B981</color>

colors.xml for Android apps.

How to Import Palettes

Paste colors in any common format. The tool recognizes:

  • Comma-separated hex codes: #3B82F6, #10B981, #F59E0B
  • CSS variables: --primary: #3B82F6; --secondary: #10B981;
  • SCSS variables: $primary: #3B82F6; $secondary: #10B981;
  • JSON arrays: ["#3B82F6", "#10B981"]
  • Figma clipboard format (paste directly from Figma)
  • CSS gradient definitions: linear-gradient(#3B82F6, #10B981)

Real Use Cases

Design Handoff to Development

A designer exports a palette from Figma, pastes it here, and generates CSS variables. The developer copies the output directly into the project's global stylesheet.

Cross-Platform Brand Consistency

A brand team generates exports for web (CSS), iOS (SwiftUI), and Android (XML) from the same palette. All platforms use identical brand colors.

Tailwind Project Setup

A developer extracts colors from a design, pastes them here, and exports as Tailwind config. They merge it into tailwind.config.js and start using custom colors immediately.

Design System Documentation

A team documents their color palette as JSON for their design system docs site. The same JSON powers both the documentation and the actual implementation.

Frequently Asked Questions

How many colors can I export?

There's no hard limit, but 5-15 colors is typical for a palette. Very large palettes (50+ colors) might be unwieldy in code.

Can I name my colors?

This tool uses generic names (color-1, color-2). For custom names, use the Favorite Colors Manager or add names manually after exporting.

Does this work with RGBA/HSLA colors?

Yes, the tool preserves alpha channels in formats that support them (CSS, SCSS). JSON exports include the full color string.

How do I use the Tailwind export?

Copy the output and paste it into the theme.extend.colors section of your tailwind.config.js. Then use classes like bg-brand-1 or text-brand-2.

Can I export palettes from other tools?

Yes, paste palettes from Figma, Coolors, Adobe Color, or any source. As long as the colors are in a recognizable format, this tool can convert them.

What if I need to edit colors after exporting?

Re-paste your edited palette and export again. For ongoing management, use the Favorite Colors Manager or Color History Tool to store palettes between sessions.

Tips for Clean Exports

Remove unused colors first. A palette with 20 colors might have 5 you don't actually use. Trim before exporting to keep code clean.

Group related colors. Put all primary shades together, all neutrals together. The export order matches your input order.

Use consistent naming in your source. If pasting from CSS variables, use consistent prefixes (--brand-, --ui-) for easier refactoring later.

Save your exports. Copy the output to a file immediately. It's easy to lose generated code if you navigate away.

Other Free Color Tools

Favorite Colors Manager

Save, organize, and manage your favorite color swatches locally in the browser. Build a personal color library without signing up for anything.

Color Palette Merger

Merge two or more color palettes into a single unified palette. Useful for combining brand colors, theme tokens, and design system libraries.

CSS Variables Generator from Color Palette

Convert your color palette into ready-to-use CSS custom properties. Generate a clean :root variable block for any design system or theme.

Custom Color Palette Generator

Create beautiful, harmonious color palettes for your projects.

Color Picker

Pick any color using an interactive palette or enter HEX, RGB, or HSL values. Copy your color code instantly for use in any design or development project.

Color Palette Generator from Base Color

Generate a beautiful, harmonious color palette from a single base color. Perfect for building consistent UI color schemes and brand identities.