manual de referência CSS

regras CSS @

大全 de propriedades CSS

Regra @charset CSS Funções CSS (Functions)

Função hsl() do CSS

A função hsl() do CSS pode ser usada para fornecer valores de cor ao usar CSS. Ela permite especificar o valor da cor através da especificação do tom, saturação e componente de luminosidade da cor.

Função CSS

Exemplo online

Definição da cor HSL:

Exemplo

<!DOCTYPE html>
<title>Manual Básico(oldtoolbag.com)</title>/title>　
<style>
body {
　　　　background: hsl(30,　100%,　50%);
　　　　color: hsl(30,　100%,　75%);
　　　　font-size:　1.3em;
　　　　}
</style>
<h1>Down in Africa</h1>
<p>Leva tempo fazer coisas que nunca fizemos...</p>

Teste e veja ‹/›

Definição e uso

A função hsl() usa tom, saturação e luminosidade para definir cor.

HSL é tom, saturação, luminosidade (em inglês: Hue, Saturation, Lightness).

Tom (H)É a propriedade básica da cor, o que é chamado de nome da cor comum, como vermelho, amarelo, etc.
Saturação (S)É a pureza da cor, quanto maior a pureza da cor, mais pura é a cor, mais suave se torna cinza, tome 0-10Número 0%.
Luminosidade (L), tome 0-100%, aumenta a luminosidade, a cor mudará para o branco; diminui a luminosidade, a cor mudará para o preto.

HSL é uma representação do ponto no sistema de coordenadas cilíndricas do modelo de cor RGB. Essas representações tentam ser mais intuitivas do que o RGB baseado no sistema de coordenadas cartesiano.

Versão suportada: CSS3

Compatibilidade do navegador

Os números na tabela representam a primeira versão do navegador que suporta essa função.

Função
hsl()	1.0	9.0	1.0	3.1	9.5

Sintaxe CSS

hsl(tom, saturação, luminosidade)

Valor	Descrição
tom - Tom	Definir tom (0 a 360) - 0 (ou 360) é vermelho, 120 é verde, 240 é azul
saturação - Saturação	Definir saturação; 0% é cinza, 100% é cor completa
luminosidade - Brilho	Definir brilho 0% como escuro, 50% é normal, 100% é branco

Exemplo de variação de cor

No gráfico a seguir, a tonalidade e o brilho de todas as amostras são completamente idênticas. A única diferença é a saturação.

`hsl(240, 100%, 50%)`
`hsl(240, 90%, 50%)`
`hsl(240, 80%, 50%)`
`hsl(240, 70%, 50%)`
`hsl(240, 60%, 50%)`
`hsl(240, 50%, 50%)`
`hsl(240, 40%, 50%)`
`hsl(240, 30%, 50%)`
`hsl(240, 20%, 50%)`
`hsl(240, 10, 50%)`
`hsl(240, 0%, 50%)`

Na figura a seguir, a cor e a saturação de todos os amostras são completamente idênticas. A única diferença é o nível de brilho.

`hsl(240, 100%, 100%)`
`hsl(240, 100%, 90%)`
`hsl(240, 100%, 80%)`
`hsl(240, 100%, 70%)`
`hsl(240, 100%, 60%)`
`hsl(240, 100%, 50%)`
`hsl(240, 100%, 40%)`
`hsl(240, 100%, 30%)`
`hsl(240, 100%, 20%)`
`hsl(240, 100%, 10%)`

Função CSS

Regra @charset CSS Funções CSS (Functions)