Skip to main content
Press E to open the export dialog. Formats are split into two categories: code formats you copy or download for use in a codebase, and art app formats you import directly into design software.
E is context-aware. In the gradient view it opens the gradient export. In the palette view it opens the palette export described on this page.

​
Code formats

Code formats produce text output. You can copy the text to the clipboard or download it as a file.

​
CSS Variables

Extension: .css Generates a :root block with numbered custom properties, one per color: 
:root {
  --color-1: #ff5733;
  --color-2: #3498db;
  --color-3: #2ecc71;
}
Use these properties anywhere in your stylesheet with var(--color-1).

​
JSON

Extension: .json Outputs a simple JSON object with a colors array: 
{
  "colors": [
    "#ff5733",
    "#3498db",
    "#2ecc71"
  ]
}
Useful for piping into build tools, design tokens pipelines, or any script that consumes structured data.

​
Tailwind Config

Extension: .js Generates a full tailwind.config.js snippet with your colors registered under theme.extend.colors: 
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'color-1': '#ff5733',
        'color-2': '#3498db',
        'color-3': '#2ecc71'
      }
    }
  }
}
Copy this into your project’s Tailwind config (or merge it with an existing one) to use classes like bg-color-1 or text-color-2.

​
SCSS Variables

Extension: .scss Outputs one Sass variable per color: 
$color-1: #ff5733;
$color-2: #3498db;
$color-3: #2ecc71;
Import the file into your SCSS project with @use or @import to reference the variables throughout your stylesheets.

​
Art app formats

Art app formats produce binary or structured files you import directly into design and illustration software. Each format has a download button — copy-to-clipboard is not available for binary files.
Adobe Swatch Exchange is a binary format compatible with the Adobe Creative Suite and several third-party apps.Compatible apps: Photoshop, Illustrator, Clip Studio PaintImport in Photoshop / Illustrator:
1

Download the .ase file

Click the download button in the export dialog.
2

Open the Swatches panel

Go to Window > Swatches.
3

Import the file

Click the panel menu and choose Import Swatches (or Open Swatch Library > Other Library), then select your .ase file.
Import in Clip Studio Paint:
1

Download the .ase file

Click the download button in the export dialog.
2

Open the Color Set panel

Go to Window > Color Set.
3

Import the color set

Click Import color set in the panel menu and select your .ase file.
Adobe Color Swatch is Photoshop’s native swatch format. The exported file uses the ACO version 2 format, which includes color names (Color 1, Color 2, etc.) stored as UTF-16BE strings alongside the RGB values.Compatible apps: PhotoshopImport steps:
1

Download the .aco file

Click the download button in the export dialog.
2

Open the Swatches panel

Go to Window > Swatches.
3

Load the swatches

Click the panel menu and choose Import Swatches, then select your .aco file.
The .swatches file is a ZIP archive containing a Swatches.json file. Colors are stored in HSB (hue, saturation, brightness) format as required by Procreate.Compatible apps: Procreate (iPad / iPhone)Import steps:
1

Download the .swatches file

Click the download button in the export dialog. Save it to the Files app on your iPad or iPhone.
2

Open the Colors panel in Procreate

Tap Colors (the circle icon in the top-right corner).
3

Import the palette

Tap Palettes, then tap + and choose New from file. Select your .swatches file.
The .gpl format is a plain-text palette file supported by GIMP and Krita. Each color is stored as an RGB triplet followed by the hex value.Compatible apps: GIMP, KritaImport in GIMP:
1

Download the .gpl file

Click the download button in the export dialog.
2

Place the file in the GIMP palettes folder

Copy the .gpl file to ~/.config/GIMP/palettes/ on Linux/macOS, or the equivalent GIMP\palettes\ folder on Windows.
3

Restart GIMP

Reopen GIMP to load the new palette.
4

Find the palette

Go to Windows > Dockable Dialogs > Palettes and locate your palette by name.
Import in Krita:
1

Download the .gpl file

Click the download button in the export dialog.
2

Open the resource folder

Go to Settings > Manage Resources > Open Resource Folder.
3

Place the file

Copy the .gpl file into the palettes/ subfolder.
4

Restart Krita

Reopen Krita for the palette to appear in the palette docker.
Paint.NET palettes are plain text files with one AARRGGBB hex value per line. AA is the alpha channel (FF = fully opaque). Comment lines start with ;.Compatible apps: Paint.NETImport steps:
1

Download the .txt file

Click the download button in the export dialog.
2

Place the file in the palettes folder

Copy the .txt file to Documents/Paint.NET User Files/Palettes/.
3

Restart Paint.NET

Reopen Paint.NET. The palette appears in the palette list.

​
Image export (PNG / SVG)

In addition to code and art app formats, you can export a visual image of your palette. Press E in the palette view to open the export dialog, then switch to the image tab.

​
Layout options

LayoutDescription
HorizontalColor bars side by side in a single row
VerticalColor bars stacked in a single column
GridColors arranged in a square-ish grid
CirclesCircular swatches arranged in rows of up to 5

​
Label options

OptionDescription
NoneNo labels on the image
HexShows the hex value on each color
NamesShows the nearest color name on each color

​
Size options

SizeWidth
Small800 px
Medium1200 px
Large1920 px
Export as PNG (raster, Canvas API) or SVG (vector, scales without loss).

​
Related

Export formats reference

Technical details for every supported export format.

Saving palettes

Save palettes to your browser library and organize with collections and tags.

Sharing palettes

Copy a URL that encodes your palette and share it directly.

Keyboard shortcuts

Full shortcut reference including E for export.

Build docs developers (and LLMs) love

Get started for freeTalk to us