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',
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  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 }}

Adnan is six time Microsoft MVP (Since 2015) with over 16 years of extensive experience with major expertise on SharePoint, SharePoint based development, Microsoft 365, Microsoft Teams, .Net Platform and Microsoft BI. He is currently working Sr Microsoft Consultant at Olive + Goose. He is MCT Regional Lead for Pakistan Chapter since 2012. He is working on SharePoint for past 12 years and worked on different intranet/intranet solutions for private & govt. sector majorly in United states and Gulf region and have experience of working with multiple Fortune 500 companies. He is a trainer, technology evangelist and also speaks in community forums.

Leave a Reply