Colores HSL


Calculadora de LGV


 
rgb(255, 0, 0)
#ff0000


H:
S:
L:

Colores HSL

Los valores de color HSL son compatibles con IE9+, Firefox, Chrome, Safari y Opera 10+.

HSL significa tono, saturación y luminosidad.

Los valores de color HSL se especifican con: .hsl(hue, saturation, lightness)


Matiz

El tono es un grado en la rueda de colores de 0 a 360. 0 es rojo, 120 es verde, 240 es azul.


Saturación

La saturación es un valor porcentual; 0% significa un tono de gris y 100% es el color completo.


Ligereza

La ligereza también es un porcentaje; 0% es negro, 100% es blanco.

"; } x += ""; x += ""; n = 0; for (i = 0; i "; } x += ""; x += ""; document.getElementById("huetable"). innerHTML = x; } function dibujarSatTable(tono) { var x, i; x = "" x += ""; for (i = 0; i "; } x += ""; x += ""; for ( yo = 0; yo "; } x += "
" + i + "
"; document.getElementById("saturationtable").innerHTML = x; } function dibujarLigTable(tono) { var x, i; x = "" x += ""; for (i = 0; i "; } x += ""; x += ""; para (i = 0; i "; } x += "
" + i + "
"; document.getElementById("lightnesstable").innerHTML = x; } drawHueTable(0); drawSatTable(0); drawLigTable(0);

Inténtalo tú mismo

Los valores de color HSL son compatibles con todos los navegadores principales.

Ejemplo

<style>
div {
    background-color: hsl(180, 50%, 50%);
    color: hsl(0, 0%, 100%);
}
</style>

❮ Anterior Próximo ❯