Skip navigation

Skip to main content

API reference
Intents: design
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.

Opens a color selector.

Usage

Open a color selector

import { type Anchor, openColorSelector } from "@canva/asset";


const anchor: Anchor = {
  width: 200,
  height: 40,
  top: 100,
  left: 100
};


await openColorSelector(anchor, {
  scopes: ["solid"],
  onColorSelect: (event) => {
    if (event.selection.type === "solid") {
       const color = event.selection.hexString;
    }
  }
});
TYPESCRIPT

Open a color selector with a pre-selected color

import { type Anchor, type SolidColor, openColorSelector } from "@canva/asset";


const anchor: Anchor = {
  width: 200,
  height: 40,
  top: 100,
  left: 100
};


const preselectedColor: SolidColor = {
  type: "solid",
  hexString: "#ff0000"
};


await openColorSelector(anchor, {
  scopes: ["solid"],
  selectedColor: preselectedColor,
  onColorSelect: (event) => {
    if (event.selection.type === "solid") {
       const color = event.selection.hexString;
    }
  }
});
TYPESCRIPT

Close a color selector programmatically

import { type Anchor, openColorSelector } from "@canva/asset";


const anchor: Anchor = {
  width: 200,
  height: 40,
  top: 100,
  left: 100
};


const close = await openColorSelector(anchor, {
  scopes: ["solid"],
  onColorSelect: (event) => {
    if (event.selection.type === "solid") {
       const color = event.selection.hexString;
    }
  }
});


// Later: Close the color selector
close();
TYPESCRIPT

Parameters

anchorAnchor
Required

A bounding box.

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.

scopesScope[]
Required

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

The only valid value is "solid".

onColorSelectfunction
Required

A callback that runs when the user selects a color.

Parameters

eventColorSelectionEvent<Scope>
Required

The color selection event.

selectionobject
Required

The selected color.

The exact properties depends on the configured scope.

typestring
Required

The type of color.

The only valid value is "solid".

hexStringstring
Required

The color as a hexadecimal code.

This is always a 6-digit code that's prefixed with a # symbol.

Example

"#ff0099"
TS

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.

typestring
Required

The type of color.

The only valid value is "solid".

hexStringstring
Required

The color as a hexadecimal code.

This is always a 6-digit code that's prefixed with a # symbol.

Example

"#ff0099"
TS

Returns

A function that closes the currently open color selector.

Promise<() => void>