如何将文本对比度函数转换为适配HSL值的版本

原函数仅支持十六进制颜色输入，要适配HSL数值输入，核心是先将HSL转换为RGB，再沿用原有的亮度计算逻辑判断文本颜色。以下是完整实现：

function getContrastTextColor(h, s, l) {
    // W3C定义的亮度计算公式: ((红色值 × 299) + (绿色值 × 587) + (蓝色值 × 114)) / 1000
    const threshold = 130; // 亮度阈值，低于此值返回白色文本，高于则返回黑色

    // 将HSL转换为0-255范围的RGB值
    const rgb = hslToRgb(h, s, l);
    const cBrightness = ((rgb.r * 299) + (rgb.g * 587) + (rgb.b * 114)) / 1000;

    return cBrightness > threshold ? "#000000" : "#ffffff";
}

// 辅助函数：将HSL转换为RGB
// 参数说明：h为色相（0-360），s为饱和度（0-100 或 0-1），l为亮度（0-100 或 0-1）
function hslToRgb(h, s, l) {
    // 统一将饱和度和亮度转换为0-1的小数
    s = typeof s === 'number' ? s / 100 : 0;
    l = typeof l === 'number' ? l / 100 : 0;

    const chroma = (1 - Math.abs(2 * l - 1)) * s;
    const x = chroma * (1 - Math.abs((h / 60) % 2 - 1));
    const lightnessAdjustment = l - chroma / 2;

    let r, g, b;
    if (h >= 0 && h < 60) {
        r = chroma; g = x; b = 0;
    } else if (h >= 60 && h < 120) {
        r = x; g = chroma; b = 0;
    } else if (h >= 120 && h < 180) {
        r = 0; g = chroma; b = x;
    } else if (h >= 180 && h < 240) {
        r = 0; g = x; b = chroma;
    } else if (h >= 240 && h < 300) {
        r = x; g = 0; b = chroma;
    } else { // 色相范围300-360
        r = chroma; g = 0; b = x;
    }

    // 转换为0-255的整数RGB值
    return {
        r: Math.round((r + lightnessAdjustment) * 255),
        g: Math.round((g + lightnessAdjustment) * 255),
        b: Math.round((b + lightnessAdjustment) * 255)
    };
}

关键细节说明 #

• HSL转RGB逻辑：这是适配的核心步骤，通过色彩学公式将HSL的色相、饱和度、亮度转换为RGB三通道数值，保证后续亮度计算和原函数逻辑一致。
• 兼容性处理：辅助函数兼容饱和度和亮度的百分比（0-100）或小数（0-1）输入，适配不同场景的参数传递习惯。
• 亮度判断：沿用原函数的W3C亮度公式和阈值，确保文本与背景的对比度符合可读性要求。

使用示例 #

// 输入HSL参数：色相120（绿色），饱和度70%，亮度40%
const textColor = getContrastTextColor(120, 70, 40);
console.log(textColor); // 输出#ffffff（白色文本）

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