Comprender los colores relativos en el diseño web

En el diseño web, incluso las decisiones más simples pueden multiplicarse. Lo que comienza como una sola opción de diseño se expande rápidamente en docenas de variaciones visuales para interacciones, antecedentes, bordes y más. Su construcción puede abarcar los valores no coincidentes y los ajustes manuales sin un sistema consistente.

La sintaxis de color relativo en CSS ofrece un enfoque más inteligente y escalable. Le permite definir variaciones visuales basadas en una sola fuente, manteniendo su diseño cohesivo y fácil de administrar. Normalmente, esto requiere escribir código personalizado. Pero con Divi 5, puede usar estas técnicas modernas visualmente, desde el principio. Echemos un vistazo más de cerca.

Problemas comunes de gestión del color

Ese color de marca perfecto que elija puede multiplicarse rápidamente en docenas de variaciones dispersas en su sitio. Aquí hay algunos problemas que contribuyen a este problema:

Gestión de variaciones para un color

Comienza con una base azul y rápidamente necesita docenas de variaciones. El selector de color de su constructor de páginas se convierte en un desastre. Azul claro, azul más claro, azul oscuro, azul más oscuro, azul descolorido: cada uno se guarda como un color separado.

Su marca Blue abarca veinte tonos diferentes en su sitio. Algunas secciones usan el azul original, otras usan una versión más ligera que hiciste hace tres semanas, y tus botones usan ese tono más oscuro que hiciste para un mejor contraste.

Ninguno de estos colores se conecta con los demás. Cuando su cliente quiere púrpura en lugar de azul, se enfrenta a actualizar cada color a mano. Pasará horas haciendo clic en los módulos. Cazas cada sombra. Esperas que no te pierdas ninguno.

Una colección de muchos tonos azules similares a la izquierda gira en púrpuras dispersas y no relacionadas a la derecha porque actualizarlos uno por uno es tedioso y requiere una consistencia constante. Aún más, estas variaciones de color suelen estar miradas y no tienen ninguna conexión.

El problema de la opacidad

Muchos constructores de páginas incluyen controles de transparencia, que pueden ser una pesadilla para la consistencia del color. Puede crear una superposición azul perfecta con 60% de opacidad, pero más tarde, necesita ese mismo rojo transparente para una sección diferente.

Su constructor de páginas no recuerda la combinación exacta, por lo que está deja el globo ocular del control deslizante de Opacidad e intenta que coincida con lo que hizo antes.

Los intentos 1, 2 y 3 varían en sombra y transparencia porque los globos oculares no dan resultados precisos incluso con controles precisos.

Algunos constructores de páginas le permiten guardar colores transparentes. Otros no. Terminas con un montón de azul transparente de aspecto similar.

Todos son ligeramente diferentes. Su diseño pierde consistencia. No puede recrear de manera confiable el mismo color transparente en varios módulos. Cada vez que necesite transparencia, comienza desde cero. Adivina los valores de opacidad. Esperas que coincidan con tu diseño existente.

Creando variables manualmente

La mayoría de los constructores de páginas ofrecen alguna forma de ahorro de color, pero rápidamente se vuelve inmanejable. Guardas colores con nombres genéricos como "Amarillo 1", "Amarillo 2" y "Luz amarilla".

Seis meses después, no tienes idea de qué amarillo hace qué. Su paleta de colores guardada se convierte en un desastre de colores de aspecto similar con nombres sin sentido. Su biblioteca de colores crece sin ningún sistema organizacional. Tiene tres naranjas diferentes que se ven casi iguales, pero tienen varios propósitos.

Una cuadrícula de muchas muestras de color con tonos superpuestos y nombres inconsistentes y poco claros contribuye a una paleta desordenada y confusa que es difícil de organizar o usar de manera efectiva.

Los miembros del equipo agregan sus variaciones de color, creando tonos duplicados con diferentes nombres. Su marca naranja existe como "naranja", "marca naranja", "naranja primaria" y "naranja main". Nadie sabe cuál usar.

Algunos desarrolladores intentan resolver esto escribiendo variables CSS personalizadas. Esto les da un mejor control sobre las relaciones de color.

Pero ahora has creado un obstáculo técnico. Los miembros de su equipo que no es de tecnología ya no pueden actualizar los colores, y sus clientes no pueden hacer cambios de color simples ellos mismos. Te haces responsable de cada ajuste de color menor.

¿Qué colores relativos hay en CSS (y por qué los necesita)?

Los colores relativos resuelven sus problemas de color. Eliges un color de marca. CSS hace todas las versiones que necesita. Ligeros para fondos. Oscuros para fronteras. Los claros para superposiciones. Todo de un color inicial.

CSS funciona como una herramienta de color dinámico. Lo dices: "Haz este encendedor amarillo". CSS hace el trabajo. Su botón rojo debe desvanecerse al pasar el rato. CSS agrega la transparencia. Su encabezado azul necesita un borde más oscuro. CSS lo crea de inmediato.

Los flujos de trabajo tradicionales requerían más esfuerzo manual. Los diseñadores hicieron juegos de colores en Photoshop. Los codificadores usaron herramientas como Sass. Los constructores de sitios web tuvieron que adivinar los colores coincidentes. CSS ahora lo maneja automáticamente.

Cómo CSS crea colores a partir de colores

La palabra "de" le dice a CSS que use un color existente como punto de partida. Le das un color a CSS, y rompe ese color en piezas que puede usar.

Tu color inicial se convierte en la base. CSS lo divide en partes. Cantidades rojas, cantidades verdes, cantidades azules. O tono, brillo y saturación si prefiere esos controles.

Puede comenzar con cualquier formato de color. Use un color hexadecimal como #E91E63. Dígale a CSS que trabaje con él como HSL para cambios fáciles de brillo. Salirlo como RGB si su código necesita eso. CSS convierte todo automáticamente.

El código sigue un patrón simple. Primero, dices de dónde obtener el color, y luego dices qué cambiar al respecto. Puede mantener todo igual pero agregar transparencia o cambiar el tono pero mantener el brillo. Ambos funcionan de la misma manera.

Romper colores en partes

Los diferentes formatos de color le dan diferentes herramientas. RGB te permite cambiar de rojo, verde y azul por separado. HSL te ofrece controles de tono, saturación y ligereza.

Así es como funciona. Escribes RGB (de #FF4081 RGB). CSS toma ese código hexadecimal rosa y lo divide en números rojos, verdes y azules. Entonces puedes usar esos números como quieras. El patrón permanece igual: función de color (desde su canal de color1 canal1 canal2 canal3).

Entonces, en lugar de escribir colores desde cero, se basa en un color existente y cambia solo las piezas que desea cambiar.

Cada parte se convierte para que coincida con lo que eligió. Convertir ese hex rosa te da r = 255, g = 64, b = 129. Úselos tal cual o cámbialos con calc ().

También puedes mezclar y combinar los canales. ¿Quieres que todos los píxeles rojos sean los mismos? Use RGB (de var (–color) GGG). Esto toma el valor verde y lo usa para rojo, verde y azul, creando un tono gris a partir de su color original.

Soporte del navegador y otras consideraciones

Los grandes sitios no pueden ignorar a los visitantes porque necesitan acomodar a todos. Las versiones antiguas de Safari funcionan de manera diferente. Las versiones cromadas manejan algunas cosas a su manera. Firefox, es propio. Terminará escribiendo tres versiones de código diferentes para One Color Effect.

Todo este trabajo adicional le quita tiempo a las cosas mejores. Puede mejorar la funcionalidad del sitio y agregar características que las personas desean.

Muchos desarrolladores usan colores relativos selectivamente. Las herramientas internas y los proyectos personales funcionan bien desde que controla el navegador. Los sitios de marketing y el trabajo del cliente necesitan una planificación más cuidadosa.

La tecnología funciona muy bien donde es compatible. La pregunta es si la complejidad adicional se ajusta a su cronograma y equipo de su proyecto o la capacidad técnica del cliente. Pero para la mayoría de los casos, sería exagerado y una sobrecarga para la mayoría de los miembros del equipo.

Esta es exactamente la razón por la cual el equipo de Divi intervino. Vimos diseñadores web que luchaban con la compatibilidad del navegador mientras se perdían herramientas de color potentes. Nuestra solución en Divi 5 toma las mejores partes de los colores relativos y los envuelve en un sistema que funciona en todas partes y no requiere codificación.

Cómo Divi 5 facilita los colores relativos

Ahora, conoces el poder de los colores relativos; Sin embargo, es posible que se haya dado cuenta de que no es tan fácil de implementar. Divi 5 adoptó un enfoque diferente y una flexibilidad de color incorporada directamente en su interfaz visual. Pero descubramos qué es Divi exactamente.

¿Qué es Divi?

Divi es el constructor de páginas de WordPress más popular. Prioriza el diseño visual y le brinda un control completo sobre su diseño.

Puede ver que sus cambios ocurran en vivo, ajustar el tamaño de la fuente o el espacio de línea, e inmediatamente ver los resultados en su página. Obtiene acceso a más de 200 módulos que van a cualquier lugar donde desee. Los bloques de texto, los encabezados y las piezas de contenido funcionan como un equipo. No hay plantillas rígidas que apriete sus ideas en formas incómodas.

Esto es lo que hace que Divi sea diferente: más de 2000 diseños preparados para negocios creados para negocios reales. Estas no son plantillas de inicio básicas. Cada diseño se dirige a industrias específicas. Encontrará diseños que hablan el idioma de su audiencia y que coincidan con sus necesidades comerciales.

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

Los sitios rápidos de Divi corrigen ese lienzo vacío intimidante que mata los proyectos antes de comenzar. Obtiene sitios web de inicio profesionales con un diseño sólido que nuestro equipo de diseño construye utilizando imágenes originales y obras de arte que no encontrará en ningún otro lugar.

Si desea algo más personalizado, los sitios rápidos de Divi trabajan con Divi AI para construir diseños personalizados basados en los detalles de su negocio. Describa su empresa o restaurante de consultoría, y produce páginas relevantes con contenido específico de la industria.

Estos no son marcos básicos: recibe titulares reales, contenido escrito e imágenes que se ajustan a su tipo de negocio. Incluso diseña encabezados y pies de página, páginas de productos y plantillas de publicaciones de blog, entre otras cosas, para usted.

Puede configurar las fuentes y colores de su marca desde el principio o dejar que la IA las elija por usted. La IA funciona dentro de esas pautas. Después, todo permanece completamente editable, por lo que puede ajustar la tipografía hasta que coincida con sus necesidades exactas.

Control completo sobre el diseño de su sitio, ahora con AI

El constructor de temas lo pone a cargo del diseño en todo su sitio web. Cree encabezados personalizados que reflejen la personalidad de su marca. Construya diseños de blog que mantengan a los lectores comprometidos con artículos largos. Sus 404 páginas pueden permanecer en la marca con fuentes y estilo a juego.

Divi Ai, como se mencionó anteriormente, pone a Ai dentro de su flujo de trabajo de diseño. Cree titulares que suenen como si los escribieras y descripciones de productos que capturan la voz de tu marca.

La edición de fotos se puede hacer dentro del constructor. Dígale a la IA qué cambios desea en una imagen, y maneja las ediciones.

¿Necesitas imágenes frescas? Los crean también.

Completas de las secciones de página que se ajustan perfectamente a su negocio.

Fragmentos de código más cuando los necesite.

Divi 5: la próxima evolución

Divi 5 ingresa a las pruebas alfa con una misión clara: mejorar el rendimiento de su proceso de diseño web. Escuchamos comentarios reales sobre lo que te ralentiza y lo que te ayudaría.

Todo lo que te gusta de la Divi actual se queda. Acabamos de hacerlo funcionar mejor. La interfaz se ve más limpia. Las páginas se cargan más rápido que antes. Los controles responden justo cuando hace clic en ellos.

Reconstruimos la base utilizando los estándares web de hoy. Esto significa menos errores extraños y un rendimiento más suave en general.

Pasas menos tiempo luchando contra el constructor y más tiempo diseñando. Sus sitios se ven más profesionales porque la consistencia ocurre automáticamente. Los clientes obtienen mejores sitios web porque puede concentrarse en sus necesidades en lugar de problemas técnicos.

La versión alfa está lista para usarse en nuevos sitios web, aunque no recomendamos convertir sus sitios web Divi 4 existentes a Divi 5.

¿Qué hay de nuevo en Divi 5?

Divi 5 trae cambios importantes a la forma en que crea sitios web. La versión Public Alpha funciona muy bien para nuevos proyectos en este momento. Nuestros equipos de desarrollo envían nuevas características cada dos semanas, con varias actualizaciones importantes ya lanzadas desde que comenzó Alpha.

Aquí hay algunas actualizaciones de clave:

• La base de código moderna acelera las cosas cargando solo los módulos que realmente necesita, eliminando la hinchazón del código que ralentizó Divi 4.
• Un sistema de diseño FlexBox completo ahora incluye nuevas plantillas de fila, centrado vertical automático, envoltura de contenido y distribución de espaciamiento a través de controles visuales.
• Un nuevo constructor de bucle que repite módulos, grupos o secciones con contenido dinámico y admite bucles anidados para estructuras de datos complejas.
• Los colores relativos con HSL proporcionan un control de color dinámico basado en los valores de tono, saturación y ligereza.
• El sistema basado en HTML-5 reemplaza los códigos cortos por completo , lo que significa menos errores y una mejor compatibilidad de WordPress.
• La interfaz Visual Builder obtuvo un cambio de imagen completo, con modos de luz y oscuridad, paneles acoplables, ventanas con pestañas, atajos de teclado y una vista de capas mejorada con migas de pan.
• Los puntos de interrupción sensibles personalizables reemplazan los tres fijos de Divi 4, lo que le brinda más control con la escala de lienzo para ver exactamente cómo los diseños miran diferentes tamaños de pantalla.
• Los grupos de módulos funcionan como contenedores versátiles que agrupan los elementos relacionados para que pueda diseñarlos como unidades o moverlos sin perder relaciones.
• Las variables de diseño le permiten establecer colores, fuentes, números, imágenes, texto y URL a nivel mundial en todo su sitio.
• El grupo de opciones preestablece las propiedades de diseño específicas como la tipografía o las sombras que funcionan en diferentes tipos de módulos.
• Las unidades CSS avanzadas ahora admiten clamp (), calc (), min () y max () funciona a través de la interfaz visual sin escribir código.
• El sistema de interacciones crea ventanas emergentes, alternar, efectos de desplazamiento y efectos de movimiento de ratones sin complementos externos.

Lo que viene ...

• Módulos de WooCommerce reconstruidos desde cero utilizando la arquitectura Divi 5 con compatibilidad preestablecida y variable completa.
• El Element Inspector proporcionará nuevas herramientas de depuración y desarrollo para usuarios avanzados.
• Del mismo modo, el módulo de carrusel grupal puede ayudarlo a crear un carrusel compuesto por grupos, luego desarrollar el contenido para cada diapositiva utilizando el conjunto completo de elementos de Divi para diseñar cualquier estilo de carrusel que desee.

Construyendo paletas que se escalan con Divi 5

Su selección de color se convierte en un desastre cuando necesita docenas de variaciones de color de su marca. Divi 5 soluciona esto conectando cada tono a un color base. Los siguientes pasos le muestran cómo construir un sistema de color escalable y mantenible.

1. Configuración de su base de color principal

Abra el Visual Builder y encuentre el icono de Variable Manager en la barra lateral izquierda. Haga clic para ver la base de color de su sitio. Divi 5 viene con variables de color preestablecidas que ya te esperan: colores primarios, secundarios, de encabezado y cuerpo.

No puede eliminar estas variables preestablecidas, pero puede cambiar sus valores. Esto funciona perfectamente porque estos cuatro colores manejan la mayoría de los sitios web. Haga clic en la variable de color primaria e ingrese el color principal de su marca. Esto se convierte en la base de cualquier otra variación de color en su sitio.

Su variable de color principal debe reflejar la versión más saturada del color de su marca. Piense en ello como la versión pura y sin diluir antes de crear fondos más ligeros o agregar efectos de transparencia. Esto le brinda el mayor rango al construir variaciones más tarde.

El color secundario funciona bien para acentos, botones o resaltados que necesitan destacarse del color principal de la marca. Establezca su color de encabezado en algo que se lea bien en sus fondos. El color del cuerpo generalmente permanece gris oscuro o negro para la legibilidad.

Estas cuatro variables preestablecidas se conectan al sistema completo de Divi. Cuando construye módulos, estos colores aparecen como opciones rápidas. Cambie su primaria de azul a verde aquí, y cada módulo utilizando las actualizaciones de la variable principal al instante en su sitio.

Evite crear variables personalizadas excesivas desde el principio. En cambio, comience con estos cuatro preajustes. La mayoría de los sitios web pueden necesitar solo estos colores básicos, con variaciones creadas a través de los controles de color relativos de Divi 5. Pero, por supuesto, si lo necesita, puede agregar tantas variables como desee.

2. Creación de tonos de color con controles HSL

Ahora, agregue otra variable de color. Esta vez, construirá un tono a partir de su color principal en lugar de establecer un nuevo color base. En el selector de color, seleccione su variable de color principal de la lista.

Ahora ves tres controles deslizantes: tono, saturación y ligereza. Estos controlan cómo cambia su color base.

El tono se mueve alrededor de la rueda de color de 0 a 360 grados. Deje esto solo al hacer tonos del mismo color. La saturación pasa de 0% a 100% y controla cuán vívido se ve tu color. Al 0%, cualquier color se vuelve gris. Al 100%, obtienes plena intensidad.

La ligereza funciona del 0% al 100%. Este control deslizante crea tus tonos reales. A las 0, obtienes la forma pura de tu color. Muévalo hasta el 50% para tonos más ligeros. Déjelo a -20% para tonos más oscuros.

Puede mezclar y combinar estos colores HSL para construir nuevos colores y variaciones según sea necesario.

Creemos dos variaciones de nuestro color primario. Agregue una variable y nombre su nuevo tono algo claro como "luz primaria" o "oscuro primario". Repita este proceso para crear múltiples tonos. Una configuración típica utiliza su base primaria de base con un 30% de ligereza para fondos y tal, y oscuro a -15% de ligereza.

También puede agregar tonos más claros y oscuros para su color secundario.

3. Construyendo variables de color anidadas

Hiciste luz primaria y oscura primaria en el paso 2. Ahora puedes construir más colores a partir de esos tonos.

Haga una nueva variable llamada "Sombra de fondo de tarjeta". Elija su luz principal de la lista. Deje caer opacidad al 50%. Esto le da un tinte apenas allí para fondos de tarjetas. A continuación, cree "Button Hover". Elija la oscuridad primaria. Drop Lightness Otro 10% para que sea aún más oscuro. Ahora, tus botones pueden ser un color más oscuro cuando la gente se cierne sobre ellos.

También puede construir colores personalizados a partir de sus tonos. Haga "Shadow de texto" eligiendo el botón del botón. Establecer opacidad al 15%. Ahora su sombra de texto se conecta a Button Hover, que se conecta a la oscuridad primaria, que se conecta a la primaria.

Pruebe "acento fronterizo" desde la luz primaria. Saturación de golpes al 100% para que establezca más. Esto le da un borde brillante que todavía coincide con su marca. Cada cadena se hace más larga. Los cinco colores se remontan a una elección primaria.

Agregue tonos similares para su color secundario para una buena selección de colores para seleccionar.

4. Aplicando colores relativos a su sitio

Construyó su base de color y creó todos esos tonos. Ahora viene la parte práctica: implementarlos en su sitio web.

Abra cualquier módulo en el Visual Builder. Haga clic en una opción de color para fondos, texto o bordes. Sus variables de color guardadas aparecen dentro del selector de color. No necesitará recordar los nombres o los códigos hexadecimales.

Elija su color principal para los botones principales. Elija luz primaria para fondos de sección. Use la oscuridad primaria para fronteras y acentos sutiles como los botones CTA. Cada selección se conecta a su sistema de color base.

Sus variables de color funcionan en todas partes: encabezados, pies de página, diseños de blog y páginas de productos. Los miembros y clientes de su equipo pueden elegir colores sin adivinar. Ven "luz primaria" en lugar de códigos hexadecimales aleatorios en el selector. Los nombres claros significan menos errores y trabajo de diseño más rápido. Todos saben qué color sirve qué propósito.

Este sistema basado en variables previene la inconsistencia visual. No tendrá que ahorrar docenas de blues similares o maravillas qué sombra usar para los efectos de desplazamiento. Sus variables le dan estructura mientras mantienen flexibilidad de diseño.

5. Actualización de colores cuando sea necesario

Su cliente decide que quiere azul de medianoche en lugar de solo azul. Con la gestión tradicional del color, esto significa horas de tamizar a través de módulos y actualizar manualmente cada tono o actualizar un montón de colores globales a la vez. Con los colores relativos de Divi 5, cambias una variable y todo lo demás sigue.

Sus fondos de luz primario se vuelven de color verde claro. Los bordes oscuros primarios cambian al verde oscuro. El botón Los colores rondores se ajustan a un azul más oscuro. Todas esas relaciones anidadas que construyó permanecen intactas.

La sombra de fondo de su tarjeta tenía una opacidad del 15% de la luz primaria. Se convierte en un 15% de opacidad de la nueva luz primaria verde sin que la toque. Su sombra de texto se conecta a Button Hover, que se conecta a la oscuridad primaria, que se conecta a la primaria.

La antigua forma significaba recrear la armonía de color desde cero cada vez. Usted preserva las relaciones mientras cambia la base, y su diseño permanece equilibrado.

Tus colores, tus reglas

El uso de color inconsistente socava un buen diseño. Has estado guardando tonos aleatorios con nombres sin sentido, cazando a través de módulos para actualizaciones y reconstruyendo paletas desde cero cada vez que los clientes cambian de opinión.

Los colores relativos de Divi 5 terminan esta pesadilla de flujo de trabajo. Construya una vez desde un color base y observe automáticamente cada actualización de variación en su sitio. El sistema maneja la compatibilidad del navegador, mantiene relaciones y mantiene su selección de color organizado, por lo que no necesitará jugar con CSS.

Su próximo proyecto merece una mejor gestión del color. Descargue Divi 5 y vea cómo se siente el diseño organizado.