> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# ColorPicker

> Create color selection components in Gradio

The ColorPicker component allows users to select colors using a color picker interface.

## Basic usage

```python theme={null}
import gradio as gr

def change_color(color):
    return f"Selected color: {color}"

gr.Interface(
    fn=change_color,
    inputs=gr.ColorPicker(),
    outputs=gr.Textbox()
).launch()
```

## Constructor

<ParamField path="value" type="str | Callable | None" default="None">
  Default color as hex code (e.g., "#FF0000")
</ParamField>

<ParamField path="label" type="str | None" default="None">
  Label displayed above component
</ParamField>

<ParamField path="info" type="str | None" default="None">
  Additional info text. Supports markdown/HTML
</ParamField>

<ParamField path="interactive" type="bool | None" default="None">
  Whether color can be changed
</ParamField>

## Events

* **change** - Triggered when color changes
* **input** - Triggered on input
* **submit** - Triggered when Enter is pressed
* **focus** - Triggered when component gains focus
* **blur** - Triggered when component loses focus

## Example

```python theme={null}
import gradio as gr

def apply_color(color):
    return f'<div style="background-color: {color}; padding: 20px; color: white;">Color: {color}</div>'

with gr.Blocks() as demo:
    color = gr.ColorPicker(value="#FF5733", label="Choose a color")
    output = gr.HTML()
    
    color.change(fn=apply_color, inputs=color, outputs=output)
    
demo.launch()
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.