Paletas para identidad web española, catalana y LATAM
Equipos de diseno web en España y America Latina parten habitualmente de un color de marca para construir todo su sistema cromatico. Este generador produce teintes, sombras y esquemas armonicos a partir de un unico HEX , un input directo para la configuracion de Tailwind CSS (tailwind.config.js) o para archivos de tokens de diseno. En sitios bilingues (castellano/catalan o castellano/euskera), mantener una paleta coherente entre versiones linguisticas es imprescindible para la consistencia visual.
La norma UNE 301549 exige un contraste minimo de 4,5:1 para texto normal en sitios publicos. Cada color generado debe comprobarse con el Verificador de Contraste antes de aplicarlo a textos o elementos interactivos. Los tonos alrededor del 50% de luminosidad suelen fallar tanto la prueba texto-blanco como la prueba texto-negro.
Requisitos de contraste WCAG / UNE 301549
| Nivel | Texto normal | Texto grande (18pt+ o 14pt negrita) |
|---|---|---|
| AA (minimo) | 4,5:1 | 3:1 |
| AAA (mejorado) | 7:1 | 4,5:1 |
Limites de la teoria de la armonia del color
Los esquemas de armonia (complementario, triadico, etc.) describen relaciones matematicas en la rueda HSL , no garantizan un resultado estetico adecuado en todos los contextos. Un par complementario naranja-azul es tecnicamente correcto, pero puede resultar inadecuado para una marca de servicios financieros o de salud. Usa la paleta generada como punto de partida y adapta segun el tono de marca, sector y publico.
De la paleta a los tokens de diseno
Copia las propiedades CSS personalizadas en tu bloque :root. Para flujos de trabajo con tokens, los valores HEX se importan directamente en Style Dictionary o Figma Tokens. El Extractor de Paleta es un punto de partida util: extrae la paleta de una imagen existente y luego refina aqui las teintes y sombras.