On September 25th, 2024, we released v2 of the Apps SDK. To learn what’s new and how to upgrade, see Migration FAQ and Migration guide.

openColorSelector

API reference for the openColorSelector method.
This version of the API is a preview. Preview APIs are unstable and may change without warning. You can't release public apps using this API until it's stable.

Prompts the user to choose a color that can be used within Canva.

Parameters

anchorAnchorRequired

A bounding box.

heightnumberRequired

The height of the bounding box, in pixels.

widthnumberRequired

The width of the bounding box, in pixels.

topnumberRequired

The top position of the bounding box, in pixels.

leftnumberRequired

The left position of the bounding box, in pixels.

optionsColorSelectorOpts<Scope>Required

Options for configuring a color selector.

scopesScope[]Required

The supported scopes, used to determine the appearance and behavior of the color selector.

This must be "solid".

onColorSelectfunctionRequired

A callback that runs when the user selects a color.

Parameters

eventColorSelectionEvent<Scope>Required

The color selection event.

selectionobjectRequired

The selected color.

The exact properties depends on the configured scope.

Returns

void

selectedColorobjectOptional

The color to display as selected when the color selector is opened.

This is only required if there are multiple UI components for selecting colors. For example, if the app renders multiple Swatch components.

If this value is undefined, the most recently selected color will be displayed as selected.

This property only affects Document colors and Default colors.

Returns

A function that closes the currently open color selector.

Promise<() => void>