Color picker

Navigating and picking color is an essential part of design. The Components AI color picker has the ability to select color in multiple formats and constrain colors to a theme.

Usage

Quickstart:

<ColorPicker value="tomato" onChange={console.log} />

As a controlled component with change handling:

<ColorPicker value={value} onChange={handleChange} theme={theme} />

Example with all the props

<ColorPicker
  value={value}
  title="Primary"
  theme={theme}
  initialTab="theme"
  hideSystemColors
  onChange={handleChange}
  onRegenerate={handleRegenerate}
  onRemove={handleRemove}
/>

ColorPopover

<ColorPopover
  value={color}
  onChange={setColor}
  showText
  swatch={<CustomSwatch />}
  theme={tachyons.theme}
/>

References