To customize this asset please make sure you look at the comments made in the "Options" input default value and change the value of the fields according to your preference, this value is customized according to which type of input and here is an example of the overall structure:

{ 
// default color color: '', 
// inline mode 
inline: false, 
// top, right, bottom, left, top-center, right-center, bottom-center, left-center 
placement: 'bottom', 
// Colorpicker.Pro Tab Palette 
format: 'rgba', 
// custom class 
customClass: '', 
// default,medium,small 
size: 'default', 
// shows arrow 
arrow: true, 
anchor: 
{ 
  hidden: false, // shows or hides anchor element 
  cssProperty: 'color' // background-color, color, border-color 
}, 
// animation 
animation: 'slide-in', 
// hides information block 
hideInfo: false, 
history: 
{ 
  hidden: false, // shows or hides history block 
  colors: [] // ['red', 'green', 'rgba(255, 1, 128, 1)'] }, 
  // for palette picker 
  palette: 
  [ 
    { // first row 
      descendants: 
      [ // row colors 
        {color: '#000000' }, 
        { color: '#454545' }, 
        { color: '#666666' }, 
        { color: '#989898' }, 
        { color: '#B6B6B6' },  
        { color: '#CBCBCB' }, 
        { color: '#D8D8D8' }, 
        { color: '#EEEEEF' }, 
        { color: '#F3F3F3' }, 
        { color: '#ffffff' } 
     ] 
    } 
  ], 
  // for tab palette picker 
  palette: 
  [ 
    { // tab and rows 
      color: '#e6315b', 
      // tab color 
      descendants: 
           [ //rows 
              { descendants: 
                 [ 
                   { color: '#ffd8e1' }, 
                   { color: '#fcc4d1' }, 
                   { color: '#f7a7ba' }, 
                   { color: '#f287a0' }, 
                   { color: '#ee6988' }, 
                   { color: '#e9486e' }, 
                   { color: '#e5315b' } 
                 ] 
             }, 
               { 
                 descendants: 
                 [ 
                   { color: '#e6325c' }, 
                   { color: '#dd3058' }, 
                   { color: '#d52e55' }, 
                   { color: '#c82b50' }, 
                   { color: '#bc284b' }, 
                   { color: '#b22648' }, 
                   { color: '#a92444' } 
                ] 
              }, 
              { 
                descendants: 
                [ 
                 { color: '#a92444' }, 
                 { color: '#a02241' }, 
                 { color: '#95203c' }, 
                 { color: '#891d37' }, 
                 { color: '#7d1b32' }, 
                 { color: '#71182d' }, 
                 { color: '#661629' } 
               ] 
              } 
          ] 
        } 
    ] 
}

Also make sure to only provide an Input id in "InputId" input parameter in case you want to use the default mode of the picker, which is the following:

In case you want one of the other input modes, do the following:

For a Circle with color preview set "CustomAnchor" input parameter to "True" and you´ll get the following result:

For a right anchor inside the input set "AnchorInsideInputRight" input parameter to "True" and you´ll get the following result:

And lastly for a left anchor inside the input set "AnchorInsideInputLeft" input parameter to "True" and you´ll get the following result:

To get the code of the selected color you have 5 formats returned within a structure (Color) in Event_OnChangeDefaultPicker, which are Color.HEX, Color.RGB, Color.RGBA, Color.HSL, Color.HSLA

To get the Dark Mode of each of the plugin pickers you should choose the picker Webblocks starting with "Dark"