Introducing Gradio Clients

Watch
Gradio logo
  1. Components
  2. ColorPicker

New to Gradio? Start here: Getting Started

See the Release History

←

Code

Dataframe

→

ColorPicker

gradio.ColorPicker(···)
import gradio as gr with gr.Blocks() as demo: with gr.Column(): input = gr.ColorPicker(interactive=True) output = gr.Markdown("You picked: **#000000**") def pick(color): return "You picked: **" + color + "**" input.change(pick, input, output) demo.launch()

Description

Creates a color picker for user to select a color as string input. Can be used as an input to pass a color value to a function or as an output to display a color value.

Behavior

As input component: Passes selected color value as a hex str into the function.

Your function should accept one of these types:
def predict(
	value: str | None
)
	...

As output component: Expects a hex str returned from function and sets color picker value to it.

Your function should return one of these types:
def predict(···) -> str | None
	...	
	return value

Initialization

Parameters

Shortcuts

Class Interface String Shortcut Initialization

gradio.ColorPicker

"colorpicker"

 Uses default values

Demos

import gradio as gr
import numpy as np
from PIL import Image, ImageColor

def change_color(icon, color):

    """
    Function that given an icon in .png format changes its color
    Args:
        icon: Icon whose color needs to be changed.
        color: Chosen color with which to edit the input icon.
    Returns:
        edited_image: Edited icon.
    """
    img = icon.convert("LA")
    img = img.convert("RGBA")
    image_np = np.array(icon)
    _, _, _, alpha = image_np.T
    mask = alpha > 0
    image_np[..., :-1][mask.T] = ImageColor.getcolor(color, "RGB")
    edited_image = Image.fromarray(image_np)
    return edited_image

inputs = [
    gr.Image(label="icon", type="pil", image_mode="RGBA"),
    gr.ColorPicker(label="color"),
]
outputs = gr.Image(label="colored icon")

demo = gr.Interface(
    fn=change_color,
    inputs=inputs,
    outputs=outputs
)

if __name__ == "__main__":
    demo.launch()

Event Listeners

Description

Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called.

Supported Event Listeners

The ColorPicker component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below.

Listener Description

ColorPicker.change(fn, ···)

Triggered when the value of the ColorPicker changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input.

ColorPicker.input(fn, ···)

This listener is triggered when the user changes the value of the ColorPicker.

ColorPicker.submit(fn, ···)

This listener is triggered when the user presses the Enter key while the ColorPicker is focused.

ColorPicker.focus(fn, ···)

This listener is triggered when the ColorPicker is focused.

ColorPicker.blur(fn, ···)

This listener is triggered when the ColorPicker is unfocused/blurred.

Event Parameters

Parameters
←

Code

Dataframe

→