Palette Studio

Import, edit, and export palettes across Procreate, Adobe, and GIMP formats.
Open Web App • Download Desktop

Available for web, Windows, macOS, and Linux

Highlights

• Import .swatches, .ase, and .gpl palettes.
• Generate palettes by style (analogous, complementary, triadic, etc.) with optional base colors.
• Edit colors, rename, reorder by drag-and-drop, and switch between HEX/RGB/HSB/HSL/CMYK/LAB views.
• Export single or batch palettes to ASE, Swatches, and GIMP GPL (zip downloads for multi-export).
• Quick exports for PNG, PDF, CSS variables, Tailwind config, SVG, JSON, and embed snippets.
• Share palettes via URL (Coolors, X, Pinterest) and import from shared links.
• Preferences and palettes are stored locally in the browser/desktop app.

Example

Go to the examples folder to see some converted palettes like this one:

Source palette

Converted palette imported in Photoshop

GUI (Web + Desktop)

The project now includes a cross-platform GUI that runs in the browser (GitHub Pages compatible) and as a desktop app for Windows, macOS, and Linux.

Web

• Install dependencies with npm install.
• Start the dev server with npm run dev:web.
• Build a static site with npm run build:web (output: dist-web).
• Preview the static build with npm run preview:web.
• Upload .swatches, .ase, or .gpl palette files.
• Generate new palettes, edit names/colors, and reorder swatches.
• Export single palettes or batch export as ASE/Swatches/GPL.
• Use quick exports for images, PDF, CSS, Tailwind, SVG, JSON, embed snippets, or share URLs.

Desktop

• Run npm run dev:desktop to launch the Electron app with hot reload.
• Build the desktop bundle with npm run build:desktop (outputs: dist-electron, dist-web).
• Build installers with npm run dist:desktop (outputs: release).
• Desktop mode uses the same drag-and-drop workflow and saves zip exports via a native dialog.

CLI

Be sure to have Node.js 22+ installed, then:

• Download or clone the repo.
• Run npm install in the root folder to install dependencies.
• Add your palette files (.swatches, .ase, .gpl) in the palette-in folder.
• Run npm run convert to convert the palettes into the formats you choose.
• The converted files should be in the palette-out folder.

Configuration (CLI)

The input/output folders, color naming, and optional black & white colors can be changed in: config.json

Configuration parameters

• inFolder: folder used to read the palette files.
• outFolder: folder used to output the converted palettes.
• outFormats: output formats as an array or comma-separated string. Use ase, swatches, gpl, or all. Defaults to ase.
• colorNameFormat: sets the collection of color names to be used. Available namings are: roygbiv, basic, html, x11, pantone, ntc. See color namer for reference.
• addBlackWhite: if true, two extra colors will be added:

Converted palette with extra black and white colors imported in Photoshop

Tests

• Run unit tests with npm test.
• Run coverage with npm run test:coverage.
• Run GUI tests with npm run test:gui (installs Playwright as needed).

Credits

Source of the provided palettes:

https://bardotbrush.com/procreate-color-palettes/

Libraries used

• https://github.com/szydlovski/procreate-swatches
• https://www.npmjs.com/package/color-convert
• https://github.com/colorjs/color-namer
• https://stuk.github.io/jszip/