---
title: ColorPicker
description: Allow users to select a color from a color palette.
api_name: app-home
source_url:
  html: https://shopify.dev/docs/api/app-home/polaris-web-components/forms/colorpicker
  md: https://shopify.dev/docs/api/app-home/polaris-web-components/forms/colorpicker.md
---

# Color​Picker

Allow users to select a color from a color palette.

## Properties

* alpha

  boolean

  Default: false

  Allow user to select an alpha value.

* defaultValue

  string

  The default value for the field.

* formResetCallback

  () => void

* name

  string

  An identifier for the field that is unique within the nearest containing form.

* value

  string

  The currently selected color.

  Supported formats include:

  * HSL @see <https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl>
  * HSLA @see <https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla>
  * RGB @see <https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb>
  * RGBA @see <https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb>
  * Hex (3-value, 4-value, 6-value, 8-value) @see <https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color>

  For RGB and RGBA, both the legacy syntax (comma-separated) and modern syntax (space-separate) are supported.

## Events

Learn more about [registering events](https://shopify.dev/docs/api/app-home/using-polaris-components#event-handling).

* change

  CallbackEventListener\<typeof tagName> | null

* input

  CallbackEventListener\<typeof tagName> | null

### CallbackEventListener

```ts
(EventListener & {
      (event: CallbackEvent<T>): void;
    }) | null
```

### CallbackEvent

```ts
Event & {
  currentTarget: HTMLElementTagNameMap[T];
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-color-picker 
    value="#FF0000"
    alpha
  ></s-color-picker>
  ```