Color Picker
The Avonni Color Picker lets users choose a color through a base, custom, or predefined palette interface. Use it whenever a page needs a color value — for theming, tagging, branding selections, or any record field that stores a color.
Overview
The Color Picker is an input component for selecting colors. Depending on how you configure it, users can pick from a guided base experience, a fully custom color editor, or a curated set of predefined swatches. It supports optional opacity (alpha) selection, an inline display mode that renders the picker directly on the page instead of inside a dropdown, configurable palette layouts, and a customizable button menu.
Key features include:
Multiple Modes: Offer a base palette, a custom color editor, or a predefined swatch list.
Opacity Support: Optionally let users adjust transparency with an alpha slider.
Flexible Display: Show the picker inside a dropdown menu or inline on the page.
Palette Customization: Control the colors offered, the number of columns, and the size and appearance of each swatch tile.
Menu Customization: Tailor the trigger button's label, icon, variant, alignment, and pointer.
Configuration
To configure the Color Picker, select it on the canvas. The Edit Color Picker panel opens on the right. The sections below mirror the configuration panel.
Properties
Type
Type defines how the picker behaves. Choose Base (default) for the standard color-picking experience, Custom to give users a full custom color editor, or Predefined to limit selection to a curated list of swatches.
Value
Value is the current color, expressed as a hex, RGB, or similar color string. Set a static starting color or bind it to a variable, formula, or record field so the selection is saved and reused elsewhere.
Label
Label is the text shown above or beside the picker to describe what the color controls. You can type a static value or bind it dynamically.
Variant
Variant controls how the label is positioned relative to the picker. Choose Standard (default), Label Hidden to remove the visible label, Label Inline to place the label beside the control, or Label Stacked to place it directly above.
Field Level Help
Field Level Help adds a small help icon next to the label. The text you enter appears in a tooltip when users hover over it — useful for explaining what the color is used for.
Disabled
When Disabled is enabled, the picker is greyed out and cannot be interacted with. Off by default.
Read Only
When Read Only is enabled, the current color is displayed but users cannot change it. Off by default.
Required
When Required is enabled, the field is marked as mandatory and must hold a value before the page can be submitted. Off by default.
Hide Color Input
Enable Hide Color Input to remove the manual text-entry field where users would otherwise type a color value, restricting selection to the palette only. Off by default.
Opacity
When Opacity is enabled, an alpha (opacity) slider is shown so users can choose a partially transparent color. Off by default.
Palette
The palette settings control the grid of color swatches users select from.
Colors
Colors defines the list of colors offered in the palette. Add the specific color values you want users to choose from.
Number of Columns
Number of Columns sets how many swatches are displayed per row in the palette grid.
Palette Tile Width
Palette Tile Width sets the width, in pixels, of each individual swatch tile.
Palette Tile Height
Palette Tile Height sets the height, in pixels, of each individual swatch tile.
Show Checkmark
When Show Checkmark is enabled, a checkmark appears on the currently selected swatch to make the active choice obvious. Off by default.
Hide Outline
When Hide Outline is enabled, the outline normally drawn around the selected swatch is removed. Off by default.
Menu
The menu settings control the button that opens the color picker (when not displayed inline).
Menu Label
Menu Label is the optional text shown on the button that opens the color picker menu.
Menu Icon Name
Menu Icon Name sets the Lightning Design System icon displayed on the menu button (for example, utility:color_swatch).
Menu Icon Size
Menu Icon Size controls the size of the menu icon. Choose XX-Small, X-Small (default), Small, Medium, or Large.
Menu Variant
Menu Variant sets the visual style of the menu button. Choose Border (default), Bare, Container, Brand, Border Filled, Bare Inverse, or Border Inverse.
Menu Alignment
Menu Alignment controls where the dropdown opens relative to the button. Choose Left (default), Auto, Center, Right, Bottom Left, Bottom Center, or Bottom Right.
Menu Nubbin
When Menu Nubbin is enabled, a nubbin (small pointer) is drawn on the dropdown menu pointing back to the button. Off by default.
Inline
When Inline is enabled, the picker content is displayed directly on the page instead of inside a dropdown popover, and the menu button settings no longer apply. Off by default.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
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 the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing inside the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Customizes the label text.
Color: Set the label text color.
Font Size: Adjust the label font size.
Font Style: Choose a font style.
Font Weight: Choose a font weight.
Customizes the preview swatch and the palette swatches, including the selected-swatch indicators.
Preview Border Radius: Round the corners of the preview swatch.
Palette Border Radius: Round the corners of the palette swatches.
Selected Outline Width / Color: Set the outline thickness and color of the selected swatch.
Selected Border Width / Color: Set the border thickness and color of the selected swatch.
Selected Checkmark Color: Set the color of the checkmark on the selected swatch.
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 when a user selects a new color. The value output variable is updated with the chosen color — as a hex string normally, or as a hex-with-alpha string when Opacity is enabled. Use this to store the selected color in a variable, update a record field, or trigger downstream flow logic.
Troubleshooting Common Issues
No Colors in the Palette: Add color values under Colors in the Palette section — an empty list shows nothing to pick from.
Users Can Type Any Color: Enable Hide Color Input to restrict selection to the palette and remove the manual text-entry field.
Selected Color Isn't Saved: Bind Value to a variable or record field; a static value won't persist the user's choice.
Menu Settings Have No Effect: Check whether Inline is enabled — in inline mode the picker renders on the page and the menu button options are ignored.
No Transparency Option: Enable Opacity to show the alpha slider; without it, only fully opaque colors can be chosen.
Can't Change the Color: Confirm Disabled and Read Only are both off, otherwise users can't interact with the picker.
Last updated
Was this helpful?