Colors HSL

HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+

HSL Colors

HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.

HSL stands for hue, saturation, and lightness.

HSL color values are specified with: hsl(hue, saturation, lightness).

Hue

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.

Saturation

Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.

Lightness

Lightness is also a percentage; 0% is black, 100% is white.

function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.value = hue; setColor(h); } function clickSat(sat) { var s = document.getElementById("sat01"); s.value = sat; setColor(s); } function clickLig(lig) { var l = document.getElementById("lig01"); l.value = lig; setColor(l); } function drawHueTable(hue) { var x, i, n; x = "

" x += ""; n = 0; for (i = 0; i <= 360; i++) { n = i; x += "

" + n + "

"; } x += ""; x += ""; n = 0; for (i = 0; i <= 360; i++) { n = i; x += ""; } x += ""; x += ""; document.getElementById("huetable").innerHTML = x; } function drawSatTable(hue) { var x, i; x = "" x += ""; for (i = 0; i <= 100; i++) { x += ""; } x += ""; x += ""; for (i = 0; i <= 100; i++) { x += ""; } x += "

" + i + "

"; document.getElementById("saturationtable").innerHTML = x; } function drawLigTable(hue) { var x, i; x = "" x += ""; for (i = 0; i <= 100; i++) { x += ""; } x += ""; x += ""; for (i = 0; i <= 100; i++) { x += ""; } x += "

" + i + "

"; document.getElementById("lightnesstable").innerHTML = x; } drawHueTable(0); drawSatTable(0); drawLigTable(0);

Try it Yourself

HSL color values are supported in all major browsers.

var btnclck = false; if (window.addEventListener) { window.addEventListener("mousedown", function () {btnclck = true; }); } else if (window.attachEvent) { window.attachEvent("onmousedown", function () {btnclck = true; }); } if (window.addEventListener) { window.addEventListener("mouseup", function () {btnclck = false; }); } else if (window.attachEvent) { window.attachEvent("onmouseup", function () {btnclck = false; }); } function tooltip(e, n) { var x; if (btnclck) { if (e == 0) { x = document.getElementById("hue01"); } if (e == 1) { x = document.getElementById("sat01"); } if (e == 2) { x = document.getElementById("lig01"); } x.value = n; setColor(x); } } function setColor(elmnt) { var ele, col, h, s, l, rgb; h = document.getElementById("hue01"); s = document.getElementById("sat01"); l = document.getElementById("lig01"); elmnt.value = Number(elmnt.value); if (parseInt(elmnt.value) < 0) {elmnt.value = "0";} if (elmnt.id == "hue01") { if (parseInt(elmnt.value) > 360) {elmnt.value = "360";} } else { if (parseInt(elmnt.value) > 100) {elmnt.value = "100";} } rgb = w3color("hsl(" + h.value + ", " + s.value + "%, " + l.value + "%)"); document.getElementById("result01").style.backgroundColor = rgb.toHslString(); document.getElementById("hsl01").value = rgb.toHslString(); document.getElementById("rgb01").innerHTML = rgb.toRgbString(); document.getElementById("hex01").innerHTML = rgb.toHexString(); for (i = 0; i <= 360; i++) { document.getElementById("huepointer" + i).style.display = "none"; } drawSatTable(h.value); drawLigTable(h.value); for (i = 0; i <= 100; i++) { document.getElementById("satpointer" + i).style.display = "none"; document.getElementById("ligpointer" + i).style.display = "none"; } document.getElementById("huepointer" + h.value).style.display = "inline"; document.getElementById("satpointer" + s.value).style.display = "inline"; document.getElementById("ligpointer" + l.value).style.display = "inline"; document.getElementById("linktocp").innerHTML = "

---

Use this color in our Color Picker

"; } function setFullColor() { var color = w3color(document.getElementById("hsl01").value); var hsl = color.toHsl(); document.getElementById("hue01").value = hsl.h.toFixed(0); document.getElementById("sat01").value = (hsl.s * 100).toFixed(0); document.getElementById("lig01").value = (hsl.l * 100).toFixed(0); setColor(document.getElementById("hue01")); } color = w3color("ff0000"); document.getElementById("hsl01").value = color.toHslString(); setFullColor();