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.

Installation

yarn add @compai/color-picker

Usage

import { ColorPicker } from '@compai/color-picker'

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.

import { PalettePicker } from '@compai/color-picker'
<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