HSL a HEX

Comparar HSL con HEX

CSS 3 introduce otra forma de definir el color usando HSL (del inglés. Hue, Saturation, Lightness). es un modelo en el que el color está determinado por tres parámetros: tono, saturación y luminosidad. Echemos un vistazo a cada parámetro por separado. La ventaja clave de HSL es la capacidad de especificar características de color de forma independiente entre sí. Esto abre tremendas oportunidades para ti. Puede hacer que el color sea más brillante, más oscuro, más saturado o desaturado fácilmente. Y manteniendo su sombra. O viceversa: cambie los tonos sin cambiar su saturación o brillo. A menudo, los preprocesadores se utilizan para utilizar estas funciones, pero es posible sin ellos. La función hsl () se usa para especificar colores HSL. La función toma tres valores, separados por una coma: Tono, Saturación y Luminosidad. Al cambiar los valores de saturación y brillo, puede obtener tonos adyacentes para un color en particular.

En la mayoría de los casos, es posible reconocer un color por un código hexadecimal, teniendo en cuenta solo los primeros dígitos de los pares. En el siguiente ejemplo, está claro que el color se mezcla con mucho rojo, un poco de azul y nada de verde. Comprender el color mediante código hexadecimal permite que un diseñador web navegue por el código de la página más rápido y, además, siempre puede impresionar a sus colegas o clientes diciendo Ah, qué maravilloso tono de burdeos. También puede cambiar fácilmente el brillo, el tono o la saturación de un color editando solo su código hexadecimal. En el primer ejemplo a continuación, uno de los pares se cambia en pasos del 10%, mientras aumenta el brillo del color. En el segundo ejemplo, el brillo aumenta, pero la saturación disminuye. Los valores RGB también se pueden especificar utilizando valores de color hexadecimales (HEX) en la forma: #RRGGBB, donde RR (rojo), GG (verde) y BB (azul) son valores hexadecimales de 00 a FF (lo mismo que el decimal 0- 255). El sistema hexadecimal, a diferencia del sistema decimal, se basa, como su nombre indica, en el número 16.