¿Qué es HSL y por qué los diseñadores deberían dominarlo?

El color es una de las herramientas más poderosas en el juego de herramientas de un diseñador, pero trabajar con sistemas tradicionales como Hex y RGB a veces puede sentirse limitante. Estos formatos funcionan, pero no reflejan cómo vemos o pensamos en el color. ¿Necesita un tono más ligero o quiere igualar la saturación en diferentes tonos? Te quedas adivinando.

Ahí es donde entran Hue, Saturation y Lightness (HSL). Hace que los ajustes de color sean más visuales y predecibles, y Divi 5 ahora lo admite de forma nativa gracias a sus colores relativos y lanzamiento de características HSL. Exploremos cómo funciona y por qué querrás dominarlo.

Por qué la mayoría de los diseñadores luchan con las opciones de color

Las herramientas de color a menudo no coinciden con cómo pensamos naturalmente en el color. Ves un tono de azul que amas, pero la única forma de capturarlo es a través de un código hexadecimal como #4A90E2. Esas letras y números no significan nada para tu cerebro.

Los colores hexadecimales se hacen mezclando valores rojos, verdes y azules. Cada par (como 4A, 90, E2) muestra cuánto de cada color se usa, de 0 a 255. Juntos, crean el color final #4A90E2.

Es posible que tenga problemas para averiguar qué números cambiar cuando necesita una versión más ligera de su marca azul. ¿Debería aumentar todos los valores de RGB por igual? ¿O ajustar solo un canal RGB (rojo, verde o azul)? Los números no coinciden con lo que sus ojos esperan, por lo que se ajusta y obtiene una vista previa hasta que se sienta bien.

Los sistemas de color tradicionales crean problemas mayores cuando trabaja en diferentes contextos. La creación de variaciones de color se convierte en puro conjeturas. Desea cinco tonos que funcionen juntos, pero no hay sistema para ello. Lightening #4A90E2 a #6BA3E8 puede verse bien, o puede parecer desgarrado. No lo sabrás hasta que lo vea.

Obtener sombras cambiando los códigos hexadecimales no es simple. Los nuevos valores hexadecimales ( #6BA3E8) se eligen cuidadosamente a la izquierda para crear un tono más ligero de #4A90E2. A la derecha, solo hacer cambios nominales (#3B99E5) no aligera el color, sino que lo cambia por completo.

Este flujo de trabajo lento y manual tarda horas en completarse. Ajuste los valores, verifica la vista previa y vuelve a ajustar, luchando contra las herramientas en lugar de diseñar. Su atención es absorbida por detalles técnicos cuando debe centrarse en cómo los colores hacen que las personas se sientan.

Muchos diseñadores terminan evitando la experimentación de color porque el proceso se siente tan torpe. Te quedas con opciones seguras o copias de paletas de otros sitios. Las herramientas que deberían ayudarlo a explorar la creatividad del color en realidad la limitan.

El problema con los valores de RGB estáticos

Los valores de RGB no siempre se comportan como esperas. El verde parece mucho más brillante que el azul en la misma configuración, pero el sistema los trata por igual. RGB (128, 128, 128) es un gris medio perfecto, pero la forma en que se ve puede variar según la pantalla, la iluminación o el perfil de color utilizado.

¿Quieres una versión más ligera del color de tu marca? Puede intentar aumentar los valores RGB y, a veces, obtienes lo que esperabas. Otras veces, obtienes algo que parece lavado y extraño. No hay forma de decirlo de antemano.

El color azul de la marca con valores de RGB aumentó por igual en +50, lo que resulta en un tono lavado, que no es el tono más ligero esperado. Esto muestra que agregar la misma cantidad a cada canal RGB no siempre produce tonos de color predecibles o equilibrados.

Los colores RGB también cambian entre diferentes programas. Esto sucede debido a las diferencias en los perfiles de color, los motores de representación y cómo los navegadores interpretan esos valores. Elija un tono perfecto en Photoshop, copie el código hexadecimal a su sitio web y aún podría parecer ligeramente diferente. Las pautas de la marca se vuelven más difíciles de aplicar cuando el mismo código de color se ve ligeramente diferente entre los navegadores y las herramientas de diseño.

Cada color cambia a su manera cuando intenta aclararlo u oscurecerlo. Debido a que RGB no ajusta los colores de manera uniforme, algunos tonos se desvanecen más rápido o cambian de maneras inesperadas. Algunos tonos desaturan más rápido que otros a medida que aumenta la ligereza. Tu azul se vuelve gris mientras el rojo permanece vibrante. Tu púrpura se fangosa mientras tu naranja permanece limpia.

El trabajo de color se convierte en prueba y error en lugar del diseño intencional.

¿Cuál es el sistema de tono, saturación y ligereza (HSL)?

El tono, la saturación y la ligereza (HSL) dividen el color en tres partes que coinciden con la forma en que su cerebro realmente piensa en el color. Hue elige el color base de una rueda de 360 ​​opciones. La saturación controla cuán vibrante o gris se ve ese color. La ligereza decide si es oscura, brillante o en algún lugar entre.

Cuando piensas: "Quiero un verde oscuro", ya estás pensando en los términos de HSL. Sabes que quieres verde (Hue), probablemente bastante rico (saturación), y en el lado más oscuro (ligereza).

Cómo funcionan los tres componentes juntos

Hue funciona como una rueda de color cortada del espectro de luz visible. Los extremos conectan el rojo a la magenta, creando un bucle suave de cada color posible. ¿Quieres la naranja perfecta? Comience en rojo (0 grados) y mueva hacia el amarillo alrededor de los 30 grados.

La saturación mide la pureza del color como un porcentaje. El cero por ciento elimina todo el color, dejando el gris. El cien por ciento da la versión más vívida posible. Piense en la saturación como la diferencia entre un signo de neón y una acuarela apagada.

Cómo funcionan los colores HSL, inspirados en el gráfico en Wikipedia sobre el mismo tema

La ligereza varía de 0% (negro puro) a 50% (neutral) a 100% (blanco puro). La mayoría de los colores utilizables viven entre 20% y 80% de ligereza. Esto coincide con cómo piensas naturalmente en hacer que los colores sean más claros o más oscuros.

Por qué los constructores de páginas generalmente evitan HSL

La mayoría de los constructores de páginas se quedan con códigos hexadecimales y RGB por razones prácticas, no porque estos sistemas funcionen mejor. Los desarrolladores de constructor enfrentan obstáculos técnicos reales. Los usuarios ya conocen códigos hexadecimales de Photoshop y otras herramientas de diseño. La conversión entre sistemas de color requiere un procesamiento adicional.

Apoyar a HSL significa construir nuevas interfaces y educar a los usuarios sobre conceptos desconocidos, a menos que el selector de color HSL se clava perfectamente. Este enfoque conservador tiene sentido desde una perspectiva comercial, incluso si limita las posibilidades creativas.

Crear variaciones de color perfectas con los nuevos controles HSL de Divi 5

HSL suena muy bien en teoría, pero la teoría no crea sitios web. Necesita herramientas que respalden este enfoque. La mayoría de los constructores de páginas lo obligan a volver a los códigos hexadecimales y las conjeturas RGB. Divi 5 cambia todo sobre cómo trabaja con el color. Pero primero:

¿Qué es Divi?

Divi es un constructor de páginas que funciona de manera diferente a otros constructores de páginas de WordPress. Obtiene herramientas de diseño visual mezcladas con controles de tipografía serios. El editor en vivo muestra sus cambios al instante. Ajuste los tamaños de fuente, el espacio de ajuste de la línea y vea la actualización de su página allí mismo.

Puede soltar más de 200 módulos en cualquier lugar que desee. Los bloques de texto, los titulares y las piezas de contenido especiales juegan bien juntas.

Esto es lo que hace que Divi sea especial: 2000+ diseños preparados para negocios creados para negocios reales. Estamos hablando de diseños reales, no plantillas de inicio básicas. ¿Necesitas algo para tu restaurante? Hay un diseño para eso. ¿Ejecutando un estudio de fotografía? Te tenemos cubierto. Los consultores y las nuevas empresas tecnológicas también obtienen sus propios diseños.

Cada diseño conoce su industria. Los colores, el espacio y el contenido fluyen tienen sentido sobre cómo piensan y navegan por sus clientes.

Tome el control completo del sitio

El constructor de temas pone cada pieza del estilo de texto de su sitio en sus manos. Construya encabezados personalizados que hablen el idioma de su marca. Diseñe páginas de blog que hacen que los artículos largos sean fáciles de leer. Sus páginas de error 404 pueden mantener las mismas fuentes y estilo que el resto de su sitio.

Divi Ai trae inteligencia artificial directamente a su flujo de trabajo. Genere titulares que suenen como si los escribieras. Cree una copia de producto que coincida exactamente con la voz de su marca.

Construye secciones de página completas que comprenden su negocio.

Escribe fragmentos de código cuando los necesitas.

La divi ai también funciona con sus imágenes dentro del constructor. Describa lo que necesita arreglar en cualquier imagen y cómo hace esos cambios.

Incluso genera imágenes completamente nuevas a pedido.

Omita el problema de la página en blanco con sitios rápidos de divi

Los sitios rápidos de Divi solucionan el problema de la página en blanco que detiene muchos proyectos antes de comenzar. Los sitios de inicio profesionales vienen con la tipografía ya configurada. Nuestro equipo de diseño construye estas plantillas con imágenes y obras de arte únicas que no verá en ningún otro lugar.

Los sitios rápidos de Divi con Divi Ai también pueden construir diseños personalizados basados ​​en la descripción de su negocio. Cuéntelo sobre su práctica o restaurante de consultoría, y crea páginas relevantes con una copia adecuada para su industria.

Esto va más allá de solo una estructura alámbrica. Obtiene titulares reales, copia corporal e imágenes que tienen sentido para su negocio. Puede configurar sus fuentes y colores de marca por adelantado o dejar que la IA elija por usted.

Después, todo permanece completamente editable, por lo que puede refinar la tipografía para que coincida con su visión.

¿Qué hay de nuevo en Divi 5?

Divi 5 es la próxima versión del constructor de páginas, actualmente en pruebas alfa y lista para nuevos proyectos de sitios web. Nos centramos en mejoras prácticas que aceleran su trabajo diario y hacen que los sitios de construcción sean más agradables.

Las mejores partes de la actual Divi se mantuvieron cuando reconstruimos todo lo demás. El diseño de interfaz fresco cumple con el rendimiento mejorado debajo del capó. Las prácticas de codificación modernas alimentan todo el sistema ahora.
Las páginas se cargan más rápido que antes. Los controles responden más rápido cuando hace clic en ellos. La tipografía se mantiene constante en todo su sitio sin trabajo manual adicional.

Aquí hay algunos aspectos destacados:

• El marco completo reconstruye el antiguo sistema de shortcode. Todo se ejecuta en una arquitectura moderna basada en bloques que los navegadores manejan mucho mejor.
• El sistema FlexBox de Divi 5 le brinda control directo para construir diseños modernos y receptivos, administrar fácilmente la alineación, el espacio y el envoltorio sin código personalizado.
• El sistema de color HSL trae controles de color que coinciden con cómo piensan los diseñadores. Ajuste el tono, la saturación y la ligereza en lugar de adivinar con códigos hexadecimales.
• Siete puntos de interrupción personalizados reemplazan el viejo límite de tres tamaño. Su tipografía se ve perfecta en cada dispositivo que usan sus visitantes.
• Las funciones CSS incorporadas medias calc (), clamp (), min () y max () funcionan correctamente en el editor visual. Cree un texto receptivo que escala naturalmente sin código.
• Las variables de diseño globales almacenan fuentes, colores y espacios en un solo lugar. Cambie su fuente principal de encabezado una vez. Cada H1 en su sitio se actualiza automáticamente.
• El sistema de diseño basado en preestablecidos incluye preajustes de elementos para módulos individuales más preestablecidos de grupos de opciones para estilos de tipografía completos. Para mantener las cosas consistentes, uselas en diferentes módulos.
• Una nueva interfaz Visual Builder obtiene paneles acoplables, ventanas con pestañas, atajos de teclado y una mejor vista de capas con migas de pan. La navegación se vuelve mucho más fácil.
• Las filas anidadas colocan filas dentro de otras filas para diseños complejos. Cree arreglos de diseño avanzados sin tipos de sección especiales.
• Los grupos de módulos combinan diferentes elementos en unidades individuales. Esto facilita la gestión de diseños de texto complejos, y también puede crear módulos personalizados.
• El espacio de trabajo de múltiples paneles mueve paneles donde sea que funcione mejor. Mantenga abiertos los controles de tipografía mientras ajusta otras cosas de diseño.
• Copias de gestión de atributos , pastas y reinicia estilos de tipografía entre elementos. Elija atributos específicos para transferir en lugar de copiar todo.
• Los modos de interfaz de luz/oscura reducen la fatiga visual durante las largas sesiones de diseño.
• La escala de lienzo muestra cómo se ve la tipografía en diferentes tamaños de pantalla sin dejar el editor.

Descubra todos los comunicados de características Divi 5

Cómo crear colores HSL con Divi 5

Como se mencionó, Divi 5 reconstruye el selector de color desde cero. La nueva interfaz elimina los códigos hexadecimales para los controles HSL que funcionan como su cerebro piensa en el color. Tres controles deslizantes manejan el trabajo:

• Hue acepta 0–360 grados, y los valores negativos se envuelven (por ejemplo, -60 se convierte en 300). La rueda de color se conecta en ambos extremos. Zero, 360 y Negated 360 te dan el mismo rojo. ¿Necesita un color complementario? Establezca el tono a 180 grados desde su punto de partida.
• La saturación se extiende del 0% al 100% y controla cuán vívido se ve tu color. El cero por ciento elimina toda la intensidad del color, dejando gris. El cien por ciento da un color completo.
• La ligereza funciona en el mismo rango de porcentaje. Zero hace negro, al 100% crea blanco y el 50% muestra la forma pura de cualquier tono que hayas elegido.

Los controles se actualizan en vivo mientras se arrastra. Aplicar botones o actualizar retrasos no interrumpirá su flujo de trabajo.

1. Construya colores relativos a partir de colores globales

Los colores relativos le permiten crear nuevos colores basados ​​en los colores globales existentes modificando los componentes HSL individuales. Comience en el Administrador de variables de diseño agregando un nuevo color.

Usando el selector de color, configure su color base (este podría ser el color de la marca) para que coincida con el color global primario existente.

Configuremos los colores secundarios utilizando su cambio de tono primario para crear colores complementarios. Tome su color principal, con la ligereza establecida en 25%.

Incluso puedes jugar con el tono o la saturación para crear un nuevo color como color secundario.

Las muestras de color le muestran información importante de un vistazo. Puede saber si algo usa una variable de diseño y ver cómo los filtros HSL modifican el color base. Esta retroalimentación visual lo ayuda a comprender lo que está sucediendo con sus relaciones de color.

Del mismo modo, cree tonos más oscuros para el color de texto de encabezado y los colores globales del color del texto del cuerpo usando el color primario como base.

Puede, por supuesto, crear más colores decorativos aquí, y aún puede ingresar valores de color hexadecimal, RGB o de color nombrados manualmente.

2. Administrar relaciones variables de diseño de múltiples capas

Las variables de diseño pueden apilarse una encima de la otra para sistemas de color complejos. Según su primaria, puede crear colores decorativos adicionales, como Burnt Moss. Luego, reduzca la opacidad del musgo quemado para construir un color de sombra.

Estas relaciones anidadas muestran cómo Divi 5 maneja jerarquías de color complejas. Cuando ajusta el color primario, primero las actualizaciones de color de musgo quemado, activando el color de la sombra para actualizar. Toda la cadena permanece conectada.

Este enfoque cambia la gestión del color de la adivinación aleatoria en un sistema predecible. La paleta de colores de su sitio web se mantiene armoniosa sin ajustes manuales en cada elemento.

3. Aplicar colores HLL a su sitio

Presione cualquier módulo de texto y abra el selector de color. Sus variables guardadas aparecen con indicadores. Haga clic en "Color secundario", y completará el fondo de una sección. El mismo color funciona para botones, fondos y bordes.

La tipografía funciona cuando te apegas a un tono pero cambia la ligereza. Los titulares podrían usar color primario con -25% de ligereza. El texto del cuerpo se vuelve un poco más ligero al -15%. Los enlaces se encuentran en -45%. Todo se relaciona pero permanece despejado.

Los fondos necesitan los colores de su marca atenuados. Empuje la ligereza hasta el 95%. Saturación de caída al 15%. Ahora tienes antecedentes de marca que no luchan contra el contenido. Los botones funcionan con saturación completa. Los estados de desplazamiento empujan la ligereza por una muesca. Mismo color, diferente intensidad.

El texto ligero necesita fondos oscuros. Los números de ligereza te dicen lo que funciona. Texto a 50% de ligereza se combina con fondos por debajo del -30% de la ligereza.

Las secciones con texto oscuro sobre fondos de luz invierten los valores. Los mismos tonos, la misma saturación. Intercambia los valores de la ligereza y terminaste. Y, por supuesto, todos estos colores mantienen sus enlaces incluso después de ser aplicados. Cambie una variable y todo se adapte. ¡Fácil como eso!

4. Guarde sus colores HSL como preajustes reutilizables

Una vez que haya creado sus módulos y haya aplicado las variables de diseño de color, preajuse estos colores en estilos reutilizables. Divi 5 ofrece dos tipos preestablecidos que funcionan juntos:

El grupo de opciones preestablece aspectos de diseño específicos en todos los módulos. Estille sus encabezados con la variable de diseño de color de texto de encabezado. Agregue las sombras a su columna usando Moss Burnt y 50% de opacidad. Pase el icono del módulo de grupo de opciones en cualquier módulo, etiquete adecuadamente y guarde.

Lo mismo funciona para fondos, espacios, animaciones y texto. Agregue un radio de borde a través de una variable de diseño de números y configure el preajuste que hace referencia a esta variable de número. Cada grupo de opciones maneja su propio territorio de diseño y se puede aplicar cruzado, es decir, el radio fronterizo de una columna se puede aplicar a su llamado a la acción.

Para aplicar, vaya a la opción apropiada y seleccione el preajuste.

El elemento preestablece los estilos de módulo completos. Estilizar un módulo de botón con su color secundario a 80% de ligereza. Haga clic en el selector preestablecido en la parte superior derecha de la configuración del módulo. Cree un nuevo preajuste llamado "botón de color de marca". Esto guarda todas las configuraciones del botón, incluidos sus colores HSL.

Ahora, cuando agrega un botón nuevo, aplique este preajuste y hereda todo el estilo. Para cortar su trabajo por usted, tome cualquier preajuste personalizado (grupo o elemento de opción) que haya creado y haga clic en el icono de estrella al lado. Ese preajuste se convierte en el valor predeterminado para todas las nuevas instancias de ese elemento u grupo de opciones.

Sus relaciones HSL permanecen intactas dentro de los presets. Cuando actualiza un color, cada módulo y preajuste utilizando esas actualizaciones de color también. Construya bibliotecas preestablecidas para secciones de luz, secciones oscuras y momentos especiales de marca. Los valores de HSL viajan con cada preajuste, manteniendo su sistema de color consistente en todos los proyectos.

Cree sistemas de color para sus sitios web con Divi 5

El trabajo de color solía llevar días. Se inquietaría con códigos hexadecimales, copiará los valores entre programas y rezaría algo decente.

HSL hace que el color funcione de nuevo. Ves un tono que amas y sabes exactamente cómo recrearlo. Hue elige el color, la saturación controla cuán vívida es y la ligereza lo hace más brillante o más oscuro. Ahora, la actualización de la marca lleva minutos en lugar de horas.

Este es un control de diseño real. Divi 5 lo hace posible hoy.