Skip to main content
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

​
value
str | Callable | None
default:"None"
Default color as hex code (e.g., “#FF0000”)
​
label
str | None
default:"None"
Label displayed above component
​
info
str | None
default:"None"
Additional info text. Supports markdown/HTML
​
interactive
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()