Generador de Paletas de Colores

Por qué una buena paleta de colores sostiene todo un diseño

Elige los colores equivocados y la gente lo nota antes de poder nombrarlo. Una página se percibe barata, un logotipo se ve embarrado, un gráfico se convierte en ruido. Elige los adecuados y el trabajo simplemente encaja: se siente intencionado, tranquilo, fácil de leer de un vistazo. El color hace mucho trabajo silencioso, marcando el ambiente, guiando la mirada y diciéndole al lector qué importa más. Así que una paleta no es decoración que añades al final. Es una decisión que tomas pronto, y casi todo lo demás se apoya en ella.

La buena noticia es que no necesitas un título en Bellas Artes para dar con un esquema sólido. Necesitas un puñado de reglas de la teoría del color y una forma rápida de probar ideas. Para eso sirve exactamente un generador: te permite recorrer docenas de combinaciones en el tiempo que antes te llevaba darle vueltas a una sola.

Teoría del color, sin la jerga

La mayoría de las armonías parten de una idea simple: dónde se sitúan los colores en la rueda unos respecto a otros. Aprende cuatro patrones y podrás leer o construir casi cualquier esquema.

• Complementario usa dos colores directamente opuestos entre sí, como el azul y el naranja. Es de alta energía y estupendo para captar la atención, aunque demasiado de ambos compite por el protagonismo, así que deja que uno lidere y usa el otro como acento.
• Análogo usa tres colores que se sitúan uno junto a otro, como el rojo, el naranja y el amarillo. Es de bajo contraste, tranquilo, y el tipo de armonía que ves por toda la naturaleza. Suave para la vista, pero quizá necesites añadir contraste en algún punto para que la cosa no quede plana.
• Triádico usa tres colores equidistantes alrededor de la rueda, como el rojo, el amarillo y el azul. Vivo y equilibrado, funciona mejor cuando un color domina y los otros dos hacen de apoyo.
• Monocromático se ciñe a un solo matiz y varía su luminosidad y saturación. Es el esquema más infalible que existe, limpio y cohesionado, y un buen recurso cuando nada más acaba de convencer.

Un generador aleatorio es divertido para inspirarse, pero los modos de armonía son donde reside el verdadero valor. Mantienen tus colores relacionados matemáticamente, así que parecen pertenecer juntos incluso antes de retocar nada.

HEX, RGB y HSL en términos sencillos

Cada color que copias viene en unas cuantas notaciones, y todas describen lo mismo de forma distinta.

HEX es el código de seis caracteres que ves más a menudo, como #3A7BD5. No es más que rojo, verde y azul empaquetados en una cadena, dos caracteres cada uno. Es compacto y es lo que pegarás en CSS o en una herramienta de diseño.

RGB deletrea esos mismos tres canales como números del 0 al 255, como rgb(58, 123, 213). El mismo color, más amable de leer, y útil cuando quieres un canal alfa para la transparencia.

HSL describe el color como la gente piensa de verdad: matiz (qué color, de 0 a 360 grados alrededor de la rueda), saturación (cuán vívido) y luminosidad (cuán claro). Es el formato más fácil para retocar a mano, ya que ajustar la luminosidad o la saturación hace exactamente lo que esperarías sin adivinanzas. Si alguna vez necesitas pasar de un formato a otro, una rápida conversión de HEX a RGB lo hace indoloro.

No olvides el contraste y la accesibilidad

Una paleta puede verse preciosa y aun así fallar en el momento en que alguien intenta leer texto sobre ella. El contraste es donde lo bonito se encuentra con lo usable. Las Pautas de Accesibilidad para el Contenido Web fijan un listón claro: el texto de cuerpo normal debe alcanzar una relación de contraste de al menos 4,5:1 frente a su fondo, y el texto grande al menos 3:1. Eso no es burocracia, es la diferencia entre un lector que recorre tu página sin esfuerzo y uno que entorna los ojos, se rinde y se va.

El movimiento práctico es probar tus pares de primer plano y fondo mientras construyes, no después. Un gris claro sobre blanco puede verse elegante en una maqueta y volverse invisible en un teléfono a la luz del día. Cuando una combinación falla, normalmente solo necesitas empujar un color a más oscuro o más claro, no descartar todo el esquema. Reserva tus colores de acento brillantes para botones, enlaces y resaltados en lugar de para largos tramos de texto, y esquivarás la mayoría de los problemas de contraste antes de que empiecen.

Un flujo de trabajo práctico

Aquí tienes un flujo que aguanta de un proyecto a otro. Empieza con un color ancla del que estés seguro, a menudo un color de marca o un matiz que coincida con el ambiente que buscas. Bloquéalo, y luego deja que el generador construya una armonía a su alrededor. Recorre el complementario, el análogo y el triádico hasta que algo encaje, y no le des demasiadas vueltas a la primera pasada; estás buscando una dirección, no la respuesta final.

Una vez que tengas un candidato, asigna roles. Elige un color dominante para fondos y áreas grandes, uno secundario para la estructura, y un acento contundente para las partes que necesitan destacar. Una división aproximada 60-30-10, de dominante a secundario a acento, mantiene las cosas equilibradas sin sentirse rígidas. Después comprueba el contraste en cada combinación de texto, copia los códigos hexadecimales y listo. Guarda los que funcionen, porque una paleta que clavaste para un proyecto suele ser la semilla del siguiente. Cuando estés listo para seguir construyendo, el resto de nuestra colección de todos los generadores puede encargarse de las demás piezas.

Preguntas frecuentes