Color picker

The color picker is used to let merchants select a color visually. For example, merchants use the color picker to customize the accent color of the email templates for their shop.

Color picker component examples

Use when merchants need to select a color to make the selection a visual task rather than a technical one.

import {ColorPicker} from '@shopify/polaris';
import {useState} from 'react';

function ColorPickerExample() {
  const [color, setColor] = useState({
    hue: 120,
    brightness: 1,
    saturation: 1,

  return <ColorPicker onChange={setColor} color={color} />;


interface ColorPickerProps

ID for the element.


The currently selected color.


Allow user to select an alpha value.


Allow HuePicker to take the full width.

onChange(color: ) => void

Callback when color is selected.

Best practices

  • Use the alpha slider if you want to allow merchants to be able to select a transparent color

    On this page