Psicología del color para páginas de destino de alta conversión

El color es lo primero que procesa un visitante, antes de leer una palabra del texto. Comunica la industria, la credibilidad y el tono en milisegundos. También afecta directamente si el texto es legible, lo que a su vez afecta si las personas permanecen en la página.

Esta publicación explica cómo funciona el sistema de paletas de PAGEnza y por qué las restricciones que imponemos en la selección de colores en realidad producen mejores resultados que dar a la IA libertad ilimitada.

El problema de pedirle a una IA que "elija colores bonitos"

Si le pides a un LLM que elija colores para un sitio web, obtienes códigos hexadecimales. A veces se ven bien juntos. A veces no. El modelo no tiene una forma confiable de evaluar si los colores realmente funcionan, si el texto es legible, si la paleta se siente apropiada para la industria, si la combinación es visualmente coherente en lugar de accidentalmente coordinada.

Vimos este problema claramente en las pruebas iniciales. La generación de colores sin restricciones produjo paletas que iban desde excelentes hasta completamente inutilizables. No había consistencia.

La solución fue sacar la selección de color de las manos del LLM por completo y construir un sistema algorítmico que garantice propiedades específicas.

El sistema de 4 colores

Cada sitio de PAGEnza utiliza exactamente cuatro colores con nombre:

ink — el color de texto principal. Siempre oscuro (alto contraste de luminancia contra los fondos). Se utiliza para encabezados, texto del cuerpo y elementos de la interfaz de usuario que necesitan ser leídos.

bg1 — el fondo principal. Generalmente el color más claro de la paleta. Se utiliza para el fondo principal de la página y las secciones claras.

bg2 — el fondo secundario. Crea variedad visual entre secciones. Debe tener una temperatura de color diferente a bg1: si bg1 es un crema cálido, bg2 es un gris frío o un blanco teñido de azul.

accent — el color de la marca. Se utiliza para botones, enlaces, resaltados y elementos decorativos. Generalmente el color más saturado de la paleta.

Esta restricción, cuatro roles con nombre, no códigos hexadecimales arbitrarios, es lo que hace que el sistema de paletas funcione. La IA nunca decide qué color va dónde; solo selecciona qué paleta usar de un conjunto pre-auditorizado.

Cómo se organizan las paletas

Mantenemos más de 20 grupos de paletas, cada uno construido alrededor de un arquetipo:

• Audaz: acentos saturados de alto contraste: tecnología, SaaS, fintech
• Suave: apagados, desaturados: bienestar, coaching, servicios creativos
• Lujo: fondos casi negros con acentos metálicos o de joyas: servicios premium, venta minorista de alta gama
• Terroso: neutros cálidos con acentos de terracota o salvia: alimentos, sostenibilidad, artesanía
• Oscuro: paletas primero en modo oscuro: desarrolladores, agencias, juegos
• Neutro: seguro, profesional: legal, finanzas, atención médica

Dentro de cada grupo, hay múltiples paletas con diferentes temperaturas de color, niveles de saturación y tonos de acento. El sistema selecciona un grupo según la industria y el arquetipo, y luego elige una paleta específica dentro del grupo.

Contraste WCAG: la restricción que mejora el diseño

WCAG AA requiere que el texto normal tenga una relación de contraste de al menos 4.5:1 contra su fondo. El texto grande necesita 3:1. Los elementos interactivos necesitan 3:1 contra los colores adyacentes.

Cada paleta de nuestro sistema se valida contra estas proporciones antes de incluirla. Específicamente:

• ink debe lograr un contraste de ≥4.5:1 contra bg1, bg2 y cualquier color de superficie donde aparezca texto
• accent debe lograr un contraste de ≥3.0:1 contra bg1 y bg2 (para usar como fondos de botones)
• La validación utiliza matemáticas de luminancia reales: L = 0.2126R + 0.7152G + 0.0722B después de la corrección gamma, no aproximaciones

El efecto es que cada sitio generado es legible por defecto. Pero hay un beneficio secundario: los diseños de alto contraste convierten mejor. Un botón que es claramente visible recibe más clics que uno que se mezcla con el fondo. El requisito de accesibilidad resulta ser un requisito de conversión.

Contraste de temperatura de color entre secciones

Un detalle que es fácil pasar por alto: bg1 y bg2 deben tener temperaturas de color contrastantes. Si ambos fondos son cálidos, las secciones alternas se sienten monótonas: la página parece una masa continua en lugar de áreas de contenido distintas.

La regla en nuestro sistema: si bg1 tiene un tono cálido (dirección naranja/amarilla, o un neutro cálido como crema), bg2 debe ser frío (dirección azul/gris). Si bg1 es un blanco frío, bg2 podría ser un blanco roto cálido.

Es por eso que nuestras secciones se sienten distintas incluso sin divisores pesados o sombras paralelas: el cambio de temperatura del fondo por sí solo crea una clara ruptura visual.

Lógica de color específica de la industria

Algunas elecciones de color están fuertemente codificadas por industria. Los visitantes tienen expectativas basadas en años de exposición a sitios web en una categoría determinada.

Atención médica y bienestar: los azules y verdes señalan confianza y calma. Los rojos y naranjas saturados se leen como alarmantes en este contexto.

Legal y finanzas: azules marinos oscuros, carbón, grises conservadores. Los acentos brillantes son aceptables pero deben ser moderados. Las paletas juguetonas socavan la credibilidad.

Alimentos y hostelería: los tonos cálidos (terracota, ámbar, crema) activan las asociaciones de apetito. Las paletas clínicas frías se sienten mal.

Tecnología y SaaS: los azules siguen siendo dominantes, pero hay más variedad. Los azules eléctricos, índigos e incluso violetas se leen como vanguardistas. Los fondos negros puros funcionan para herramientas de desarrollador.

Lujo y premium: la clave es la moderación. Rango de color limitado, negros casi puros o azules marinos profundos como colores primarios, acentos dorados o platino. Alto contraste, nunca saturado.

La selección de arquetipos en el Diseño Mandatorio mapea la industria + tipo de negocio al grupo de paletas apropiado, por lo que un coach de bienestar no termina con la misma paleta que un bufete de abogados, incluso si ambos se describen como "profesionales".

Lo que los clientes pueden cambiar

Después de la generación, los clientes pueden editar su sitio en Gutenberg. El selector de color en el editor solo muestra los cuatro colores de la marca, nada más. Esto significa:

• Pueden cambiar los fondos de las secciones entre bg1, bg2 y superficies
• Pueden cambiar los colores de los botones y enlaces entre accent y ink
• No pueden introducir un quinto color arbitrario que rompa la paleta

La restricción es intencional. La forma más común en que los clientes rompen un sitio diseñado profesionalmente es eligiendo colores de la rueda de colores completa. Limitar la paleta a cuatro colores con nombre hace que eso sea imposible sin entrar en el código.