Guía de teoría del color
Aprende armonía de color, contraste y decisiones de paleta para UI.
Cómo ayuda
Aprende armonía de color, contraste y decisiones de paleta para UI.
- Genera paletas desde un color base.
- Comprueba el contraste antes de publicar texto UI.
- Exporta CSS, Tailwind, SCSS, JSON, SVG y PNG.
- Funciona localmente en el navegador.
Fundamentos de teoría del color para UI design
La teoría del color clásica (Itten, Albers) nace para la pintura. Aplicarla al diseño digital requiere adaptaciones precisas, porque las pantallas usan luz emitida (RGB) en vez de pigmentos (CMYK) y las restricciones de legibilidad lo cambian todo.
Hue, Saturación, Luminosidad (HSL): el modelo HSL es el más intuitivo para diseñadores. Hue es el "tipo" de color (0-360°), saturación cuan vivido es (0% gris, 100% puro), luminosidad cuan claro u oscuro es (0% negro, 100% blanco). Para UI, trabaja a menudo reduciendo la saturación de los colores de fondo (15-30%) y manteniéndola alta solo para los acentos.
Armonía de color: complementario (180°) crea tensión visual — usa para destacar. Análogo (±30°) crea coherencia — usa para áreas extensas. Triádico (120° equidistantes) equilibra viveza y variedad — usa para sistemas de diseño con tres roles cromáticos distintos.
Contraste y accesibilidad: el contraste percibido no dépende solo de la diferencia de luminosidad. El ratio WCAG mide la luminancia relativa (Y en el modelo CIE XYZ), que tiene en cuenta como el ojo responde de forma diferente a las frecuencias RGB. Un verde puro parece más luminoso que un azul de la misma "luminosidad" HSL.
Temperatura de color: los tonos cálidos (rojo, naranja, amarillo) avanzan visualmente y aumentan la percepción de energía. Los tonos fríos (azul, verde-azulado) retroceden y calman. En las UI, usa los cálidos para acciones urgentes (CTA, avisos) y los fríos para contenido informativo estable.
Teoría del color aplicada
- Elegir el color de marca: considera el sector (convencional vs. disruptivo), el demográfico objetivo (adultos prefieren tonos desaturados, niños colores saturados) y la diferenciación de los competidores.
- Construir escalas neutras: los grises perfectamente neutros parecen estériles. Usa grises "tintados" con 5-10% de saturación en el hue del brand para coherencia cromática.
- Gestionar el color de los estados: rojo para error, verde para éxito, amarillo para aviso son convenciones arraigadas. Cámbialas solo si tienes una razón fuerte — los usuarios esperan estos patrones.
- Dark mode: no inviertas simplemente los colores — rediseña la paleta. Los colores saturados sobre fondo oscuro vibran demasiado; reduce la saturación un 20-30% para la variante dark.
FAQ — Teoría del color
¿Cuál es la diferencia entre RGB, HSL y OKLCH?
RGB describe los colores como combinación de rojo, verde y azul — es el formato nativo de las pantallas. HSL reformula los mismos colores en términos más intuitivos (hue, saturación, luminosidad). OKLCH es un modelo perceptualmente uniforme: una variación igual de luminosidad L parece visualmente igual indépendientemente del hue, lo que no es cierto en HSL. Para generar escalas de color uniformes, OKLCH da resultados mucho mejores.
¿Cuántos colores debe tener una paleta UI completa?
Una paleta operativa contiene: 1-2 colores de marca (primario, eventualmente secundario), 1 acento, una escala neutra (6-10 pasos), 3 colores semánticos (error, éxito, aviso). En total 15-25 valores. Más de eso tiende a crear incoherencia; menos a menudo no cubre todos los casos de uso de la interfaz.
¿Los colores tienen realmente efectos psicológicos?
La psicología del color existe, pero es mucho más cultural y contextual de lo que los "significados universales del color" sugieren. El blanco significa pureza en occidente y luto en algunas culturas asiáticas. El rojo es peligro en UI pero celebración en muchas culturas. Lo que siempre funciona es el contraste, la coherencia interna y el respeto de las convenciones del sector específico.
¿Cómo creo grises que no parezcan planos?
Usa grises "warm" o "cool" en vez de neutros puros. Un gris con 5-8% de saturación en el hue del brand primary parece parte del sistema cromático, no un elemento separado. Ejemplo: para un brand blue (#2563eb), usa neutros con hue ~220° y saturación 6-8% en vez de hue 0° saturación 0%.