En mi formación tanto académica como profesional, he visto la mayoría de las veces que en la web utilizamos los modos RGB o hexadecimal para crear nuestras paletas de colores, dando así vida y personalidad a nuestros sitios. Si bien hasta hoy todo iba bien con estos modos de color, siempre se sentía tener poco control sobre el color.
Hace algunas semanas en ABEHA, estuvimos revisando buenas prácticas para obtener un diseño de interface atractivo y fue aquí donde me quedé sorprendido pensando “dónde habías estado HSL, el mejor modelo de color para la web”.
Y es que solo bastó una lectura y una plática constructiva con el equipo para entenderlo, manejarlo e inclusive empezar a trabajar con él, por lo que en esta entrada veremos a qué se refiere.
¿Qué es el modelo de color HSL o HSB?
Este es un modelo de color utilizado en aplicaciones gráficas como apps móviles, sitios o sistemas web, donde las siglas, a diferencia del famoso RGB, no son colores, si no valores o parámetros del color:
- H (Hue): Indica el matiz de color, es decir, si es rojo, amarillo, azul, etc.
- S (Saturation): Este valor indica qué tan intenso es el color, qué tan saturado es.
- L/B (Lightness o brightness): Indica qué tan claro u oscuro es el color, qué tan luminoso es.
El valor de H (matiz) va del 0 al 360° y corresponde al ángulo donde se encuentra dicho color en la rueda cromática RGB.
El valor de S (saturación) va del 0 al 100%, indicando que el 0% es un color totalmente gris y el 100% la saturación máxima.
Por su parte L (luminosidad) va del 0 al 100%, indicando el 100% como su brillo máximo.
¿Cómo utilizarlo?
Entendiendo los valores anteriores, utilizarlo es muy sencillo. Pongamos como ejemplo nuestro color corporativo naranja.
El valor hexadecimal de nuestro naranja es #FF9E18 y el valor de RGB es 255, 158, 24. Si observamos bien, entender cómo se forma nuestro color es complejo ya que en estos modelos los valores son basados en la suma del rojo, verde y azul, por lo que no se tiene un valor único para el matiz.
Por otra parte, el modelo HSL si cuenta con este valor, quedando nuestro naranja en 33° (matiz), 90% (saturación), 100% (luminosidad). Es así como podríamos generar una gama de colores basados en nuestro naranja, jugando solamente con la saturación y el matiz.
Así es como podemos crear paletas de colores recordando solo el número correspondiente del ángulo donde se encuentra cada color, teniendo mejor control del mismo.
Quizá te pueda interesar
Ventajas de utilizar HSL
Si aún no te convences del porqué utilizarlo, aquí te lo ponemos puntualmente
1. Mayor facilidad para ajustar colores
- HSL: Permite modificar fácilmente el tono (Hue), la saturación (Saturation) y la luminosidad (Lightness).
- RGB/HEX: Es más difícil de manipular directamente, ya que los cambios en un solo valor pueden alterar el color de manera impredecible.
2. Mejor comprensión entre colores
- HSL: Organiza los colores de forma lógica en un círculo cromático, facilitando la selección de tonos.
- RGB/HEX: No sigue un patrón intuitivo, lo que dificulta encontrar colores complementarios o análogos.
3. Mayor flexibilidad en efectos y diseño dinámico
- HSL: Es ideal para crear variaciones de un color (oscurecer, aclarar, desaturar) con simples ajustes en el tercer valor (Lightness).
- RGB/HEX: Necesita cálculos complejos para lograr efectos similares.
4. Más intuitivo para diseñadores y desarrolladores
- HSL: Permite especificar colores con términos que tienen sentido visual (ejemplo: “50% de luz” para un tono medio).
- RGB/HEX: Requiere recordar combinaciones numéricas sin un significado visual directo.
5. Mejor rendimiento en temas oscuros y accesibilidad
- HSL: Facilita adaptar los colores a distintos modos (oscuro/claro) sin perder contraste ni legibilidad.
- RGB/HEX: Ajustar la luminosidad de un color implica modificar sus tres componentes, lo que puede ser más complicado.
En resumen, HSL ofrece una forma más intuitiva, flexible y práctica de manejar colores, especialmente en diseño UI/UX y en temas con variaciones dinámicas.
Te dejamos algunos ejemplos.
Espero que haya sido de tu interés esta publicación y déjanos un comentario si ahora ya piensas que HSL es el mejor modelo de color para la web. Si te gustó esta entrada por favor compártela en tus redes, pronto seguiremos hablando de UI&UX.
Síguenos en Facebook, Instagram y Linkedin para ver más contenido que te puede ser de utilidad.
Referencias:
Refactoring UI, Adam Wathan y Steve Schoger
HSL colores más intuitivos de ui-form-mars - https://www.uifrommars.com/que-es-hsl/
Un comentario en “HSL, el mejor modelo de color para la web”
Muy interesante, definitivamente lo pondré en práctica en mis proyectos con CSS
¡Gracias por compartir!