ColorPicker

Renders a color picker within the Canva UI.
To learn how controls work, refer to Rich controls.
For guidelines on making the most of rich controls, see Use rich controls (with some restraint).
Usage
1
canva.create("color_picker", {
2
  id: "colorPickerExample",
3
  label: "Color Picker Example",
4
  color: "#ff0099",
5
});
Copied!
Parameters
Name
Type
Required
Description
controlType
string
Yes
The type of control. To create a color picker, the value must be "color_picker".
opts
object
Yes
Properties for configuring the control.
opts.id
string
Yes
A unique ID for the control.
opts.label
string
No
A human readable label for the control. The default value is "Select a color".
opts.color
string
No
The color to display as selected in the color picker. This value must be a hex code. The default value is "#000000".
Event
Name
Type
Required
Description
opts
object
Yes
Information about the event.
opts.message
object
Yes
Information about the event.
opts.message.commit
boolean
Yes
If false, the user is actively interacting with the control. If true, the user has finished interacting with the control.
opts.message.controlId
string
Yes
The id of the control.
opts.message.controlType
string
Yes
The type of control. The value of this property is always "color_picker".
opts.message.message
object
Yes
Additional information about the event.
opts.message.message.type
string
Yes
The type of event. The value of this property is always "setColor".
opts.message.message.value
string
Yes
The hex code of the selected color.
Example
1
const canva = window.canva.init();
2
​
3
const state = {
4
  colorPickerExample: "#ff0099",
5
};
6
​
7
canva.onReady(() => {
8
  renderControls();
9
});
10
​
11
canva.onControlsEvent(async (opts) => {
12
  if (!opts.message.commit) {
13
    return;
14
  }
15
​
16
  if (opts.message.controlType === "color_picker") {
17
    state[opts.message.controlId] = opts.message.message.value;
18
  }
19
​
20
  renderControls();
21
});
22
​
23
function renderControls() {
24
  const controls = [
25
    canva.create("color_picker", {
26
      id: "colorPickerExample",
27
      label: "Color Picker Example",
28
      color: state.colorPickerExample,
29
    }),
30
  ];
31
​
32
  canva.updateControlPanel(controls);
33
}
Copied!

Checkbox

Group

Last modified 1mo ago

Copy link

Contents