Teoría del Color para UI

El Color como Herramienta Funcional

En diseño UI, el color no es solo decoración — es una herramienta funcional que comunica significado, guía la atención y genera emociones. Una paleta bien definida es la base de cualquier sistema de diseño profesional.

Construyendo una paleta de colores para UI

• Color primario: el color principal de tu marca, usado en botones, links y elementos de acción


• Color secundario (opcional): un color complementario para acentos y elementos secundarios


• Neutros: una escala de grises de 50 a 950 — los usarás para texto, fondos, bordes y separadores


• Semánticos: verde (éxito), rojo (error), amarillo (advertencia), azul (información) — universales en UI


• Genera cada color en una escala de 50 a 900: 50 es casi blanco (fondos), 500 es el color base, 900 es casi negro

Reglas de uso del color en interfaces

• 60-30-10: 60% color neutro (fondos), 30% secundario (cards, headers), 10% primario (CTAs, acciones)


• Contraste WCAG: texto normal necesita ratio 4.5:1, texto grande 3:1 contra su fondo — usa webaim.org/resources/contrastchecker


• No uses color como único indicador: un campo de error necesita borde rojo Y un mensaje de texto Y un ícono


• Mantén consistencia semántica: si el rojo significa error en un lugar, no lo uses como color de acento en otro


• Modo oscuro: no inviertas colores, redefine la paleta — los colores primarios necesitan ser más luminosos en fondo oscuro

Herramientas para elegir colores

• Realtime Colors (realtimecolors.com): visualiza tu paleta aplicada a un layout real en tiempo real


• Coolors.co: generador de paletas con opciones de ajuste fino y exportación a variables CSS


• Color Hunt: colecciones de paletas curadas por diseñadores para inspiración


• Radix Colors: paletas profesionales con escala completa (50-900) listas para usar en UI


• El plugin Figma 'Contrast' te muestra ratios de contraste directamente en tus diseños

Consejo: Si no sabes qué color primario elegir, usa azul (#3B82F6). Es el color más seguro en UI porque transmite confianza, es legible y funciona bien en modo claro y oscuro.