## ColorPicker  
Use Colorpicker for color inputs in various formats such as hex, rgb, hsl etc.  
Category: Inputs  

### Simple Example

```python
import dash_mantine_components as dmc
from dash import Output, Input, html, callback

component = html.Div(
    [
        dmc.ColorPicker(id="color-picker", format="rgba", value="rgba(41, 96, 214, 1)"),
        dmc.Space(h=10),
        dmc.Text(id="selected-color"),
    ]
)


@callback(Output("selected-color", "children"), Input("color-picker", "value"))
def pick(color):
    return color
```
### Color Format

Component supports hex, rgb, rgba, hsl and hsla color formats. Slider to change opacity is displayed only for rgba
and hsla formats.

```python
import dash_mantine_components as dmc
from dash import html, Input, Output, callback

component = html.Div(
    [
        dmc.Group(
            justify="space-between",
            children=[
                dmc.ColorPicker(id="colorpicker-format", format="hex", value="#343353"),
                dmc.Select(
                    id="format-select",
                    data=[
                        {"label": fmt.upper(), "value": fmt}
                        for fmt in ["hex", "hexa", "rgb", "rgba", "hsl", "hsla"]
                    ],
                    value="hex",
                ),
            ],
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-color-format"),
    ]
)


@callback(Output("colorpicker-format", "format"), Input("format-select", "value"))
def pick_format(value):
    return value


@callback(
    Output("selected-color-format", "children"), Input("colorpicker-format", "value")
)
def pick_color(color):
    return color
```
### With Swatches

You can add any number of predefined swatches and also set the number of swatches per row.

```python
import dash_mantine_components as dmc

# fmt: off
swatches = [
    "#25262b", "#868e96", "#fa5252", "#e64980", "#be4bdb", "#7950f2", "#4c6ef5",
    "#228be6", "#15aabf", "#12b886", "#40c057", "#82c91e", "#fab005", "#fd7e14"
]
# fmt: on

component = dmc.Group(
    gap=40,
    children=[
        dmc.ColorPicker(swatches=swatches),
        dmc.ColorPicker(swatches=swatches, swatchesPerRow=9),
    ],
)
```
### Without Picker

To display just the swatches and no picker, initialize the component with `withPicker=False`.

```python
import dash_mantine_components as dmc

# fmt: off
swatches = [
    "#25262b", "#868e96", "#fa5252", "#e64980", "#be4bdb", "#7950f2", "#4c6ef5",
    "#228be6", "#15aabf", "#12b886", "#40c057", "#82c91e", "#fab005", "#fd7e14"
]
# fmt: on

component = dmc.ColorPicker(swatches=swatches, swatchesPerRow=7, withPicker=False)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name              | Static selector                        | Description                                                         |
|:------------------|:---------------------------------------|:--------------------------------------------------------------------|
| wrapper           | .mantine-ColorPicker-wrapper           | Root element                                                        |
| preview           | .mantine-ColorPicker-preview           | Color preview, displayed only when `format` supports alpha channel  |
| body              | .mantine-ColorPicker-body              | Contains alpha/hue sliders and color preview                        |
| slider            | .mantine-ColorPicker-slider            | Alpha and hue sliders root                                          |
| sliderOverlay     | .mantine-ColorPicker-sliderOverlay     | Element used to display various overlays over hue and alpha sliders |
| saturation        | .mantine-ColorPicker-saturation        | Saturation picker                                                   |
| saturationOverlay | .mantine-ColorPicker-saturationOverlay | Element used to display various overlays over saturation picker     |
| sliders           | .mantine-ColorPicker-sliders           | Contains alpha and hue sliders                                      |
| thumb             | .mantine-ColorPicker-thumb             | Thumb of all sliders                                                |
| swatch            | .mantine-ColorPicker-swatch            | Color swatch                                                        |
| swatches          | .mantine-ColorPicker-swatches          | Color swatches list                                                 |


### Keyword Arguments
#### ColorPicker

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- alphaLabel (string; optional):
    Alpha slider `aria-label` prop.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- focusable (boolean; optional):
    Determines whether interactive elements (sliders thumbs and
    swatches) should be focusable, `True` by default.

- format (a value equal to: 'hex', 'hexa', 'rgba', 'rgb', 'hsl', 'hsla'; optional):
    Color format, `'hex'` by default.

- fullWidth (boolean; optional):
    Determines whether the component should take 100% width of its
    container, `False` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- hueLabel (string; optional):
    Hue slider `aria-label` prop.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- saturationLabel (string; optional):
    Saturation slider `aria-label` prop.

- size (optional):
    Controls size of hue, alpha and saturation sliders, `'md'` by
    default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- swatches (list of strings; optional):
    An array of colors in one of the supported formats. Used to render
    swatches list below the color picker.

- swatchesPerRow (number; optional):
    Number of swatches per row, `7` by default.

- tabIndex (number; optional):
    tab-index.

- value (string; optional):
    Controlled component value.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withPicker (boolean; optional):
    Determines whether the color picker should be displayed, `True` by
    default.