Color

Explore every variant and expand each example’s formatted usage code.

Color

Choose a color from a picker or palette.

Color picker

<ColorPicker
  label="Accent"
  value={pickerColor}
  defaultLabel="Default"
  customLabel="Custom color"
  customHexLabel="Hex color"
  invalidColor="Enter a valid hex color"
  colorLabels={{}}
  onChange={setPickerColor}
/>

Color palette

<ColorPalette
  value={paletteColor}
  ariaLabel="Color swatches"
  defaultLabel="Default"
  colorAriaLabel={(option) => option.label}
  onChange={setPaletteColor}
/>