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.

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} />;


Want to help make this feature better? Please share your feedback.

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