Model koloru HSL i HSLA

Model HSL i HSLA

HSL to tzw. model kolorów dla artystów. Nie oddaje wszystkich barw widzianych przez ludzkie oko, np. purpury.

H oznacza ‘hue’ czyli ‘odcień’, ‘barwa’ i jest podawany w postaci kąta 0.0 – 360.0^o. Barwy zielone mieszczą się w zakresie od 0.0 do 120.0. Barwy niebieskie mieszczą się w przedziale od 120.0 do 240.0, a barwy czerwone od 240.0 do 360.0

S oznacza ‘saturation’, czyli ‘nasycenie’ koloru podawane w zakresie 0.0 – 100%

L oznacza ‘lightness’ czyli ‘jasność’, podawane w zakresie 0.0 – 100%

HSLA dodaje czwarty parametr – ‘krycie’ wyrażony w zakresie od 0.0 do 1.0.

W HTML hue można podawać w postaci 6 kolorów nazwanych i ich 6 odcieni, ale ten sposób nie działa w canvas.

Palety kolorów HSL:

• Paleta nazwanych kolorów HSL
• Paleta kolorów HSL

Przeliczanie RGB na HSL

Listing

//Przyjmuje wartości RGB
//zwraca tablicę HSL (h w stopniach od 0.0 - 360, pozostałe
//w %)
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 sm = max + min;
    var h = sm / 2;
    var s = sm / 2;
    var l = sm / 2;
    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - sm) : d / sm;
        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 *= 60.0;
    }
    return [roundToDecimal(h,4), roundToDecimal(s,4), roundToDecimal(l,4)];
}

Przeliczanie HSL na RGB

Listing

//h - barwa w stopniach 0.0 - 360.0
//s - nasycenie w % od 0.0 - 100%
//l - jasność w % od 0.0 - 100%
//zwraca tablice wartości RGB
function HSLToRGB(h, s, l) {
	var r, g, b;
	h /= 360.0;
	if (s == 0) {
		r = g = b = l; // achromatic
	} else {
		var q = l 7lt; 0.5 ? l * (1 + s) : l + s - l * s;
		var p = 2 * l - q;
		r = HueToRGB(p, q, h + 1.0 / 3.0);
		g = HueToRGB(p, q, h);
		b = HueToRGB(p, q, h - 1.0 / 3.0);
	}
	return [ roundToDecimal(r * 255, 0), roundToDecimal(g * 255, 0),
			roundToDecimal(b * 255, 0) ];
}
//funkcja pomocnicza do obliczania nasycenia
function HueToRGB(a, b, c) {
	if (c < 0)
		c += 1;
	if (c > 1)
		c -= 1;
	if (c < 1.0 / 6.0)
		return a + (b - a) * 6 * c;
	if (c < 1.0 / 2.0)
		return b;
	if (c < 2.0 / 3.0)
		return a + (b - a) * (2. / 3.0 - c) * 6;
	return a;
}

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	ctx.beginPath();
	ctx.fillStyle = "hsl(0,100%,50%)";
	ctx.fillRect(10, 10, 30, 30);
	ctx.fillStyle = "black";
	ctx.fillText("hsl(0, 100%, 50%)", 60, 25);
	ctx.beginPath();
	ctx.fillStyle = "hsl(110,100%,50%)";
	ctx.fillRect(10, 50, 30, 30);
	ctx.fillStyle = "black";
	ctx.fillText("hsl(110, 100%, 50%)", 60, 65);
	ctx.beginPath();
	ctx.fillStyle = "hsl(250,100%,50%)";
	ctx.fillRect(10, 90, 30, 30);
	ctx.fillStyle = "black";
	ctx.fillText("hsl(250, 100%, 50%)", 60, 105);