Color Picker

.slds-color-picker — A configurable interface for color selection

.slds-color-picker — Fully featured color picker, with swatches and a custom color config

.slds-color-picker__summary — 'Summary' element for color selection.

.slds-color-picker__summary-label — Label for summary input

.slds-color-picker__button — Button that toggles the Color Picker Selector

.slds-color-picker__summary-input — Input field for summary UI

.slds-color-picker__selector — The selector subcomponent. Extends upon a .slds-popover

.slds-color-picker__swatches — Swatch container

.slds-color-picker__swatch — Color Picker swatch

.slds-swatch — A swatch

.slds-color-picker__custom — Custom picker selection container

.slds-color-picker__custom-range — Custom picker range element

.slds-color-picker__range-indicator — true

.slds-color-picker__hue-and-preview — Container element for the hue slider and preview swatch

.slds-color-picker__hue-slider — The slide input that controls the hue

.slds-swatch — A swatch

.slds-color-picker__custom-inputs — The group of direct input elements

.slds-color-picker__selector-footer — Footer for the Color Selector Picker

.slds-color-picker_custom-only — Swatches Only UI

.slds-color-picker_predefined-only — Swatches Only UI

.slds-color-picker_swatches-only — Swatches Only UI

Salesforce, Inc. Salesforce Tower, 415 Mission Street, 3rd Floor, San Francisco, CA 94105, United States

Site: Version 1.2.54 | Framework: Version 2.30.7. Last Updated on August 11th 2026, 12:20 pm.