Palettes and Presets | Petals Docs

Creating Palettes

There are several ways to create a new palette:

Add a palette button. When no palette is loaded, click the “Add a palette” button in the floating toolbar. Petals generates a 6-color palette with a bloom animation.
Create new button. Click the plus icon in the top bar to create a new palette without closing the current one. The previous palette is saved automatically.
Import. Open the preset viewer and click the import button to create a palette from pasted colors.
Extract from composition. Use the More menu to extract colors from existing layers (see Functions Reference).

New palettes are named automatically using the prefix configured in settings (default: “Palette 1”, “Palette 2”, etc.). Rename any palette by clicking its name in the top bar.

Project vs Library

Palettes live in one of two scopes:

Project palettes are saved with the current After Effects or Illustrator project file. They can be linked to layers in compositions. When you switch projects, you see that project’s palettes.

Library palettes are stored globally on your machine and appear in every project. They serve as templates. To use a library palette, click it in the preset viewer to copy it into the current project.

Preset Viewer

Open the preset viewer by clicking the folder icon in the top bar. It shows two sections:

Project Section

Lists all palettes saved in the current project, newest first. Each card shows a color bar and the palette name. A link icon appears next to palettes that have active expressions in the current composition.

Hover a card to reveal actions: rename, save to library, export, duplicate, and delete.

Library Section

Lists all global library palettes. Click a library palette to copy it into the project and load it immediately.

Hover a card to reveal actions: add to project, rename, export, duplicate, and delete.

Importing Palettes

Click the import button (download icon) in the preset viewer header. The import modal accepts multiple formats:

Hex codes separated by commas, spaces, or newlines (#ff6b6b, #4ecdc4, #45b7d1)
Coolors URLs (coolors.co/ff6b6b-4ecdc4-45b7d1)
CSS custom properties or any text containing 6-digit hex values

Petals parses the input, shows a preview of the detected colors, and creates a new project palette on import. Palettes are capped at 19 colors; extra colors are trimmed.

Import palette modal with a text field showing pasted hex codes and a row of parsed color swatches.

Exporting Palettes

Hover a palette card in the preset viewer and click the export (share) button. The export modal offers multiple formats:

Copy URL generates a shareable Petals palette link.
HEX copies comma-separated hex codes to the clipboard.
CSS copies CSS custom properties using the palette name as a prefix.
Tailwind copies a Tailwind CSS config snippet.
PNG exports a 1600x900 palette image with color bars and hex labels.
PDF exports a vector PDF with full-bleed color strips.
ASE exports an Adobe Swatch Exchange file for use in Photoshop, Illustrator, or other Adobe apps.
X / Pinterest opens a share dialog for social media.

File exports (PNG, PDF, ASE) are saved to the export folder configured in settings (default: Desktop). The folder opens automatically after export unless disabled in settings.

Export modal showing a color swatch strip and a grid of export format buttons: URL, HEX, CSS, PNG, PDF, ASE, Tailwind, X, Pinterest.

Auto-Loading

When you open Petals, it automatically loads the most recently used palette that has active links in the current composition. If no linked palette is found, it loads the most recently used project palette. If no project palettes exist, Petals starts in the empty state.