Color Palette Example

colorPaletteExample.js

import { InspectorControls, useSetting } from '@wordpress/block-editor';
import { PanelBody, PanelRow, ColorPalette } from '@wordpress/components';

const Edit = () => {

    const { bgColor } = attributes;
    const colors = useSetting( 'color.palette' ) || [];

    return (
        <>
            <InspectorControls>
                <PanelBody title='Background Options' initialOpen>
                    <PanelRow>
                        <ColorPalette
                            colors={ colors }
                            value={ bgColor }
                            onChange={ ( value ) => { setAttributes( { bgColor: value } )  } } 
                        />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
        </>
    );
}

export default Edit;