---
title: "Color Picker"
slug: "color-picker"
tags: ["Shortcuts", "Look and Feel", "CSS", "Colors"]
updated: 2025-06-16T16:49:38Z
published: 2025-06-16T16:49:38Z
canonical: "documentation.decisions.com/color-picker"
---

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

# Color Picker

## Overview

The **Color Picker** is a Form Control that allows users to select a color and output its hex code equivalent. Users can also pass in the hex code as a string input. The Color Picker will display that color when the form is run. This Form control can be beneficial for designing colors for a process or using Decisions to write CSS classes with certain color configurations.

## Example

1. Add a Form to a Flow. To learn how to do this, please navigate to the [Create a Form](/v9/docs/create-forms) article.
2. In the Form Designer, in the Toolbox panel, expand Data, drag, and drop the **Color Picker** control onto the Form.
3. This component has settings that can change the way the Color Picker looks.
4. Those settings control the following:

| **Color Picker Settings** |
| --- |
| **Show Pick Icon** | Removes the pencil icon from the Color Picker |
| **Show Right Buttons** | Removes the 'ellipses' and 'x' from the Color Picker |
| **Show Textbox** | Removes the textbox interface from the Color Picker |

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-06-26_11h18_40.png)

## Debug

1. In the Flow Designer, select Debug in the top action panel. Select START DEBUGGING.
2. The Form displays the Color Picker, pick a color and select Submit. The hex code of the color selection will be available to use throughout the Flow.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/ColorPicker-ezgif.com-video-to-gif-converter.gif)