Skip to contentShopify logoPolaris

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

Props

interface ColorPickerProps
id?string

ID for the element.

color

The currently selected color.

allowAlpha?boolean

Allow user to select an alpha value.

fullWidth?boolean

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