Adobe Commerce 2.3 reached end of support in September 2022.

ColorPicker component

The ColorPicker component uses the Spectrum and tinycolor.js libraries to make it easier to choose and implement color values. The ColorPicker component must be a child of the Listing or Form components.

Configuration options

Option Description Type Default Value
colorFormat Defines the color format displayed in the selection tool and input field. Valid formats: hex, rgb, hsl, hsv, name, none string -
colorPickerMode Defines the mode that affects the available color picker functionality. Valid modes: simple, full, noalpha, palette string -
elementTmpl The path to the .html template of the particular field type (color-picker). string ui/form/element/color-picker
label Option’s label. string -

Sources files

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
    <form>
    ...
        <colorPicker name="colors_filter" class="Magento\Ui\Component\Form\Element\ColorPicker" component="Magento_Ui/js/form/element/color-picker">
            <settings>
                <label translate="true">Color</label>
                <elementTmpl>ui/form/element/color-picker</elementTmpl>
                <colorFormat>rgb</colorFormat>
                <colorPickerMode>full</colorPickerMode>
                <dataScope>colors_filter</dataScope>
            </settings>
        </colorPicker>
    ...
    </form>

Result

Color Picker Component