如何将HEX颜色列表排序为指定风格调色盘？求工具或代码

可用工具包 #

• chroma.js：专门用于颜色处理的JavaScript库，内置强大的颜色排序功能，支持基于色相（Hue）、饱和度（Saturation）、亮度（Lightness）等多种维度排序，能轻松实现类似你提到的渐变过渡调色盘效果。
• tinycolor2：轻量级颜色处理库，支持颜色格式转换与自定义排序逻辑，操作简单，适合快速实现基础的颜色排序需求。

代码实现示例 #

使用chroma.js排序 #

// 定义你的颜色列表
const colorList = ["#FF9AA2", "#FFB7B2", "#FFDAC1", "#E2F0CB", "#B5EAD7", "#C7CEEA"];

// 按色相维度排序（模拟示例中的渐变过渡）
const sortedColors = chroma.arrange(colorList, { by: 'hsl.h' });

// 将排序后的颜色渲染为调色盘（简单DOM操作）
sortedColors.forEach(colorHex => {
  const colorBlock = document.createElement('div');
  colorBlock.style.width = '80px';
  colorBlock.style.height = '80px';
  colorBlock.style.backgroundColor = colorHex;
  colorBlock.style.display = 'inline-block';
  document.body.appendChild(colorBlock);
});

如果需要更贴近示例的细腻过渡，还可以结合饱和度和亮度调整排序规则：

const sortedColors = chroma.arrange(colorList, {
  by: (color) => {
    const hsl = color.hsl();
    // 先按色相排序，再按饱和度、亮度微调
    return [hsl[0], hsl[1], hsl[2]];
  }
});

使用tinycolor2排序 #

// 引入tinycolor2后执行以下代码
const colorList = ["#FF9AA2", "#FFB7B2", "#FFDAC1", "#E2F0CB", "#B5EAD7", "#C7CEEA"];

// 自定义排序逻辑：按色相升序排列
const sortedColors = colorList.sort((colorA, colorB) => {
  const hslA = tinycolor(colorA).toHsl();
  const hslB = tinycolor(colorB).toHsl();
  return hslA.h - hslB.h;
});

// 渲染调色盘逻辑同上

内容的提问来源于stack exchange，提问作者jux_97