【js】解决自动生成颜色时相邻颜色视觉相似问题的技术方案

news2024/12/28 20:57:58

解决自动生成颜色时相邻颜色视觉相似问题的技术方案

在进行大规模颜色生成时，特别是在数据可视化、用户界面设计等应用领域，一个常见的挑战是确保相邻颜色在视觉上具有足够的区分度。本文介绍的方法通过结合黄金分割比与饱和度、亮度的周期性变化，有效地解决相邻颜色视觉相似的问题。
以下是处理前后的对比

处理前

在这里插入图片描述

处理后

在这里插入图片描述

1. 黄金分割比在颜色生成中的运用

黄金分割比（约为0.618033988749895），长期以来被认为是最具美感的比例之一。在颜色生成中，利用这一比例可以使得生成的颜色在色轮上均匀分布，避免色相过于密集或分布不均。

2. 色相的非线性调整

在 generateColors 方法中，我们首先根据颜色总数将色相均匀分布在360度的色轮上。接着，将每个色相值通过黄金分割比进一步进行调整，计算方式如下：

hue = (hue + golden_ratio_conjugate * 360) % 360;

此种调整方式能够确保即使在色相相邻的颜色也具有较好的视觉区分度。

3. 饱和度与亮度的交替变化

除了色相的调整外，颜色的饱和度和亮度也是影响视觉感受的重要因素。在 generateColors 方法中，我们通过为饱和度和亮度设置不同的周期性变化模式，来增强颜色间的对比。具体代码如下：

let saturation = (65 + 30 * (i % 2)) + '%'; // 交替增减饱和度
let lightness = (50 + 25 * (i % 2)) + '%';  // 交替增减亮度

这种饱和度和亮度的交替变化不仅增加了颜色之间的区别，还增加了颜色的丰富性和层次感，避免色彩在视觉上的单调性。

4. 实操应用

function generateColors(count) {
    const golden_ratio_conjugate = 0.618033988749895;
    let colors = [];
    for (let i = 0; i < count; i++) {
        // 使用黄金比例进行色相调整，并结合非线性分布以增加多样性
        let hue = i * 360 / count;
        hue = (hue + golden_ratio_conjugate * 360) % 360;
        // 轻微调整饱和度和亮度，使用周期性变化增强色彩的区分度
        let saturation = (65 + 30 * (i % 2)) + '%'; // 交替增减饱和度
        let lightness = (50 + 25 * (i % 2)) + '%';  // 交替增减亮度
        colors.push(`hsl(${hue}, ${saturation}, ${lightness})`);
    }
    return colors;
}