How to add Color picker field in ui component form Magento 2?

You can add the color picker field in the Ui Component form in the admin panel of the Magento. Using color picker you can choose a color from predefined color tree structure, add your custom color hash code or create specific color using adjusting color slider.

I have added color picker field in category form to show a demo of color picker in UI Component form XML.

Use formElement as colorPicker in XML file with field tag. <field name=”background_color” sortOrder=”10″ formElement=”colorPicker”>

Valid Form Component XML file will be as per given example,

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Rakesh Jesadiya
 * Category Page add color picker...
 */
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="general" sortOrder="5">
        <field name="background_color" sortOrder="10" formElement="colorPicker">
            <settings>
                <label translate="true">Background Color</label>
                <componentType>colorPicker</componentType>
                <placeholder translate="true">No Color</placeholder>
                <validation>
                    <rule name="validate-color" xsi:type="boolean">true</rule>
                </validation>
                <dataScope>background_color</dataScope>
                <additionalClasses>
                    <class name="admin__field-medium">true</class>
                </additionalClasses>
            </settings>
            <formElements>
                <colorPicker>
                    <settings>
                        <colorPickerMode>full</colorPickerMode>
                        <colorFormat>hex</colorFormat>
                    </settings>
                </colorPicker>
            </formElements>
        </field>
    </fieldset>
</form>

You need to use above XML structure to set color picker using UI component form.

Color Picker Basic settings:
* colorPickerMode: Defines the mode that affects available color picker functionality
Valid modes value will be: simple, full, noalpha, palette

* colorFormat: Defines the color format that is displayed in the selection tool as well as in the input field.
Valid formats value: hex, rgb, hsl, hsv, name, none

 * placeholder: Field’s Place holder value at initial form page load.