manual de referencia CSS

CSS @reglas (RULES)

completa lista de atributos CSS

Regla @charset CSS Funciones CSS (Functions)

Función CSS hsl()

La función CSS hsl() se puede usar para proporcionar valores de color cuando se utiliza CSS. Permite especificar el valor del color mediante el色相、饱和度和光成分。

Función CSS

Ejemplo en línea

Definición del color HSL:

Ejemplo

<!DOCTYPE html>
<título>Tutorial básico(oldtoolbag.com)</título>　
<style>
cuerpo {
　　　　fondo: hsl(30,　100%,　50%);
　　　　color: hsl(30,　100%,　75%);
　　　　fuente-tamaño:　1.3em;
　　　　}
</style>
<h1>Down in Africa</h1>
<p>llevará un tiempo hacer lo que nunca hemos hecho...</p>

Prueba a ver ‹/›

Definición y uso

La función hsl() utiliza el tono, la saturación y la luminosidad para definir el color.

HSL es el tono, la saturación y la luminosidad (en inglés: Hue, Saturation, Lightness).

Tonos (H)Es la propiedad básica del color, es decir, el nombre del color comúnmente dicho, como rojo, amarillo, etc.
Saturación (S)Es la pureza del color, cuanto mayor sea, más puro será el color, y más gris se volverá gradualmente, tomar 0-10Número del 0%.
Luminosidad (L), tomar 0-100% aumenta la luminosidad, el color cambia hacia el blanco; disminuye la luminosidad, el color cambia hacia el negro.

HSL es una representación del punto en el sistema de coordenadas cilíndricas del modelo de color RGB. Estos dos métodos intentan ser más intuitivos que el RGB basado en la estructura geométrica del sistema de coordenadas cartesiano.

Versión de soporte: CSS3

Compatibilidad del navegador

Los números en la tabla representan la versión del primer navegador que admite esta función.

Función
hsl()	1.0	9.0	1.0	3.1	9.5

Sintaxis CSS

hsl(hue, saturación, luminosidad)

Valor	Descripción
hue - Tonos	Definir el tono (0 a 360) - 0 (o 360) es rojo, 120 es verde, 240 es azul
saturación - Saturación	Definir la saturación; 0% es gris, 100% es todo el color
luminosidad - Brillo	Definir el brillo 0% como oscuro, 50% es común, 100% es blanco

Ejemplo de cambio de color

En el siguiente gráfico, los tonos y brillos de todos los ejemplos son completamente iguales. La única diferencia es la saturación.

`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%)`

En la siguiente imagen, los tonos y saturaciones de todos los ejemplos son completamente iguales. La única diferencia es el nivel de brillo.

`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%)`

Función CSS

Regla @charset CSS Funciones CSS (Functions)