如何使用jQuery UI选择菜单创建自定义颜色选择器下拉菜单？

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<div id="color-selector"></div>

$(document).ready(function() {
  // 初始化选择菜单
  $("#color-selector").selectmenu();

  // 设置选择菜单的宽度
  $("#color-selector").selectmenu("option", "width", 200);

  // 设置选择菜单的下拉箭头图标
  $("#color-selector").selectmenu("option", "icons", { button: "ui-icon-triangle-1-s" });

  // 设置选择菜单的选项
  $("#color-selector").append("<option value='red'>Red</option>");
  $("#color-selector").append("<option value='green'>Green</option>");
  $("#color-selector").append("<option value='blue'>Blue</option>");

  // 监听选择菜单的变化事件
  $("#color-selector").on("selectmenuchange", function(event, ui) {
    var selectedColor = ui.item.value;
    // 在这里可以根据选中的颜色执行相应的操作
    console.log("Selected color: " + selectedColor);
  });
});