> 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/dynamic-components/components/color-picker.md). # 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](/dynamic-components/core-concepts/component-visibility.md). ## 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 the *outer* spacing around the component. * **Top / Right / Bottom / Left:** Adjust the space on each side. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing inside the component. * **Top / Right / Bottom / Left:** Adjust the space on each side. {% endtab %} {% tab title="Label" %} 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. {% endtab %} {% tab title="Swatch" %} 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. {% endtab %} {% endtabs %} ## Interactions [Interactions](/dynamic-components/component-builder/interactions.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 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. --- # 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/dynamic-components/components/color-picker.md?ask=&goal= ``` `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.