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

Props

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

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