Колоризатор в настройках компонента

 $arComponentParameters = array(
   "PARAMETERS" => array(
      "COLOR_SCHEME" => Array(
         "NAME" => GetMessage("SW24_BUYNOW_COLOR_SCHEME"),
         "PARENT" => "BASE",
         "TYPE"=>"CUSTOM",
         "JS_FILE" => '/bitrix/components/skyweb24/mycomponent/settings.js',
         'JS_DATA' => 'silver',
         'JS_EVENT' => 'sw24ColorSettingsEdit',
         "DEFAULT" => "silver",
         "ADDITIONAL_VALUES"=>"N"
      )
   )
);
?>
<style>
.color_block a{
   display:inline-block;
   box-sizing:border-box;
   height:30px;
   width:25%;
   border-width:2px;
   border-style:solid;
   margin-top: -3px;
}
</style>

function sw24ColorSettingsEdit(arParams){
   console.log(arParams);
   var colorArr={
      'turquoise':'rgb(26, 188, 156)',
      'green-sea':'rgb(22, 160, 133)',
      'emerland':'rgb(46, 204, 113)',
      'nephritis':'rgb(39, 174, 96)',
      'peter-river':'rgb(52, 152, 219)',
      'belize-hole':'rgb(41, 128, 185)',
      'amethyst':'rgb(166, 107, 190)',
      'wisteria':'rgb(142, 68, 173)',
      'wet-asphalt':'rgb(52, 73, 94)',
      'midnight-blue':'rgb(44, 62, 80)',
      'sun-flower':'rgb(241, 196, 15)',
      'orange':'rgb(243, 156, 18)',
      'carrot':'rgb(230, 126, 34)',
      'pumpkin':'rgb(211, 84, 0)',
      'alizarin':'rgb(231, 76, 60)',
      'pomegranate':'rgb(192, 57, 43)',
      'clouds':'rgb(236, 240, 241)',
      'silver':'rgb(189, 195, 199)',
      'concrete':'rgb(149, 165, 166)',
      'asbestos':'rgb(127, 140, 141)'
   };
   var colorBlock='<div class="color_block">';
   for(key in colorArr){
      var bColor=(arParams.oInput.value==key)?'red':colorArr[key];
      colorBlock+='<a href="javascript:void(0);" title="'+key+'" style="background-color:'+colorArr[key]+'; border-color:'+bColor+'"></a>';
   }
   colorBlock+='</div>';
   
   var linkBlock=arParams.oCont.appendChild(BX.create('div', {html: colorBlock}));
   var links=BX.findChild(linkBlock, {"tag" : "a"}, true, true);
   for(var i=0; i<links.length; i++){
      links[i].onclick=function(){
         console.log(this.title)
         arParams.oInput.value=this.title;
         for(var i=0; i<links.length; i++){
            links[i].style.borderColor=links[i].style.backgroundColor;
         }
         this.style.borderColor='red';
      }
   }
   
}