如何创建具有有限选项的颜色选择器(调色板)？

<div class="color-palette">
  <div class="color-option" onclick="selectColor('#ff0000')"></div>
  <div class="color-option" onclick="selectColor('#00ff00')"></div>
  <div class="color-option" onclick="selectColor('#0000ff')"></div>
</div>

.color-palette {
  display: flex;
}

.color-option {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.color-option:nth-child(1) {
  background-color: #ff0000;
}

.color-option:nth-child(2) {
  background-color: #00ff00;
}

.color-option:nth-child(3) {
  background-color: #0000ff;
}

function selectColor(color) {
  // 处理选中颜色的逻辑，例如将颜色应用到相关组件或保存选中状态
  console.log("选中颜色：" + color);
}