Color Picker
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.
Value sets the initial color value of the picker (for example a hex or RGB string).
Field Level Help sets the tooltip help text shown next to the label, detailing the purpose and function of the input.
Type determines the display mode. The Base type uses tabs for all the other types.
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.
Variant controls label placement: Standard (above), Label Hidden, Label Inline (beside), or Label Stacked.
Hide Color Input hides the hex/RGB text field when enabled, forcing users to pick from the visual tools only.
Inline deactivates the popover and displays the picker content directly on the screen.
Opacity adds an alpha transparency slider so users can select colors with variable opacity.
Required forces the user to select a color before the flow can proceed.
Disabled makes the component visible but non-interactive.
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 in conjunction with groups to split the colors into different groups).
Number of Columns sets how many columns the palette uses. If unspecified, defaults to 7 except when Inline is present.
Hide Outline removes the outline shown around the selected swatch.
Show Checkmark displays a checkmark icon on the selected swatch.
Tile Height (px) and Tile Width (px) control the size of individual swatches.
Button Menu
Menu Label sets optional text on the button that opens the picker.
Menu Variant sets the button's visual style: Bare, Container, Brand, Border, Border Filled, Bare Inverse, or Border Inverse (default: Border).
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. Requires Menu Icon Name.
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.
Advanced Options
Read Only shows the current value but prevents changes.
Interactions
Interactions 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.
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.
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.
Adjusts display when opened as a modal dialog inside a Flow screen.
Width: Dialog width.
Height: Dialog height.
Background Color: Dialog background color.
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).
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.
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 or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?