> ## Documentation Index
> Fetch the complete documentation index at: https://www.canva.dev/docs/apps/llms.txt
> Use this file to discover all available pages before exploring further.

# openColorSelector

API reference for the openColorSelector method.

Opens a color selector.

## Usage

### Open a color selector

```typescript
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;
    }
  }
});
```

### Open a color selector with a pre-selected color

```typescript
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;
    }
  }
});
```

### Close a color selector programmatically

```typescript
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();
```

## Parameters

<Prop.List>
  <Prop name="anchor" required type="Anchor" sourceLineNumbers={[752]}>
    A bounding box.

    <PillAccordion defaultExpanded={true} title={<>Properties of <strong>anchor</strong></>}>
      <Prop.List>
        <Prop name="height" required type="number" sourceLineNumbers={[49]}>
          The height of the bounding box, in pixels.
        </Prop>

        <Prop name="width" required type="number" sourceLineNumbers={[53]}>
          The width of the bounding box, in pixels.
        </Prop>

        <Prop name="top" required type="number" sourceLineNumbers={[57]}>
          The top position of the bounding box, in pixels.
        </Prop>

        <Prop name="left" required type="number" sourceLineNumbers={[61]}>
          The left position of the bounding box, in pixels.
        </Prop>
      </Prop.List>
    </PillAccordion>
  </Prop>

  <Prop name="options" required type="ColorSelectorOpts<Scope>" sourceLineNumbers={[752]}>
    Options for configuring a color selector.

    <PillAccordion defaultExpanded={true} title={<>Properties of <strong>options</strong></>}>
      <Prop.List>
        <Prop name="scopes" required type="Scope[]" sourceLineNumbers={[212]}>
          The supported scopes, used to determine the appearance and behavior of the color selector.

          The only valid value is `"solid"`.
        </Prop>

        <Prop name="onColorSelect" required type="function" sourceLineNumbers={[229]}>
          A callback that runs when the user selects a color.

          **Parameters**

          <Prop.List>
            <Prop name="event" required type="ColorSelectionEvent<Scope>" sourceLineNumbers={[229]}>
              The color selection event.

              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>event</strong></>}>
                <Prop.List>
                  <Prop name="selection" required type="object" sourceLineNumbers={[195]}>
                    The selected color.

                    The exact properties depends on the configured `scope`.

                    <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selection</strong></>}>
                      <Prop.List>
                        <Prop name="type" required type="string" sourceLineNumbers={[905]}>
                          The type of color.

                          The only valid value is `"solid"`.
                        </Prop>

                        <Prop name="hexString" required type="string" sourceLineNumbers={[915]}>
                          The color as a hexadecimal code.

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

                          <Prop.Extras>
                            **Example**

                            ```ts
                            "#ff0099"
                            ```
                          </Prop.Extras>
                        </Prop>
                      </Prop.List>
                    </PillAccordion>
                  </Prop>
                </Prop.List>
              </PillAccordion>
            </Prop>
          </Prop.List>

          **Returns**

          `void`
        </Prop>

        <Prop name="selectedColor" type="object" sourceLineNumbers={[224]}>
          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**.

          <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectedColor</strong></>}>
            <Prop.List>
              <Prop name="type" required type="string" sourceLineNumbers={[905]}>
                The type of color.

                The only valid value is `"solid"`.
              </Prop>

              <Prop name="hexString" required type="string" sourceLineNumbers={[915]}>
                The color as a hexadecimal code.

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

                <Prop.Extras>
                  **Example**

                  ```ts
                  "#ff0099"
                  ```
                </Prop.Extras>
              </Prop>
            </Prop.List>
          </PillAccordion>
        </Prop>
      </Prop.List>
    </PillAccordion>
  </Prop>
</Prop.List>

## Returns

A function that closes the currently open color selector.

`Promise<() => void>`

## Permissions

To use this method, the following permissions must be enabled for the app:

* `canva:design:content:read`
* `canva:brandkit:read`

To learn more, see [Permissions](https://www.canva.dev/docs/apps/configuring-intents-permissions/).