UI Docs: ColorPicker component group (#23366)

* Create .mdx for ColorPicker component group

Describes the building blocks of the component and how they work together.

* Rename ColorPicker.mdx to ColorPicker.story.mdx

* Update packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx

Clean up tags

Co-Authored-By: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

* Update packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx

Co-Authored-By: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx

+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="General/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 opimized 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`.