Todos sabemos la importancia que tienen las cores en cualquier cosa, ya sea en un diseño de página web, imagen, video o cualquier otro elemento gráfico. En esencia, la color es una experiencia subjetiva que resulta de la interacción entre la luz, el ojo y el cerebro. Agregar colores a la página web da una nueva vida al diseño completo y los elementos gráficos. Nadie le gusta visitar páginas web con colores blanco, negro y gris. Las colores hacen que los elementos sean más realistas y atractivos para la vista humana.
No solo teóricamente, la psicología también entra en juego cuando usamos colores en las páginas web. Ha sido probado científicamente que un conjunto específico de colores dispara emociones particulares en el cerebro humano, como colores de otoño como el naranja y el amarillo que representan la alegría o la felicidad, el color rojo para las temporadas festivas, y el azul considerado como calmante y de confianza. Además, seguramente ha notado que muchas empresas de alimentos a menudo usan rojo y amarillo en sus sitios web, las empresas farmacéuticas tienden a usar el verde en sus sitios, las empresas de fitness a veces usan naranja, y así sucesivamente.
Crear una interfaz de usuario incluye varias cosas, incluyendo diseños de página web en CSS, elementos, posicionamiento CSS, navegación, texto, etc. Otra cosa que actúa como factor para la interfaz de usuario es el uso de colores HSL en CSS. Las colores en CSS también tienen importancia en la interfaz de usuario, lo cual es uno de los factores que la mayoría de la gente evita.
No solo desarrolladores de sitios web, sino también fotógrafos profesionales y editores de video utilizan mucho este juego de colores. Crear una imagen perfecta es su trabajo, y para eso usan mucho el contraste de colores. Por lo tanto, elige el conjunto ideal de colores para los elementos es de gran importancia.
CSS posee muchas propiedades, incluyendo background-color, color, linear-gradient, entre otras, que permiten a los usuarios agregar o rellenar el color deseado en los elementos. Todas estas propiedades también ayudan a los usuarios a hacer que el texto sea colorido o incluso agregar patrones de color hermosos a los textos y elementos.
Todas las propiedades de color de CSS requieren de un método de color para definir el color y luego rellenar ese color en el elemento especificado. CSS posee algunos métodos de color integrados, como HSL, RGB, HSLA, Hexadecimal, entre otros. Sin embargo, estos métodos de color exigen una colección de valores enteros en diferentes unidades para obtener el color.
Aunque numerosos blogs y tutoriales se enfocan en los métodos RGB y Hexadecimal, existe la necesidad de cubrir los aspectos integrales del método HSL. En este blog, navegaremos profundamente en el papel de los Colores HSL en CSS, cubriendo todas las nuestras alrededor del método HSL y cómo difiere de otros métodos.
Antes de saltar directamente al método HSL, vamos a discutir los otros dos métodos de color de CSS: el RGB y el Hexadecimal, y por qué necesitamos los Colores HSL en CSS.
Diferencia entre RGB y Hex
El método RGB funciona considerando que cada color es una mezcla de los colores Rojo, Verde y Azul. Este método exige tres valores decimales asignados dentro del rango 0-255 en la función rgb(). Estos valores especifican el nivel de intensidad para cada uno de los tres colores, representando el valor 0 como la intensidad mínima y 255 como la intensidad máxima.
Aquí están algunos ejemplos de combinaciones de color RGB en diferentes intensidades:
Vamos a tomar un ejemplo para entender el funcionamiento del método RGB.
.container {
background-color: rgb(0, 200, 120);
width: 100%;
height: 100px;
}Salida:
Ahora vamos al método Hexadecimal. También funciona en el concepto de que cada color es una mezcla de rojo, verde y azul. El método Hexadecimal requiere de tres números Hex de dos dígitos y empieza con un signo ‘#’. Estos tres valores Hex especifican respectivamente el nivel de intensidad del rojo, el verde y el azul.
Como hay la participación de valores Hexadecimales, y la base Hexadecimal se encuentra en el rango de valor 0-15, donde los valores dentro del rango de 10-15 se representan por las letras A-F. Por lo tanto, 00 da el color con la menor intensidad, y FF resulta en el nivel de intensidad más alto.
Aquí están algunos colores Hex comunes con códigos:
Vamos a tomar un ejemplo para entender el funcionamiento del método Hex.
.container1{
background-color:#91D8E4;
}Salida:
Trabajar con los métodos RGB y Hexadecimal es conveniente y nos puede dar todo lo que queremos. Pero eso no es verdad. Trabajar con estos dos métodos no es tan fácil como parece. Vamos a ver cómo.
Problemas asociados con los códigos de color RGB y Hexadecimal.
Uno de los problemas significativos que estas dos metodos traen es que no son intuitivos. Esto significa que no funcionan según cómo el cerebro humano recoge colores. Cuando una persona ve una color, el cerebro humano no separa esa color en rojo, verde y azul. Por lo tanto, nos resulta difícil reconocer los colores a través de sus números RGB y hexadecimal o decimal.
Entre tales dificultades, una instancia que puede surgir en la vida diaria de los desarrolladores o pruebadores es la necesidad de conversión RGB a Hexadecimal o viceversa para una mejor comprensión y comunicación humana.
Al crear una interfaz de usuario, los diseñadores de UI y los desarrolladores web necesitan varios tonos de una determinada color para mantener una constante tema a través de la interfaz. Por ejemplo, 30 tonos de azul, 20 tonos de verde, 10 tonos de naranja, etc., dependiendo de la necesidad. Puede crear un desorden si usamos variables CSS para mantener estas muchas variaciones de colores. Cuando notamos que los valores RGB de todas estas variaciones no están relacionadas, las cosas empeoran.
Pero estos inconvenientes de los métodos RGB y Hexadecimal pueden eliminarse con los Colores HSL en CSS. Ahora vamos a comprender el papel de los Colores HSL en CSS empezando la discusión con qué significa el método HSL, cómo funciona y cómo supera las carencias de los métodos RGB y Hexadecimal.
¿Qué es HSL?
HSL es una abreviatura de Hue, Saturación y Luminosidad. En otras palabras, HSL se compone de tres factores de medición: Hue, Saturación y Luminosidad. Al igual que los otros dos métodos mencionados anteriormente, el método HSL también funciona en la observación de que cada color es una mezcla de los colores Rojo, Verde y Azul.
Como los colores primarios en el formato HSL son el Rojo, el Verde y el Azul, el círculo de colores RGB es el concepto central detrás de los Colores HSL en CSS.
El círculo de colores RGB (Rojo Verde Azul) representa principalmente colores rellenados dentro de un círculo. Este círculo muestra la relación entre los colores primarios, secundarios y terciarios. Sin embargo, existen tres tipos de círculos de colores: RGB (Rojo Verde Azul), CMY (Cian Magenta Amarillo) y RYB (Rojo Amarillo Azul).
La imagen adjunta representa el círculo de colores RGB. Puede observar que el rojo está en 0 grados, el verde en 120 grados y el azul en 240 grados. Vamos a explorar estas tres características y comprender lo que ocurre detrás de las escenas cuando usamos colores HSL en CSS.
Hue
La primera variable asignada en este método es el Hue al usar colores HSL en CSS. Es la medida del ángulo del color en el círculo de colores. El valor de ángulo definido se calcula a partir del eje x positivo en dirección antihoraria, y se devuelve el color en ese ángulo. Dado que es la medida de un ángulo, su valor predeterminado está en unidades de grado. Sin embargo, este método nos permite definir valores de ángulo en otras unidades, incluyendo rad, grad y turn.
El valor de la unidad de ángulo se encuentra en un rango de 0 a 360 grados. Rojo en 0 grados, verde en 120 grados y azul en 240 grados. Para rad, el rango de valores es de 0 a 6,28 rad. Las unidades de valor más comúnmente utilizadas en los colores HSL en CSS son los valores en grados.
Vamos a considerar un ejemplo para entender el funcionamiento de la Hue.
div {
border: 2px solid;
height: 100px;
background-color: hsl(123deg, 39%, 49%);
}Salida:
Aunque los valores de ángulo están restringidos entre 0-360, pueden aceptar valores menores que 0 grados y mayores que 360 grados. Cuando el valor es superior a 360, se convierte en un valor del rango restándole 360. En el caso de valores inferiores a 0 o valores negativos, el valor se suma a 360, y el valor resultante se utiliza para recuperar el color.
background-color: hsl(400deg, 39%, 49%);Salida:
background-color: hsl(-120deg, 39%, 49%);Salida:
<div class="container1">Container 1</div>
<div class="container2">Container 2</div>
div {
border: 2px solid;
height: 100px;
text-align: center;
font-size: 80px;
margin-bottom: 10px;
}
.container1 {
background-color: hsl(60, 39%, 49%);
}
.container2 {
background-color: hsl(420, 39%, 49%);
}Salida:
Si consideramos en términos de valores angulares, entonces 60 grados y 420 grados (420 – 360 = 60) ambos valores son los mismos. Por lo tanto, obtenemos el mismo color de fondo en ambos contenedores, como se observa en el ejemplo anterior.
.container1 {
background-color: hsl(90, 39%, 49%);
}
.container2 {
background-color: hsl(-270, 39%, 49%);
}Salida:
También aquí puede observar que 90 grados y -270 grados nos dan el mismo resultado por la misma razón que en el ejemplo anterior. 90 grados y -270 grados, ambos valores son los mismos si los consideramos en términos de valores angulares.
Ahora, vamos a pasar a la segunda característica del método HSL, es decir, la Saturación.
Saturación
La saturación define el nivel de pureza del color y cuánto el color será saturado o insaturado. En otras palabras, la característica de saturación manipula el nivel de intensidad del color. La medida de saturación acepta un valor entero en unidades de porcentaje para definir la saturación del color.
Vamos a tomar un ejemplo para comprender cómo funciona la Saturación.
.container{
background-color:hsl(60, 45%,49%);
}Salida:
Si el valor de la característica de saturación es alto, entonces la intensidad del color también es alta, y la cantidad de sombra gris en ese color será menor. Por lo tanto, un valor de 100% para la saturación nos dará un color puro, un valor de 50% resultará en la mitad de color y la mitad de sombra gris, y un 0% resultará en la sombra gris completa.
.container1{
background-color:hsl(60, 0%,49%);
}
.container2{
background-color:hsl(420, 25%,49%);
}
.container3{
background-color:hsl(420, 50%,49%);
}
.container4{
background-color:hsl(420, 75%,49%);
}
.container5{
background-color:hsl(420, 100%,49%);
}Salida:
En el ejemplo anterior, puede ver la diferencia que obtenemos en el color de fondo de los contenedores al aumentar el valor de la característica de saturación de 0% a 100%. En el valor de 0%, obtenemos el color gris completo en el contenedor 1, y a medida que aumenta el valor, la intensidad del color también aumenta. Finalmente, la intensidad es la más alta en 100% en el contenedor 5.
Como la característica de saturación acepta un valor en porcentaje, el valor obtenido cae en el rango de 0% a 100%. De alguna manera, el usuario también puede pasar valores mayores que 100% y menores que 0% en la característica de saturación.
Pero justo como la característica de tono, no hay ningún uso en pasar valores fuera de los límites porque si el usuario pasa un valor mayor que 100%, la intensidad del color permanece igual a 100%. En valores por debajo de 0% (valores negativos), la intensidad permanece igual a 0%.
.container1 {
background-color: hsl(60, 0%, 49%);
}
.container2 {
background-color: hsl(420, -25%, 49%);
}Salida:
Aquí, puede observar que hemos asignado valores de 0% y -25% para la característica de saturación, y en ambos contenedores, obtenemos el mismo color de fondo.
.container1 {
background-color: hsl(60, 100%, 49%);
}
.container2 {
background-color: hsl(420, 200%, 49%);
}Salida:
En este ejemplo, hemos inicializado los valores de 100% y 200% para la característica de saturación, y para estos dos valores diferentes, obtenemos el mismo color de fondo en ambos contenedores.
Ahora, es el momento de la característica final del método HSL utilizado en los Colores HSL en CSS, es decir, la Luminosidad.
Luminosidad
Como su nombre sugiere, la característica de Luminosidad controla la cantidad de luz en el color. En otras palabras, la luminosidad también puede describirse como la propiedad que controla cuánto ese color será, luminoso o oscuro. Al igual que la característica de saturación, la característica de luminosidad también requiere un valor entero en unidades de porcentaje.
Consideremos un ejemplo para entender el funcionamiento de la Luminosidad.
.container {
background-color: hsl(60, 39%, 49%);
}Salida:
.container1 {
background-color: hsl(60, 39%, 0%);
color: white;
}
.container2 {
background-color: hsl(420, 39%, 25%);
}
.container3 {
background-color: hsl(420, 39%, 50%);
}
.container4 {
background-color: hsl(420, 39%, 75%);
}
.container5 {
background-color: hsl(420, 39%, 100%);
}
Salida:
Aquí, puede observar que a la luminosidad de 0%, el color de fondo es negro profundo en el Contenedor 1, y a medida que aumenta el valor de luminosidad, la luminosidad del color aumenta, y a la luminosidad de 100% es completo; por lo tanto, el color de fondo es completamente blanco en el Contenedor 5.
Al igual que la característica de saturación, la característica de luminosidad acepta valores por encima de 100% y por debajo de 0%. Pero los valores por encima de 100% funcionan igual que el 100%, y los valores por debajo de 0% (valores negativos) funcionan igual que el 0%. Veamos esto en acción.
.container1 {
background-color: hsl(60, 39%, 0%);
}
.container2 {
background-color: hsl(420, 39%, -25%);
}Salida:
.container1 {
background-color: hsl(60, 39%, 100%);
}
.container2 {
background-color: hsl(420, 39%, 250%);
}Salida:
En este ejemplo, puede observar que aunque hemos asignado un valor de luminosidad de 100% en el Contenedor 1 y un valor de 200% en el Contenedor 2, aún así nos da el mismo resultado en el color de fondo.
Hemos estado discutiendo las tres características de los Colores HSL en CSS, pero eso no es todo. Otra característica bajo los Colores HSL en CSS es la “A”, que es una abreviación de “alfa”. Es la cuarta característica. La característica alfa especifica la opacidad del color. En otras palabras, la característica alfa simplemente ajusta el nivel de transparencia del color. En HSL, para usar las características alfa, se utiliza el método HSLA.
A diferencia de otras características de los Colores HSL en CSS, que requieren un valor compuesto por unidades, la característica alfa no requiere un valor con unidad. La característica alfa exige un valor sin unidad que oscila de 0 a 1. En 0, el color es invisible o oculto; en 1, la característica alfa está en su máximo, y el color es totalmente visible.
.container{
background-color:hsla(60, 39%,49%, 0);
}Salida:
.container{
background-color:hsla(60, 39%,49%, 1);
}Salida:
Aquí, ya que hemos asignado la característica alfa con un valor de 1, el color de fondo del contenedor se hace visible, y podemos iniciar el color de fondo.
Exigir un valor sin unidad no es lo único que distingue las características alfa. Una característica alfa puede aceptar cualquier valor entre 0 y 1, incluso los valores decimales (0.1, 0.2, 0.01), que no funciona en las otras características de los Colores HSL en CSS.
.container {
background-color: hsla(60, 39%, 49%, 0.5);
}Salida:
En este ejemplo, como puede observar, hemos asignado un valor de 0.5 (la mitad) a la característica alpha. Por lo tanto, como resultado, obtenemos el color de fondo con mitad de transparencia en el contenedor. No solo aceptan decimales de una cifra, las características alpha también aceptan decimales de dos cifras. Esto ofrece un control completo sobre el nivel de transparencia del color.
Aquí tenemos un ejemplo que lo muestra.
.container {
background-color: hsla(60, 39%, 49%, 0.25);
}Salida:
En este caso, hemos pasado un valor de 0.25, que es un valor con dos decimales, a la característica alpha.
Ventajas de utilizar colores HSL en CSS
Los colores HSL (Hue, Saturación, Luminosidad) son una adición relativamente reciente al módulo de color CSS, ofreciendo una manera más intuitiva y flexible de especificar colores en el desarrollo web. En comparación con los códigos de color RGB o hexadecimal tradicionales, los colores HSL en CSS proporcionan una gama de ventajas para diseñadores y desarrolladores.
En esta sección, exploraremos detalladamente las ventajas de utilizar colores HSL en CSS y discutiremos cómo pueden utilizarlos para crear diseños visualmente atractivos y accesibles para páginas web y aplicaciones.
En cuanto a la aplicación práctica, los colores HSL en CSS son considerados en muchos niveles profesionales para su uso debido a sus ventajas.
Hay varias ventajas de utilizar colores HSL, como se enumeran a continuación:
- Mejora la fluidez del trabajo en general, haciéndolo mucho más suave
- Extremadamente útil cuando solíamos obtener colores diferentes conservando el color base estándar
- Un método poderoso y directo que ofrece una gran posibilidad de colores.
- Trabaja en la manera práctica en que la gente observa colores y es fácil de aprender y leer rápidamente
- Los colores generados por el método HSL se expresan claramente, y es fácil imaginar el resultado.
Otra ventaja significativa de utilizar colores HSL en CSS es que también funciona como una alternativa a los RGB y se puede convertir fácilmente en RGB. Como ambos métodos RGB y HSL requieren una colección de valores numéricos para funcionar, podemos aprovechar los métodos que pueden convertir fácilmente los valores numéricos de los colores HSL en los valores fraccionarios para el método RGB.
Para hacer las cosas aún más fáciles, varios convertidores de color en línea pueden convertir los métodos de color de uno a otro. Todas estas ventajas hacen de los colores HSL en CSS un método preferido para definir colores en proyectos. Y hay muchas razones más por qué cada día aumenta el número de desarrolladores que eligen utilizar colores HSL en CSS en lugar de otros. Aunque la mayoría de los expertos en CSS todavía prefieren utilizar el método HEX o RGB en lugar de HSL, HSL gana atención día a día.
Aplicaciones de utilizar colores HSL en CSS
Los colores HSL en CSS proporcionan una manera versátil e intuitiva para especificar colores y tienen numerosas aplicaciones en el desarrollo web. Aquí están algunas de las aplicaciones clave de utilizar colores HSL en CSS:
Colores Tintados
A nivel profesional, para crear una temática constante a lo largo de la interfaz, el tema de la página web se diseña utilizando diferentes tonalidades de un color particular en las diferentes secciones de la interfaz. El método HSL resulta muy útil en situaciones como esta.
En este ejemplo, hemos considerado dos layouts básicos de sitio web. En ambos, la sección de encabezado se llena de un color de fondo, y la sección de contenido tiene el mismo color de fondo pero una tonalidad mucho más clara. Para obtener este efecto, hemos mantenido un valor bajo de característica de luminosidad en la sección de encabezado y alto en la sección de contenido.
Al experimentar con la característica de luminosidad en diferentes valores, podemos obtener tonalidades oscuras y claras del mismo color para utilizarlas en los temas del sitio web.
Colores de Sombra Oscura al Hacer Mousover
Es posible que haya observado que algunos elementos en la interfaz del sitio web cambian de color cuando el usuario pasa el mouse sobre ellos. Su color cambia de sombra clara a oscura. En este lugar, los Colores HSL en CSS entran en juego para proporcionar las sombras claras y oscuras de un color común.
button {
padding: 10px;
border-radius: 20px;
background-color: hsl(240, 39%, 70%);
color: white;
font-size: 20px;
}
button:hover {
background-color: hsl(240, 39%, 50%);
cursor: pointer;
}
Aquí, puede observar que en el botón superior, el color es de sombra clara, para eso hemos mantenido el valor de las características de luminosidad en 70%. Y después de hacer mousover, el color del botón cambia a una sombra oscura, como puede notar en el botón de abajo. Para obtener este efecto, hemos asignado un valor de 50% a la característica de luminosidad, que es menor que el botón superior.
Sombra de Color Blanco
La mayoría de las veces, necesitamos usar blanco como color de fuente para que el texto se vea un poco diferente de la interfaz completa del sitio web. Pero usar la misma sombra de blanco para cada texto aburre la experiencia del usuario. Para evitar esto, podemos usar diferentes sombras de blanco para hacer destacar el texto y mantenerlo interesante.
Los colores HSL en CSS pueden ayudarnos a obtener diferentes tonos de color blanco. Podemos agregar diferentes valores a la característica de luminosidad en el método HSL para obtener diferentes tonos de blanco.
.container1 {
color: hsl(30, 49%, 100%);
}
.container2 {
color: hsl(30, 49%, 90%);
}
.container3 {
color: hsl(30, 49%, 95%);
}
.container4 {
color: hsl(30, 49%, 85%);
}Salida:
En este ejemplo, puede observar que en todos los cuatro contenedores, el texto no es el color blanco básico. Hemos utilizado diferentes tonos de blanco para darle un aspecto interesante y mantenerlo blanco. Para eso, manipulamos el valor de la característica de luminosidad para el color de la fuente.
Tipos de Botón
Los colores HSL en CSS también son de gran utilidad cuando tenemos dos tonos diferentes del mismo color para los botones. Asignar diferentes tonos de un color común hace que sea fácil para el usuario identificar rápidamente cuál es el botón primario y cuál es el secundario.
En la vida real, se utilizan tonos oscuros para los botones primarios, y tonos claros para los colores secundarios. Para obtener los tonos claro y oscuro de un color común, pasamos valores altos y bajos a la característica de luminosidad en el método HSL.
Veamos esto en acción considerando un ejemplo.
.primary {
color: white;
background-color: hsl(10, 49%, 55%);
}
.secondary {
background-color: hsl(10, 49%, 80%);
}Salida:
En el ejemplo anterior, el botón de arriba es el primario y el botón de abajo es el secundario. Se utiliza un tono oscuro en el botón primario con un valor de luminosidad bajo, y se utiliza un tono claro en el botón secundario con un valor de luminosidad alto.
Colores de Tema Oscuro
El uso de un contraste de color correcto es fundamental en la interfaz de usuario. Especialmente cuando el usuario ha habilitado el tema oscuro en el sitio web. Según estudios realizados en 2022, el 81,9% de los usuarios utiliza el tema oscuro en sus smartphones. De esto, se puede imaginar la importancia del contraste de color en las interfaces de usuario de tema oscuro.
De acuerdo con el estándar de accesibilidad de WCAG, se debe mantener al menos un ratio de 4:5:1 para el texto del cuerpo contra superficies oscuras. Y para obedecer esta regla, se evita el uso de colores saturados en los temas oscuros. El uso de colores saturados también aumenta la fatiga ocular si se utiliza con un fondo oscuro.
En la figura anterior, es obvio que es mucho más fácil leer el texto con un valor de saturación bajo que el texto con un valor de saturación alto. Por lo tanto, siempre se recomienda utilizar colores no saturados contra fondos de color oscuro.
Cómo elegir el mejor especificador de color
Los tres métodos que hemos discutido tienen sus ventajas y desventajas. Depende del caso de uso en el que se utiliza el especificador de color para que sea el mejor. No existe un factor común en el que comparar todos los tres especificadores de color, pero vamos a examinar cada uno de estos.
Hexadecimal
Si no estás en ningún campo de diseño y creando proyectos para uso personal, entonces podrías tener que utilizar el método hexadecimal para especificar colores. Muchos desarrolladores prefieren el método hexadecimal debido a su simplicidad, que no incluye demasiada complejidad, como en los colores RGB y HSL en CSS.
Copia el código hexadecimal de tu color preferido y embeídalo en tu programa. Sin embargo, surgen desafíos cuando necesitamos manipular la opacidad del color. El método hexadecimal no brinda a los usuarios control sobre la opacidad del color.
RGB
Ahora, para elegir el método RGB: este método es útil para todos los desarrolladores y diseñadores profesionales en el campo de la edición y diseño de fotografías. Otra razón es que el método RGB es el especificador de color más comúnmente utilizado en muchos software de diseño populares, incluyendo CorelDraw, PhotoShop y Illustrator. Sin embargo, el método RGB falla cuando se trata de ofrecer diferentes gradaciones de un mismo color sin hacerlo demasiado complejo.
HSL
Ahora considere el método HSL. Los desarrolladores web profesionales y los diseñadores de interfaces de usuario suelen mantener un tema común a través de la interfaz. En esta situación, el uso de los colores HSL en CSS resulta útil debido a su capacidad para alterar la gradación del color cambiando los valores de las características de saturación y luminosidad. En resumen, todo se reduce a preferencias individuales. Puedes elegir cualquiera de estos tres especificadores para realizar tu trabajo.
Compatibilidad del Navegador
No hay uso en especificar colores si los colores definidos no proporcionan la salida deseada en los navegadores. Para evitar una situación así, el especificador de color utilizado en el diseño de la interfaz debe ser compatible con cada navegador.
Afortunadamente, el funcionamiento de los colores HSL en CSS es completamente independiente del navegador. El método HSL es totalmente compatible con los navegadores. Así que, no importa qué navegador el usuario use, siempre llegará a la página web con colores bien definidos.
Sin embargo, puedes realizar pruebas de navegador cruzado para asegurarte de que los colores HSL en CSS dan el resultado deseado en cada navegador. Los planes de pruebas de calidad continua (es decir, LambdaTest) te ayudan a ejecutar pruebas de compatibilidad de navegador cruzado en diferentes navegadores reales, dispositivos y combinaciones de SO. Verifica si los colores CSS especificados funcionan correctamente en navegadores y dispositivos.
¡Acabando!
Este blog nos enseñó sobre el papel de los colores HSL en CSS y cómo difieren de otros métodos de color. También discutimos las aplicaciones de los colores HSL en CSS y sus beneficios. También aprendimos cómo los colores HSL en CSS proporcionan una mayor flexibilidad y precisión al especificar colores en el diseño web.
Al utilizar colores HSL en CSS, los diseñadores pueden tener más control sobre la saturación y la luminosidad de los colores, lo que resulta en un espectro más amplio de matizaciones y sombras disponibles para uso en sitios web y aplicaciones para cumplir con la identidad o visión estética de una marca.
Los colores HSL en CSS permiten una mejor accesibilidad para personas con discapacidades; simplemente ajustando la luminosidad y la saturación de los colores, creando más contraste y legibilidad para el texto y otros elementos de diseño, haciendo que sea más fácil para los usuarios navegar y entender el contenido. En general, los colores HSL en CSS son una herramienta poderosa para los diseñadores y desarrolladores web para crear esquemas de color vibrantes y accesibles en sus diseños web.
Source:
https://dzone.com/articles/create-cohesive-ux-using-hsl-colors-in-css