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 manteniendola alta solo para los acentos.
Armonía de color: complementario (180°) crea tension visual — usa para destacar. Analogo (±30°) crea coherencia — usa para áreas extensas. Triadico (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 calidos (rojo, naranja, amarillo) avanzan visualmente y aumentan la percepción de energia. Los tonos frios (azul, verde-azulado) retroceden y calman. En las UI, usa los calidos para acci?nes urgentes (CTA, avisos) y los frios para contenido informativo estable.
Teoría del color aplicada
- Elegir el color de marca: considera el sector (convencional vs. disruptivo), el demografico objetivo (adultos prefieren tonos desaturados, ninos colores saturados) y la diferenciacion de los competidores.
- Construir escalas neutras: los grises perfectamente neutros parecen esteriles. Usa grises "tintados" con 5-10% de saturación en el hue del brand para coherencia cromatica.
- 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 fürte — 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 psicologicos?
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 especifico.
¿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 cromatico, 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%.
¿D?nde puedo profundizar en la teoría del color para diseño digital?
"Interaction of Color" de Josef Albers sigue siendo fundamental para la percepción. Para el digital, el blog de Bjorn Ottosson (autor de OKLCH y OKHSV) es el recurso m?s actualizado sobre ciencia del color perceptual. Refactoring UI de Adam Wathan y Steve Schoger cubre la aplicación práctica en el diseño de interfaces.