ColorPicker

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

Basic usage

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

str | Callable | None

default:"None"

Default color as hex code (e.g., “#FF0000”)

str | None

default:"None"

Label displayed above component

str | None

default:"None"

Additional info text. Supports markdown/HTML

bool | None

default:"None"

Whether color can be changed

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

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()

Overview

Input Components

Output Components

Layout Components

Control Components

Special Components

Basic usage

Constructor

Events

Example

​Basic usage

​Constructor

​Events

​Example

Basic usage

Constructor

Events

Example