如何捕获深色？如何判断JavaScript生成的随机颜色为深色或浅色？

1. 如何捕获深色？ #

捕获深色本质是生成随机RGB颜色后，通过“深浅判断逻辑”筛选出符合深色标准的颜色。你可以在生成随机色后做校验，如果不是深色就重新生成，直到得到深色为止。

2. 判断RGB颜色深浅的方法 #

行业通用的做法是基于WCAG相对亮度标准计算颜色的亮度值，以此区分深浅：

1. 先将R、G、B值（0-255范围）归一化到0-1区间（每个值除以255）
2. 使用公式计算相对亮度：L = 0.2126 * R_norm + 0.7152 * G_norm + 0.0722 * B_norm
3. 若计算出的L值小于0.5，说明是深色；反之则为浅色

把这个逻辑封装成函数，就能快速判断任意RGB颜色的深浅。

修改后的完整代码 #

结合你的需求，下面是带深浅判断+深色捕获（可选）的代码：

// 判断颜色是否为深色的工具函数
function isDarkColor(r, g, b) {
    // 归一化RGB值到0-1区间
    const rNorm = r / 255;
    const gNorm = g / 255;
    const bNorm = b / 255;
    // 计算相对亮度
    const luminance = 0.2126 * rNorm + 0.7152 * gNorm + 0.0722 * bNorm;
    // 亮度小于0.5则为深色
    return luminance < 0.5;
}

// 生成深色的函数（可选，如果你需要只生成深色）
function generateDarkColor() {
    let r, g, b;
    do {
        r = Math.floor(Math.random() * 256);
        g = Math.floor(Math.random() * 256);
        b = Math.floor(Math.random() * 256);
    } while (!isDarkColor(r, g, b));
    return { r, g, b };
}

btn.addEventListener('click', e => {
    // 两种选择：1. 生成任意随机色 2. 只生成深色（用generateDarkColor）
    // 这里先展示任意随机色+判断的逻辑
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
    // 根据颜色深浅调整文本颜色，提升可读性
    colorText.style.color = isDarkColor(r, g, b) ? '#ffffff' : '#000000';
    colorText.innerText = `R: ${r} \nG: ${g} \nB: ${b} \n颜色类型：${isDarkColor(r, g, b) ? '深色' : '浅色'}`;

    // 如果需要只生成深色，替换成下面的代码：
    // const { r, g, b } = generateDarkColor();
    // body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
    // colorText.style.color = '#ffffff';
    // colorText.innerText = `R: ${r} \nG: ${g} \nB: ${b} \n颜色类型：深色`;
});

说明 #

• 相对亮度公式是WCAG制定的标准，兼顾了人眼对不同颜色的敏感度（人眼对绿色更敏感，所以权重最高）
• 如果你需要严格的深色捕获，用generateDarkColor函数的循环校验逻辑即可
• 额外添加了文本颜色适配，避免背景色和文本色冲突，提升页面可读性

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