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}
  onPaletteSelect={handlePaletteSelect}
/>
Hex
RGB
HSL
System
Theme

Example with all the props

<ColorPicker
  value={value}
  title="Primary"
  onChange={handleChange}
  theme={theme}
  onPaletteSelect={handlePaletteSelect}
  onRemove={handleRemove}
  className="my-color-picker"
  style={{ padding: 64 }}
/>

PalettePicker

In addition to the full color picker, you can opt for only the palette picker. This is ideal for situations when you want to force a color to be constrained to a theme.

<PalettePicker
  value={value}
  theme={theme}
  onPaletteSelect={handlePaletteSelect}
/>



ColorSummary


When theme values are chosen, you can optionally display a color summary
with your color picker. This will preview the color, indicate any aliases
in color modes it might have, and the color path.


Additionally, it will display all color pairs.


<ColorSummary
  value={color.value}
  id={color.id}
  path={color.path}
  theme={theme}
/>



purple.6
  • #9634a1
  • hsl(293.94,51.17%,41.76%)
  • rgb(150,52,161)


PalettePicker with ColorSummary


You can combine the PalettePicker and ColorSummary to seamlessly select colors
from a theme's palette and display summary information.


purple.6
  • #9634a1
  • hsl(293.94,51.17%,41.76%)
  • rgb(150,52,161)


export const PaletteSummary = ({ initialColor }) => {
  const [color, setColor] = useState(initialColor)
  return (
    <div>
      <PalettePicker
        value={color.value}
        onPaletteSelect={setColor}
        theme={tachyons.theme}
      />
      <div style={{ marginTop: 16, marginLeft: 8, marginRight: 8 }}>
        <ColorSummary {...color} path="purple.6" theme={tachyons.theme} />
      </div>
    </div>
  )
}



ColorPopover


<ColorPopover
  value={color}
  onChange={setColor}
  onPaletteSelect={(c) => setColor(c.value)}
  showText={true}
  theme={tachyons.theme}
  style={{ backgroundColor: '#fff' }}
/>





PalettePopover


<PalettePopover
  value={color}
  onChange={setColor}
  onPaletteSelect={(c) => setColor(c.value)}
  theme={tachyons.theme}
  style={{ backgroundColor: '#fff' }}
/>





References