import { Meta, Props } from '@storybook/addon-docs/blocks';
import { ColorPicker } from './ColorPicker';

<Meta title="Pickers and Editors/ColorPicker/ColorPicker" />

# ColorPicker

The `ColorPicker` component group consists of several building blocks that are combined in Grafana to create the `ColorPicker`: popover, pickers and palettes. There are different combinations of these building blocks depending on where the `ColorPicker` is used in Grafana.

The `Popover` is a tabbed view where you can switch between `Palettes`. The `NamedColorsPalette` shows an arrangement of preset colors, while the `SpectrumPalette` is an unlimited HSB color picker. The preset colors are optimized to work well with both light and dark theme. `Popover` is triggered, for example, by the series legend of graphs, or by `Pickers`.

The `Pickers` are single circular color fields that show the currently picked color. On click, they open the `Popover`.

<Props of={ColorPicker} />
