> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/color-picker.md).

# Color Picker

<figure><img src="/files/AtEQVD8lAt9xrXeroIO9" alt="" width="375"><figcaption></figcaption></figure>

The Avonni Color Picker is a Flow Screen component that provides a rich interface for selecting colors. It supports a visual spectrum picker, a predefined palette of swatches, and direct input of color codes (Hex, RGB, etc.). It can be configured as a standard input field, an inline palette, or a dropdown button menu.

***

## Overview

The color the user selects is available as the **Value** output variable after the screen — no interaction setup required to capture it. Use **On Change** interactions if you want to react to color selection in real time (e.g., auto-advance the screen or refresh a preview component).

**The Seamless Product Selector use case:** A user picks a color on a Product Customization screen. Configure **On Change** to fire **Flow Navigation (Next)** so the screen advances automatically when a color is selected — no Next button needed. The color value flows into a downstream Assignment element, then an Update Records element saves it to Salesforce.

***

## Configuration

To configure it, click the component on the Flow screen. The **Edit Color Picker Component** panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Properties

**Label** sets the text label displayed above the input.

**Type** determines the display mode:

* **Base** — a standard color input field that opens a picker popover.
* **Custom** — opens a full custom picker with spectrum, palette, and hex input.
* **Predefined** — shows only the predefined palette you configure.

**Hide Color Input** hides the hex/RGB text field when enabled, forcing users to pick from the visual tools only.

**Inline** displays the picker content directly on the screen instead of inside a popover or dropdown.

**Opacity** adds an alpha transparency slider so users can select colors with variable opacity.

**Variant** controls label placement: **Standard** (above), **Label Hidden**, **Label Inline** (beside), or **Label Stacked** (animates up on focus).

**Field Level Help** sets the tooltip help text shown next to the label.

**Required** forces the user to select a color before the flow can proceed.

**Disabled** makes the component visible but non-interactive.

**Read Only** shows the current value but prevents changes.

### Palette

Configure the color swatches shown to users.

**Colors** defines the array of swatches. Each entry can be a hex string or a color object (used to create grouped sections of colors).

**Number of Columns** sets how many columns the swatch grid uses (default: 7).

**Tile Height (px)** and **Tile Width (px)** control the size of individual swatches.

**Hide Outline** removes the outline shown around the selected swatch.

**Show Checkmark** displays a checkmark icon on the selected swatch.

### Button Menu

*(Only available when **Type** is set to **Custom** or **Predefined** with a menu-style layout)*

**Menu Label** sets optional text on the button that opens the picker.

**Menu Icon Name** adds a Lightning Design System icon (e.g., `utility:palette`) to the menu button.

**Menu Icon Size** controls the icon's size on the button.

**Menu Variant** sets the button's visual style: Bare, Container, Brand, Border, Border Filled, Bare Inverse, or Border Inverse.

**Menu Alignment** positions the dropdown relative to the button: Auto, Left, Center, Right, Bottom Left, Bottom Center, or Bottom Right.

**Menu Nubbin** displays a small triangular pointer connecting the dropdown to the button.

***

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Color Picker. Configure them from the **Interactions** tab of the Edit Color Picker panel.

### Change

Fires every time the user selects a new color value. Use this to auto-advance the screen, refresh a preview component, or drive conditional logic based on the chosen color.

## Styling

The **Style** tab gives you fine-grained control over the Color Picker's appearance. Configure it from the **Style** tab of the Edit Color Picker panel.

{% tabs %}
{% tab title="Margin" %}
Controls outer spacing around the component.

* **Top:** Space above the component.
* **Right:** Space to the right of the component.
* **Bottom:** Space below the component.
* **Left:** Space to the left of the component.
  {% endtab %}

{% tab title="Padding" %}
Controls inner spacing between the component border and its content.

* **Top:** Inner space at the top.
* **Right:** Inner space on the right.
* **Bottom:** Inner space at the bottom.
* **Left:** Inner space on the left.
  {% endtab %}

{% tab title="Flow Dialog" %}
Adjusts display when opened as a modal dialog inside a Flow screen.

* **Width:** Dialog width.
* **Height:** Dialog height.
* **Background Color:** Dialog background color.
  {% endtab %}

{% tab title="Label" %}
Styles the field label displayed above the color input.

* **Color:** Label text color.
* **Font Size:** Label font size.
* **Font Style:** Label font style (e.g., normal, italic).
* **Font Weight:** Label font weight (e.g., normal, bold).
  {% endtab %}

{% tab title="Swatch" %}
Styles the color swatches in the palette.

* **Preview Border Radius:** Border radius of the selected color preview swatch.
* **Palette Border Radius:** Border radius of palette swatches.
* **Selected Outline Width:** Width of the outline shown around the selected swatch.
* **Selected Outline Color:** Color of the outline shown around the selected swatch.
* **Selected Border Width:** Width of the border on the selected swatch.
* **Selected Border Color:** Color of the border on the selected swatch.
* **Selected Checkmark Color:** Color of the checkmark icon on the selected swatch.
  {% endtab %}
  {% endtabs %}

## Output Variables

### Flow Interaction Output Variables

Like all interactive Flow components, the Color Picker exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/color-picker.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.