> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: selectColor()

## Article: selectColor() (React Elements)

## Article Link: https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-color.md

## Article Content:

<!-- Source: packages/public-editor-platform-sdk/src/element/index.ts in wix-private/editor-platform -->
# selectColor()

Opens the editor's color picker for the selected component, letting a Wix user choose a solid color or gradient.

## Syntax

```ts
function selectColor(params: SelectColorParams): Promise<string | undefined>
```

## Parameters

`params` accepts one of the following shapes:

- [Manifest key](#manifest-key)
- [Explicit options](#explicit-options)

For more information on this choice, see [Picker arguments](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/introduction.md#picker-arguments).

### Manifest key

Connects the picker to a manifest style field, so the selected color saves to it automatically.

| Name | Type | Description |
| :---- | :---- | :---- |
| `styleItemKey` | string | Key of a `cssProperties` or `cssCustomProperties` field in the manifest. The editor reads the current value, opens the picker, and saves the selection back to this field automatically. |

### Explicit options

Opens the picker without connecting it to the manifest. Use the callbacks to preview and apply the color yourself.

| Name | Type | Description |
| :---- | :---- | :---- |
| `initialValue` | string | Initial color to show when the picker opens, as a CSS color string. |
| `mode` | string[] | Color modes to offer. Defaults to `['solid']`. Include `'gradient'` to also allow gradients. |
| `showBrand` | boolean | Whether to show the site's brand color palette. |
| `showCustom` | boolean | Whether to show the custom color input. |
| `showAdvancedSettings` | boolean | Whether to show the advanced settings panel. |
| `showOpacity` | boolean | Whether to show the opacity slider. |
| `position` | object | Screen position `{ x, y }` where the picker should open. |
| `onChange` | function | Called with the color string on every change while the picker is open. |
| `onApply` | function | Called with the color string when the Wix user confirms a selection. |
| `onClose` | function | Called when the picker closes, whether or not a color was confirmed. |
| `onCancel` | function | Called when the Wix user cancels without confirming a selection. |

## Returns

`Promise<string | undefined>`

When called with a manifest key, resolves with the updated color value once it's applied. When called with explicit options, use the `onChange` and `onApply` callbacks to receive color values as the Wix user interacts with the picker.

## Example

```js
import { reactElements } from '@wix/editor';

reactElements.selectColor({
  initialValue: currentColor,
  showBrand: true,
  showCustom: true,
  onChange: (color) => {
    // Preview the color as the Wix user picks it.
  },
  onApply: (color) => {
    reactElements.setStyles({ cssProperties: { color } });
  },
});
```

## See also

- [setStyles()](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/styles/set-styles.md)
- [selectBackground()](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-background.md)
- [About the React Elements API](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/introduction.md)