Cores HSL

Calculadora HSL

rgb(255, 0, 0)
#ff0000

EU:

Cores HSL

Os valores de cor HSL são suportados no IE9+, Firefox, Chrome, Safari e no Opera 10+.

HSL significa matiz, saturação e leveza.

Os valores de cor HSL são especificados com: .hsl(hue, saturation, lightness)

Matiz

Matiz é um grau na roda de cores de 0 a 360. 0 é vermelho, 120 é verde, 240 é azul.

Saturação

A saturação é um valor percentual; 0% significa um tom de cinza e 100% é a cor completa.

Leveza

A leveza também é uma porcentagem; 0% é preto, 100% é branco.

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

" + i + "

"; document.getElementById("saturationtable").innerHTML = x; } function drawLigTable(hue) { 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);

Tente você mesmo

Os valores de cor HSL são suportados em todos os principais navegadores.

Exemplo

<style>

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

</style>

❮ Anterior Próximo ❯

Tutorial de cores

Esquemas de cores

Tendências de cores

Padrões de cores

Cores HSL

Calculadora HSL

Cores HSL

Matiz

Saturação

Leveza

Tente você mesmo

Exemplo