Update, improve the Color Palette Script

[Zsolt]

How to write a strong feature request

Help your idea stand out:

• Provide real-life scenarios
  A custom color palette goes a long way in creating reusable “lego-blocks” of visual notes. The current Color Palette script does a decent job, but it takes a “pilot’s exam” to configure it. This is a one-time hurdle, but puts many people off. Adding salt to the wound, https://paletton.com export features are frequently broken, you can get the color with a script in the browsers developer console, … but that just increases the barrier for anyone to want to configure their color pelette.

• Sell the idea
  Create a visual template where one can configure their palette on screen then have a script convert it into an Excalidraw color palette.

• Include supporting material
  Inspired by @kai’s note:

@Kai

I want to apply a clear, vivid and meaningful color palette (I still need to follow the respective * knowledgebase article). But perhaps another tutorial suggestion might be fitting at this point: How to apply colors meaningful?

[iwan]

I tried this building with AI, but I am hitting a wall,

Title: Feature request: API to customize the toolbar’s top-row color picks (per-drawing or globally)

Use case

I want to define and switch between named color palette presets (e.g. a brand palette like Oracle Redwood, plus a “Sunset” palette, etc.) and have
those colors appear in the toolbar’s 5 quick-pick swatches for Stroke / Background / Canvas — the row that’s visible in the right-side properties
panel without opening the popover.

This would unlock building a “Palette Manager” community script: visual designer + multiple presets + apply/reset, the kind of thing that makes
Excalidraw immediately on-brand for visual notes.

Current behavior (plugin v2.22.1)

Setting appState.colorPalette via excalidrawAPI.updateScene({ appState: { colorPalette: { elementStroke: […], elementBackground: […],
canvasBackground: […] } } }) correctly updates the popover Colors row — the 5 swatches inside the color-picker popover do change to the supplied
colors.

However:

1. The toolbar quick-pick row (the 5 swatches in the right-side properties panel) does not change. It continues to render the upstream Excalidraw
   defaults regardless of appState.colorPalette.
2. The Shades panel in the popover only renders when the supplied colors match Open Color named colors. Custom hex codes (e.g. #C74634 Oracle red)
   result in “No shades available for this color”.

What I’d like

Either:

Option A — extend appState.colorPalette so it also drives the toolbar quick-picks (single source of truth), with optional per-color shade arrays for
#2 above:

type ColorPaletteEntry = string | { main: string; shades?: string };
appState.colorPalette: {
elementStroke?: ColorPaletteEntry;
elementBackground?: ColorPaletteEntry;
canvasBackground?: ColorPaletteEntry;
}

Option B — a new ExcalidrawAutomate setter mirroring the existing reader:

ea.getViewColorPalette(palette): (string | string); // already exists
ea.setViewColorPalette(palette, picks: string, shades?: string): void; // new

Either would let scripts in Excalidraw/Scripts/ build a proper palette manager.

What I tried

• updateScene({ appState: { colorPalette: {…} } }) with captureUpdate: “IMMEDIATELY” — popover row changes, toolbar row does not.
• Wrapping each color as a sub-array [main, shade1, shade2, …] — popover behavior unchanged, toolbar still default.
• excalidrawAPI.refresh() after the updateScene — no effect on toolbar.

Grep of the bundled plugin source confirmed colorPalette is the only palette-related identifier exposed (no topPicks, quickColor, customColorPalette,
etc.), so this isn’t an undocumented setting I missed — it appears to be genuinely not yet wired up.

Why per-drawing is fine (no global setting needed)

Per-drawing is preferable for my use case — different drawings can have different palettes (one for personal notes, one for a course, one for client
work). The popover already behaves per-drawing today, so extending that to the toolbar is consistent.

Thanks Zsolt — happy to test a beta build if helpful.

[Zsolt]

Hi Iwan, did you look at this wiki article? Configuring Excalidraw Color Palette

It includes the appState JSON and the topPicks section.

@Zsolt

colorPalette: {
  canvasBackground: [string, string, string, string, string][] | string[],
  elementBackground: [string, string, string, string, string][] | string[],
  elementStroke: [string, string, string, string, string][] | string[],
  topPicks: {
    canvasBackground: [string, string, string, string, string],
    elementStroke: [string, string, string, string, string],
    elementBackground: [string, string, string, string, string] 
  },
}

Does this help?