Wie erreicht man eine Konvertierung zwischen RGB und HSL in JS? Methoden zum Konvertieren von RGB und HSL ineinander (Codebeispiel)

Wie realisiert js die Konvertierung zwischen RGB und HSL? In diesem Artikel erfahren Sie, wie Sie mit js zwischen RGB und HSL konvertieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Im vorherigen Artikel [Wie stelle ich den Farbwert in CSS ein? rgb() legt die Farbe fest ] und [ Eine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt ] Wir haben vorgestellt, wie man RGB oder HSL verwendet Legen Sie Farbwerte in der CSS-Methode fest. Tatsächlich können RGB-Farbwerte und HSL-Farbwerte konvertiert werden. Im Folgenden verwenden wir Codebeispiele, damit jeder die Implementierungsmethode zum Konvertieren von RGB-Farbwerten und HSL-Farben versteht Werte​​.

js-Implementierung der RGB-Farbwertkonvertierung in HSL

Codebeispiel:

/**
 * RGB 颜色值转换为 HSL.
 * 转换公式参考自 http://en.wikipedia.org/wiki/HSL_color_space.
 * r, g, 和 b 需要在 [0, 255] 范围内
 * 返回的 h, s, 和 l 在 [0, 1] 之间
 *
 * @param   Number  r       红色色值
 * @param   Number  g       绿色色值
 * @param   Number  b       蓝色色值
 * @return  Array           HSL各值数组
 */
 function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
    return [Math.floor(h*100), Math.round(s*100)+"%", Math.round(l*100)+"%"];
}

js Implementierung HSL-Farbwert in RGB konvertieren

Codebeispiel:

/**
 * HSL颜色值转换为RGB. 
 * 换算公式改编自 http://en.wikipedia.org/wiki/HSL_color_space.
 * h, s, 和 l 设定在 [0, 1] 之间
 * 返回的 r, g, 和 b 在 [0, 255]之间
 *
 * @param   Number  h       色相
 * @param   Number  s       饱和度
 * @param   Number  l       亮度
 * @return  Array           RGB色值数值
 */function hslToRgb(h, s, l) {
    var r, g, b;

    if(s == 0) {
        r = g = b = l; // achromatic
    } else {
        var hue2rgb = function hue2rgb(p, q, t) {
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, der Code ist sehr einfach, Sie können es versuchen Es. Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter

JavaScript-Video-Tutorial, jQuery-Video-Tutorial, Bootstrap-Tutorial!

Das obige ist der detaillierte Inhalt vonWie erreicht man eine Konvertierung zwischen RGB und HSL in JS? Methoden zum Konvertieren von RGB und HSL ineinander (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!