Build palettes that can do a job

How palette generation works

Palette Studio uses the current palette as a visual reference, then produces a new five-color result according to the selected harmony and variation. Every unlocked color can change, including the first swatch.

The generator retries when necessary so an unlocked first swatch does not coincidentally reproduce the same hex. Mathematical relationships guide the result, but each generation includes controlled variation so repeated clicks produce meaningfully different combinations.

Choose a harmony mode

Harmony names describe hue relationships, not accessibility or role. A harmonious pair may still have very low contrast.

Control the style with variations

Monochromatic generation uses broad tonal bands within each variation. It no longer returns one fixed five-step recipe: repeated generation produces different lightness and saturation combinations while staying within the same hue family.

Use locks deliberately

• Lock a swatch when it must survive the next generation.
• Unlocked swatches are free to change regardless of position.
• If a locked swatch is moved, its lock moves with it.
• If every swatch is locked, generation stops and asks you to unlock at least one color.

Add colors without replacing the palette

Use Add to Palette from the active-color header menu, Search, Collections, or supported bulk actions.

• The newest color enters slot one.
• Existing colors shift one place to the right.
• The oldest overflow color drops off after the fifth slot.
• If the color already exists, it moves to the front instead of being duplicated.
• Any lock attached to an existing color stays attached as that color moves.
• Adding several selected colors preserves their selected order at the front of the palette.

Edit and reorder the five swatches

Each swatch includes an editable hex field, lock control, and left/right movement buttons. You can also drag a card to another position.

• Use slot order to reflect priority or token order.
• Place the main action color early when exporting numbered variables.
• Keep surfaces, text, and borders in predictable positions when collaborating.
• Reordering changes previews and export order but does not alter the colors themselves.

Read the previews and contrast matrix

The light and dark interface previews apply palette colors to surfaces, text, and buttons. They are quick context checks, not a complete component audit.

The contrast matrix evaluates every pair of palette colors. Use it to find:

• Text/background pairs that meet your target.
• Colors that are too similar to distinguish as adjacent states.
• Dark and light anchors for surfaces and typography.
• Accent colors that need a separate text companion.

Save, share, and export

Palette Studio is a Pro workspace. You can:

• Save complete palettes to your cloud library.
• Restore colors, locks, harmony, variation, and export format.
• Share the palette through its encoded URL.
• Copy CSS custom properties.
• Export Tailwind configuration values.
• Export a JSON color object.
• Copy or download Figma-compatible design-token JSON.

:root {
  --palette-1: #8493AA;
  --palette-2: #1B8E2D;
  --palette-3: #F2C94C;
  --palette-4: #EB5757;
  --palette-5: #111827;
}

Turn swatches into design roles

A useful product palette usually needs more than five unnamed colors. Treat the generated result as a foundation and assign clear semantic roles.

For larger systems, continue into Brand Kits or export tokens and expand them in your design system.