Using PropertyFieldSwatchColorPicker control in Property Pane

There are multiple controls to pick the color from webpart Property Pane, I liked the  PropertyFieldSwatchColorPicker controls because you can generates a list of colors based on your requirement which can help according to your branding.  You can select a color from the web part property pane and can apply this color while rendering markup for your web part.

You need to have PnP Property controls installed in your SPFX solution, if you haven’t installed it yet than use the below cmdlet for installation in your solution

npm install @pnp/spfx-property-controls --save --save-exact

For its integration, you need to import PropertyFieldSwatchColorPicker and PropertyFieldSwatchColorPickerStyle from PNP SPFX Property control.

import { PropertyFieldSwatchColorPicker, PropertyFieldSwatchColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldSwatchColorPicker';

Below is code script which I used under the property configuration

       PropertyFieldSwatchColorPicker('bgColor', {
                  label: 'Select Background Color',
                  selectedColor: this.properties.bgColor,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  properties: this.properties,
                  colors: [
                    { color: '#ffb900', label: 'Default Yellow' },
                    { color: '#fff100', label: 'Light Yellow' },
                    { color: '#d83b01', label: 'Orange'},
                    { color: '#e81123', label: 'Red' },
                    { color: '#a80000', label: 'Dark Red'},
                    { color: '#5c005c', label: 'Dark Magenta' },
                    { color: '#e3008c', label: 'Light Magenta'},
                    { color: '#5c2d91', label: 'Purple'},
                    { color: '#0078d4', label: 'Blue'},
                    { color: '#00bcf2', label: 'Light Blue' },
                    { color: '#008272', label: 'Teal'},
                    { color: '#107c10', label: 'Green'},
                    { color: '#bad80a', label: 'Light Green' },
                    { color: '#eaeaea'},
                    { color: 'black', label: 'Black'},
                    { color: '#333333', label: 'Neutral'},
                    { color: 'rgba(102, 102, 102, 0.5)', label: 'Half Gray' }
                  ],
                  key: 'bgColor'
                })

Here bgColor is my property and RGB value of the selected color will be saved based on the selection. You can add more colors as per your requirement.

I have applied used below line of code in div to change the color of the div control

style={{backgroundColor:this.props.bgColor }}