https://github.com/joanroig/palette-studio
🖌️ Palette Studio lets you import, edit, and export color palettes across Procreate swatches, Adobe ASE, and more on web, desktop, and CLI. Previously known as "Swatches to ASE".
https://github.com/joanroig/palette-studio
adobe affinity affinity-designer ase color-palette colors designer github-pages illustrator palette photoshop procreate swatch swatches webapp
Last synced: 4 months ago
JSON representation
🖌️ Palette Studio lets you import, edit, and export color palettes across Procreate swatches, Adobe ASE, and more on web, desktop, and CLI. Previously known as "Swatches to ASE".
- Host: GitHub
- URL: https://github.com/joanroig/palette-studio
- Owner: joanroig
- License: gpl-3.0
- Created: 2021-09-14T17:13:36.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2026-01-30T22:31:49.000Z (4 months ago)
- Last Synced: 2026-01-31T11:57:11.354Z (4 months ago)
- Topics: adobe, affinity, affinity-designer, ase, color-palette, colors, designer, github-pages, illustrator, palette, photoshop, procreate, swatch, swatches, webapp
- Language: TypeScript
- Homepage: https://joanroig.github.io/palette-studio/
- Size: 1.13 MB
- Stars: 41
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://nodejs.org/en/download/) 22+ installed, then:
- [Download](https://github.com/joanroig/palette-studio/archive/refs/heads/main.zip) 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](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](https://github.com/colorjs/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/