Cómo generar una paleta de colores para tu diseño

El color es una de las primeras cosas que la gente nota en un sitio web, app o diseño. Una paleta bien elegida crea un aspecto cohesionado y profesional. Una mal elegida hace que incluso el contenido bueno se sienta raro, y los problemas de accesibilidad pueden excluir silenciosamente a millones de usuarios. No necesitas ser diseñador para elegir buenos colores. La teoría del color te da fórmulas fiables, y las herramientas que combinan esas fórmulas con verificaciones de accesibilidad convierten una paleta utilizable en un trabajo de cinco minutos.

Breve historia de la teoría del color

Isaac Newton construyó la primera rueda cromática alrededor de 1666, mapeando el espectro visible en un círculo al doblar el arcoíris lineal sobre sí mismo. Johann Wolfgang von Goethe amplió la idea en 1810 con su Teoría de los colores, centrándose en cómo se sienten los colores en vez de cómo están compuestos físicamente. Albert Munsell la sistematizó en 1905 al separar tono, valor y croma, dando a los diseñadores vocabulario para "rojo más oscuro" vs "rojo más saturado".

El siglo XX añadió los espacios de color perceptuales. CIE Lab (1976) fue el primero en convertir en objetivo real que "igual distancia numérica = igual diferencia percibida". HSL y HSV (1978) dieron a los programadores abstracciones más fáciles. El diseño web moderno se ha movido hacia OKLCH (2020) y OKLAB, espacios de color perceptualmente uniformes que por fin hacen que "luminosidad 50 %" realmente luzca 50 % brillante, sin importar el tono. La progresión importa porque permite a los generadores de paletas producir matices y tintes que lucen consistentes entre colores, no solo relacionados numéricamente.

Modos de armonía cromática

Los modos de armonía se basan en las relaciones entre colores en la rueda cromática. Cada uno crea una sensación diferente:

Complementario, dos colores directamente opuestos (por ejemplo, azul y naranja, rojo y verde). Alto contraste, enérgico. Bueno para elementos de llamada a la acción que necesitan destacar, pero úsalo con moderación porque la tensión puede sentirse fuerte.

Análogos, tres colores contiguos en la rueda (por ejemplo, azul, azul-verde, verde). Armonioso y tranquilizador. Bueno para fondos, diseños con temática natural, y paletas donde todo debe sentirse relacionado.

Tríada, tres colores uniformemente espaciados en la rueda (por ejemplo, rojo, amarillo, azul). Vibrante y equilibrado. Bueno para diseños lúdicos, creativos o infantiles.

Complementario dividido: un color más los dos adyacentes a su complemento. Contraste similar al complementario pero con menos tensión; suele ser más usable en interfaces.

Tetrádico (o rectángulo): cuatro colores dispuestos como dos pares complementarios. Rico y variado, pero difícil de equilibrar; usualmente un color domina y los otros actúan como acentos.

Cuadrado: cuatro colores uniformemente espaciados en la rueda. Máxima variedad, énfasis igual. Difícil de usar bien a menos que tres de los cuatro se mantengan como pequeños acentos.

Monocromático: distintas sombras, tintes y tonos de un solo color. Siempre armonioso, sofisticado, pero puede faltar interés visual si se abusa. Excelente para layouts editoriales y sistemas de marca minimalistas.

Acromático: solo blanco, negro y gris. El look clásico de periódico o de revista de alto contraste. A menudo emparejado con un único acento brillante.

Cómo generar una paleta

1. Elige un modo de armonía: selecciona Aleatorio, Análogo, Complementario, Tríada, Complementario dividido, Tetrádico o Monocromático para fijar las relaciones entre colores.
2. Elige un color inicial: introduce un color de marca, extrae un color de una imagen de referencia, o deja que el generador elija uno.
3. Bloquea los colores que te gusten: cuando encuentres un color que quieras conservar, bloquéalo y regenera los demás hasta que la paleta completa funcione.
4. Ajusta luminosidad y saturación: la mayoría de los generadores te dejan afinar de forma independiente luminosidad y saturación de cada color para asegurarte de que la paleta tiene suficiente variación de brillo para trabajo de UI.
5. Lanza una verificación de accesibilidad: verifica que las combinaciones texto-fondo cumplen contraste WCAG AA (4,5:1) o AAA (7:1).
6. Exporta, copia los códigos HEX, las variables CSS, la config de Tailwind, los swatches ASE, o guarda la paleta como imagen para herramientas como Figma, Sketch o Canva.

Construir una paleta utilizable

Una paleta es más que un conjunto de colores bonitos. Para un proyecto real, normalmente necesitas:

Un patrón moderno común es una escala de luminosidad de 10 pasos (50, 100, 200, ..., 900) para cada color, ofreciendo suficiente matiz para botones, estados hover, estados deshabilitados y equivalentes en modo oscuro sin retoques manuales.

Espacios de color y cómo afectan a las paletas

El espacio en el que generas da forma a cómo se relacionan los colores. Las herramientas modernas te dejan cambiar.

Para la mayoría del trabajo web en 2024, genera en OKLCH y exporta a HEX por compatibilidad. CSS ya acepta oklch() nativamente en navegadores modernos, así que también puedes mantener los valores OKLCH directamente en tu hoja de estilos para una manipulación de color más rica.

Accesibilidad, no solo estética

Una paleta preciosa es inútil si parte de tu audiencia no puede leerla. Tres comprobaciones convierten una paleta bonita en una inclusiva.

Los ratios de contraste WCAG miden cuán distinguible es el texto de su fondo. Los umbrales estándar:

Simulación de daltonismo: el 8 % de los hombres y el 0,5 % de las mujeres tienen alguna deficiencia de visión cromática, lo más común rojo-verde. Pasa tu paleta por un simulador (deuteranopía, protanopía, tritanopía) para garantizar que la información no se transmita solo por color.

APCA (Advanced Perceptual Contrast Algorithm) es el reemplazo candidato del contraste WCAG en WCAG 3.0. Modela mejor la percepción que la fórmula antigua e importa para texto sobre fondos sutilmente distintos; úsalo como segunda opinión junto a WCAG 2.x.

Consejos para los mejores resultados

• Empieza con un color, elige un color primario que te guste, luego usa un modo de armonía para encontrar colores que lo complementen. Es más fácil que tratar de elegir 5 colores de forma independiente.
• Prueba con contenido real, una paleta que luce genial en muestras puede no funcionar aplicada a texto, botones y fondos reales. Prueba siempre con UI real.
• Genera escalas de luminosidad, en vez de elegir un solo "azul", genera una escala de 10 pasos del muy claro al muy oscuro. Usa los pasos claros para fondos, los oscuros para texto y el rango medio para acentos.
• Menos es más, un diseño con 3 colores bien elegidos luce más profesional que uno con 7. Usa neutros para la mayor parte de la interfaz y reserva los colores vivos para lo que importa.
• Inspírate en la fotografía, usa el cuentagotas en una foto de referencia para obtener paletas ancladas en el mundo real. Coolors, Color Hunt y extractores de foto dedicados lo hacen en un clic.
• Cuida el modo oscuro, genera variantes claras y oscuras juntas. Un primario que funciona en blanco puede brillar incómodamente en negro; OKLCH te permite ajustar solo la luminosidad sin mover el tono.
• Guarda el porqué, documenta por qué cada color es lo que es (alineación de marca, restricción de accesibilidad, estado de ánimo). El tú del futuro te lo agradecerá.

Errores comunes

• Elegir colores en HSL y renderizar en HSL, valores iguales de luminosidad en HSL lucen desiguales porque el espacio no coincide con la percepción humana. El amarillo a 50 % luce mucho más brillante que el azul a 50 %. Cambia a OKLCH para tintes uniformes.
• Confiar solo en la rueda cromática, la rueda es punto de partida, no garantía. Comprueba siempre el contraste con texto real antes de comprometerte.
• Ignorar el significado cultural, el rojo significa suerte en China y advertencia en Occidente. El blanco es pureza en Occidente y luto en partes de Asia. Si lanzas global, investiga local.
• Demasiados grises, cuatro o cinco pasos neutros suelen cubrir desde texto hasta bordes sutiles. Doce confunden a todos, incluido el tú futuro.
• Negro puro sobre blanco puro, el contraste extremo puede causar fatiga visual. Usa casi-negro (#1A1A1A) sobre casi-blanco (#FAFAFA) para lectura larga.
• Combinaciones no probadas, un color que pasa el contraste contra el fondo no pasa automáticamente contra cualquier otra superficie. Prueba cada par que tu diseño produce.
• Un acento único por página, un acento fuerte que llama la atención es bueno. Dos peleando por atención es malo. Elige la llamada a la acción más importante.
• Colores de marca que fallan en accesibilidad, el logo corporativo puede usar un par de bajo contraste por razones emocionales; la web no. Genera variantes accesibles para la UI y reserva el par de marca para el lockup del logo.
• Olvidar enlaces y estados visitados, ambos deben distinguirse del cuerpo de texto y entre sí. Prueba los tres.
• Dejar que el generador elija colores semánticos, los colores de éxito/advertencia/error tienen expectativas culturales y de accesibilidad. Elígelos por convención (verde/ámbar/rojo) y verifica que lucen bien contra tu paleta.

Herramientas y enfoques alternativos

Para trabajo de marca pulido, combina un generador de paleta con un verificador de contraste y un simulador de daltonismo. Las herramientas que hacen los tres en un solo sitio ahorran el máximo tiempo.

Privacidad y el generador de paletas

El generador de paletas corre enteramente en tu navegador. Cualquier imagen origen que subas para extracción de color se lee con la API FileReader, se muestrea en un canvas fuera de pantalla, y se descarta una vez extraídos los colores. Nada se sube, nada se registra y la paleta que construyes no se asocia contigo. Para trabajo de marca aún no anunciado, imágenes de moodboard filtradas o fotografías de cliente, ese flujo solo-local mantiene todo en tu máquina donde debe estar. Para una tarea tan rutinaria como elegir colores, el ajuste de privacidad por defecto debería ser: nada sale de la página, nada se almacena, nada se comparte.