Skip navigation

Skip to main content

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.
API reference
API reference

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

anchorAnchor
REQUIRED

A bounding box.

Properties of anchor
heightnumber
REQUIRED

The height of the bounding box, in pixels.

widthnumber
REQUIRED

The width of the bounding box, in pixels.

topnumber
REQUIRED

The top position of the bounding box, in pixels.

leftnumber
REQUIRED

The left position of the bounding box, in pixels.

optionsColorSelectorOpts<Scope>
REQUIRED

Options for configuring a color selector.

Properties of options
scopesScope[]
REQUIRED

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

This must be "solid".

onColorSelectfunction
REQUIRED

A callback that runs when the user selects a color.

Parameters

eventColorSelectionEvent<Scope>
REQUIRED

The color selection event.

Properties of event
selectionobject
REQUIRED

The selected color.

The exact properties depends on the configured scope.

Returns

void

selectedColorobject
OPTIONAL

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>