Introducing Gradio Clients


New to Gradio? Start here: Getting Started

See the Release History


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


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.


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




Class Interface String Shortcut Initialization



Uses default values


import gradio as gr import numpy as np import os 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


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