hsl - 从相对亮度转换为 HSL

Question

给定 HSL 中的某种颜色(假设为 hsl(74,64%,59%))，我想计算哪种较深的阴影(具有相同的 h 和 s 值)给我足够的对比度来满足 W3C 颜色对比度要求。

有一些公式可以将 HSL 转换为 RGB(例如 https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB )并根据该 RGB 计算相对亮度(例如 https://www.w3.org/TR/WCAG20/#relativeluminancedef )。根据颜色对比度公式 ( https://www.w3.org/TR/WCAG20/#contrast-ratiodef )，我可以计算出其他颜色的相对亮度应该是多少。

但是，然后我被卡住了。我发现无法从给定的相对亮度计算回给定 h 和 s 的 HSL 颜色。

使用类似 https://contrast-ratio.com/ 的工具我可以降低亮度直到满足要求，但我想要一个公式(最好在 JavaScript 中)来对大量颜色进行计算。

(我目前正在使用二进制搜索方法来找到最接近的值，通过测试从 HSL 到 RGB 到相对亮度的许多转换，但这是非常密集的，而且我想知道在两者之间转换为 RGB 是否会引入不准确。)

Answer 1

希望这是你需要的

使用此 SO answer 中的公式，及以下:

// Relative luminance calculations
function adjustGamma(p) {
    if (p <= 0.03928) {
        return p / 12.92;
    } else {
        return Math.pow( ( p + 0.055 ) / 1.055, 2.4 );
    }
}

function relativeLuminance(rgb) {
    const r = adjustGamma( rgb[0] / 255 );
    const g = adjustGamma( rgb[1] / 255 );
    const b = adjustGamma( rgb[2] / 255 );
    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// Contrast calculations
function contrastRatio(a,b) {
    const ratio = (a + 0.05) / (b + 0.05);
    return ratio >= 1 ? ratio : 1 / ratio;
}

// Loop for correct lightness
function rgbFromHslContrast(h, s, l1, ratio) {
    var inc = -0.01;
    var l2 = ( ( l1 + 0.05 ) / ratio - 0.05 );
    if (l2 < 0) {
        l2 = ( ratio * ( l1 + 0.05 ) - 0.05 );
        inc = -inc;
    }
    while (contrastRatio(l1, relativeLuminance(hslToRgb(h, s, l2))) < ratio) {
        l2 += inc;
    }
    return hslToRgb(h, s, l2);
}

您要调用的函数是:

const originalHslAsRgb = hslToRgb(0.2, 0.2, 0.2);
const l1 = relativeLuminance(originalHslAsRgb);
const contrastRgb = rgbFromHslContrast(0.2, 0.2, l1, 3.5) // 3.5 is minimum contrast factor we target for..
// [139, 149, 100]
// equivalent to hsl(72, 20%, 53%)