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

Use when attached to a visual builder to allow the designated object to have a transparent background that allows underlying objects to show through.

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

function ColorPickerWithTransparentValueExample() {
  const [color, setColor] = useState({
    hue: 300,
    brightness: 1,
    saturation: 0.7,
    alpha: 0.7,
  });

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

Use when attached to a visual builder to allow the designated object to have a transparent background that allows underlying objects to show through.

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

function ColorPickerWithTransparentValueExample() {
  const [color, setColor] = useState({
    hue: 300,
    brightness: 1,
    saturation: 0.7,
    alpha: 0.7,
  });

  return (
    <div style={{width: '500px'}}>
      <ColorPicker fullWidth onChange={setColor} color={color} allowAlpha />
    </div>
  );
}

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