当前位置：首页 > article >正文

颜色分配问题

article 2025/3/1 18:31:45

要求

我现在有N组数据，我现在想给他们每组分配一个6位的颜色代码，要求尽量分散。用什么方法分配比较合适？

方案

方法一：基于 HSL（色相、饱和度、亮度）生成颜色

HSL 是一种颜色模型，其中色相（Hue）是一个角度值（0° 到 360°），可以很好地控制颜色的分散性。通过将色相均匀分布，可以生成一组分散的颜色。

方法二：使用随机颜色生成器

如果不需要严格的颜色分布，可以使用随机生成器来生成颜色。为了尽量分散，可以对随机生成的颜色进行一些优化。

方法三：使用彩虹色（Rainbow Colors）

彩虹色是一种常见的颜色分布方式，可以通过数学公式生成一组分散的颜色。

代码

方法一：基于 HSL（色相、饱和度、亮度）生成颜色

function generateColors(num) {
    const colors = [];
    for (let i = 0; i < num; i++) {
        // 色相均匀分布
        const hue = Math.round(i * 360 / num);
        // 饱和度和亮度固定为 100% 和 50%
        const saturation = 100;
        const lightness = 50;

        // 将 HSL 转换为 RGB
        const rgb = hslToRgb(hue, saturation, lightness);
        const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
        colors.push(hex);
    }
    return colors;
}

function hslToRgb(h, s, l) {
    s /= 100;
    l /= 100;
    const k = (n) => (n + h / 30) % 12;
    const a = s * Math.min(l, 1 - l);
    const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
    return {
        r: Math.round(f(0) * 255),
        g: Math.round(f(8) * 255),
        b: Math.round(f(4) * 255)
    };
}

function rgbToHex(r, g, b) {
    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
}

// 示例：生成 200 个颜色
const colors = generateColors(200);
console.log(colors);

HSL 转 RGB：通过 hslToRgb 函数将 HSL 转换为 RGB。
RGB 转 HEX：通过 rgbToHex 函数将 RGB 转换为 6 位的 HEX 颜色代码。
色相均匀分布：通过 i * 360 / num 确保色相均匀分布。

方法二：使用随机颜色生成器

如果不需要严格的颜色分布，可以使用随机生成器来生成颜色。为了尽量分散，可以对随机生成的颜色进行一些优化。

function generateRandomColors(num) {
    const colors = new Set();
    while (colors.size < num) {
        const hex = `#${Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0')}`;
        colors.add(hex);
    }
    return Array.from(colors);
}

// 示例：生成 200 个颜色
const randomColors = generateRandomColors(200);
console.log(randomColors);

方法三：使用彩虹色（Rainbow Colors）

function generateRainbowColors(num) {
    const colors = [];
    for (let i = 0; i < num; i++) {
        const angle = (i / num) * Math.PI * 2; // 0 到 2π
        const r = Math.sin(angle) * 127 + 128;
        const g = Math.sin(angle + Math.PI * 2 / 3) * 127 + 128;
        const b = Math.sin(angle + Math.PI * 4 / 3) * 127 + 128;

        const hex = rgbToHex(r, g, b);
        colors.push(hex);
    }
    return colors;
}

function rgbToHex(r, g, b) {
    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
}

// 示例：生成 200 个颜色
const rainbowColors = generateRainbowColors(200);
console.log(rainbowColors);