如何将D3配色方案转换为可控明度范围的柔和pastel版本

核心思路为放弃直接调整插值参数t的方式，改为在Lab色彩空间下钳制明度取值范围，感知均匀度更高，参数可控性强，可直接指定明度上下限生成柔和的pastel配色。

实现代码 #

首先定义通用的明度限制工具函数：

// 生成带明度限制的柔和插值器
// 输入参数：原D3插值器、最小明度(取值范围0-1)、最大明度(取值范围0-1)
function createPastelInterpolator(baseInterpolator, minLightness = 0.2, maxLightness = 0.8) {
  return t => {
    // 将插值得到的基础颜色转为Lab色彩空间，保证明度调整的感知一致性
    const color = d3.lab(baseInterpolator(t));
    // 钳制明度在指定范围内，避免过亮/过暗
    color.l = Math.max(minLightness * 100, Math.min(maxLightness * 100, color.l));
    // 如需更低饱和的pastel效果，可取消下行注释调整饱和度上限
    // color.c = Math.min(30, color.c);
    return color.formatHex();
  }
}

替换原有生成逻辑即可实现需求，示例如下：

// 示例：使用RdYlGn插值器，限定明度范围0.25-0.75生成柔和配色
intColor = d3.scaleOrdinal()
    .domain(locations.map(d => d.id))
    .range(d3.quantize(
      createPastelInterpolator(d3.interpolateRdYlGn, 0.25, 0.75), 
      locations.length
    ))

参数调整说明 #

• 调整minLightness和maxLightness的数值即可控制整体明暗区间，两个值的差值越小，所有颜色的明度越接近，整体风格越柔和；
• 可按需替换createPastelInterpolator的第一个参数为任意D3内置插值器，适配不同的配色风格需求。

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