Anatomia de un Tema de Color UI
Un tema de color UI completo incluye varias categorias de color basadas en roles. Los colores primarios representan la identidad principal de la marca. Los colores secundarios proporcionan jerarquia visual de apoyo. Los colores de acento llaman la atencion sobre elementos interactivos. Los colores de fondo y superficie definen las capas del lienzo. Los colores de texto aseguran la legibilidad. Los colores semanticos (exito, advertencia, error, info) comunican estados del sistema.
Diseno de Modo Claro y Oscuro
Las aplicaciones modernas deben soportar modos de color tanto claro como oscuro. El modo claro usa fondos claros con texto oscuro; el modo oscuro invierte esta relacion. Sin embargo, el modo oscuro no es simplemente una inversion de valores. Los colores de superficie necesitan capas cuidadosas con diferencias sutiles de elevacion. Los colores de marca pueden necesitar ajustes de saturacion para evitar parecer demasiado vibrantes contra fondos oscuros.
Convenciones de Tokens por Framework
Cada framework CSS usa diferentes convenciones de nomenclatura para tokens de color. Tailwind CSS usa clases de utilidad como bg-primary y text-secondary. Material Design usa escalas de sombras numeradas (50-900). Bootstrap usa nombres contextuales como btn-success. shadcn/ui sigue un sistema basado en HSL con tokens de radio y espaciado. Exportar en el formato correcto ahorra considerable trabajo de traduccion manual.
Contraste y Estandares de Accesibilidad
WCAG 2.1 define relaciones de contraste minimas para la legibilidad del texto. El texto normal requiere 4.5:1 contra su fondo; el texto grande requiere 3:1. Estas relaciones se aplican tanto en modo claro como oscuro. Los componentes UI y objetos graficos requieren contraste de 3:1 contra colores adyacentes. Un tema bien disenado asegura que todos los textos y elementos interactivos cumplan estos umbrales.
