Identidad de marca
Cómo crear una paleta de marca que funcione en la práctica
Asigna una función a cada color y muestra qué combinaciones funcionan en diseños reales.
La respuesta breve
Empieza por las aplicaciones que necesita el cliente. Define funciones para el texto, los fondos y los acentos; comprueba las combinaciones reales y documenta los usos permitidos con ejemplos. Mantén el logotipo aprobado separado de los colores de apoyo de la interfaz.
1. Empieza por las aplicaciones, no por el número de muestras
Una fila de cinco colores atractivos deja varias decisiones sin resolver. ¿Cuál sirve para un párrafo? ¿Qué fondo lo acompaña? ¿Puede el cliente usar el acento en un botón de reserva o en la etiqueta de un gráfico? Enumera las primeras aplicaciones: una carta, una web pequeña, envases y una presentación, por ejemplo.
En este ejercicio ficticio, Field Table es un café de barrio. Su paleta contiene Bosque #24352B, Avena #F7F3E8 y Cosecha #D7A84B. Los ejemplos inventados explican un método de especificación. No son una identidad lista para usar ni una receta universal.
Reúne textos reales antes de elegir tonos de apoyo. Un horario extenso y un precio ponen a prueba la paleta mejor que una palabra decorativa en una mesa de trabajo vacía.
2. Asigna funciones concretas
Escribe la función junto al valor. Bosque es el texto predeterminado, Avena es un fondo claro y Cosecha es un fondo de acento. Estas indicaciones resultan más útiles que “color 1”, “color 2” y “color 3”. Una función puede usar valores distintos según el contexto, pero cada variante debe ser intencional y estar documentada.
USWDS ofrece un ejemplo público de colores organizados por funciones. Aprovecha esa forma de nombrar los usos, sin copiar su paleta gubernamental. Para Field Table basta una ficha breve; no hace falta imponer una cantidad fija de colores ni porcentajes universales.
Separa los acentos de identidad de los colores semánticos para errores, avisos y confirmaciones. Un acento cálido de marca no equivale automáticamente a un aviso, y el verde de marca no debe ser la única señal de éxito. Nombra y documenta esas funciones por separado cuando el cliente necesite una interfaz.
Más información: USWDS: colores del tema por función · USWDS: colores para estados de la interfaz
3. Comprueba juntos el texto y el fondo
El contraste corresponde a una combinación de colores en uso. La matriz utiliza valores sRGB opacos sobre fondos planos. Las proporciones se calculan a partir de la luminancia relativa. Se muestran redondeadas para facilitar la lectura, pero el resultado utiliza el valor sin redondear.
El contraste de texto WCAG AA exige un mínimo de 4,5:1 para texto normal y 3:1 para texto grande: al menos 18 pt (24 píxeles CSS), o 14 pt en negrita (unos 18,7 píxeles CSS), en el tamaño real de visualización. Comprueba el texto en su aplicación final, no solo el valor en puntos del archivo de diseño. No redondees un resultado insuficiente para darlo por válido. Estas comprobaciones solo evalúan el contraste del texto.
| Texto | Fondo | Contraste | Texto normal |
|---|---|---|---|
| #24352B | #F7F3E8 | 11,70:1 | Cumple |
| #FFFFFF | #D7A84B | 2,19:1 | No cumple |
| #24352B | #D7A84B | 5,92:1 | Cumple |
| #647467 | #F7F3E8 | 4,47:1 | No cumple |
| #FFFFFF | #24352B | 12,97:1 | Cumple |
Más información: W3C: contraste del texto
4. Separa el logotipo de los colores de apoyo
La excepción del logotipo no exime al texto corriente de la marca. Mantén el arte aprobado y sus normas de aplicación separados del texto, los botones y la navegación.
En el ejemplo, el texto blanco sobre Cosecha se distingue con dificultad. El texto Bosque sobre ese mismo fondo ofrece más contraste. Así se mejora la composición de apoyo sin recolorear silenciosamente el logotipo aprobado.
Si necesitas oscurecer un tono de apoyo, asigna una función propia al nuevo valor e indica dónde se permite. No sustituyas todas las apariciones del color original sin revisar el arte y acordar el alcance.
5. Diseña una muestra pequeña con contenido real
Maqueta una sección de la carta, una tarjeta de horarios y un botón de reserva. Repite las mismas funciones en las tres piezas. Prueba después un título más largo y un ancho de móvil. Comprueba el tamaño y el grosor reales de la tipografía, no solo el resultado de una calculadora.
Si el color comunica estados o categorías, añade otra señal visible, como una etiqueta o una forma. La leyenda de un gráfico debe identificar claramente cada serie. No obligues al cliente a interpretar “verde significa disponible” únicamente por el color.
Comprueba por separado el modo oscuro, las fotografías, las transparencias y los degradados. Una combinación probada sobre un fondo claro uniforme no demuestra que funcione sobre un vídeo u otro fondo.
Más información: W3C: no depender únicamente del color
6. Entrega decisiones, además de valores
Incluye el nombre, la función, el valor digital exacto, la combinación permitida y un ejemplo realista. Señala las combinaciones que no deben usarse para texto normal. Separa las especificaciones de impresión y acórdalas para el soporte, el proceso y el proveedor concretos.
La ficha permite que otro diseñador documente un cambio y su motivo. Entrégala junto a los archivos de logotipo aprobados y las demás normas de identidad. No describas toda la marca como “accesible” solo porque algunas combinaciones hayan superado la prueba.
Versión y responsable: … Aplicación: … Función y valor del color: … Texto / fondo: … Tamaño y grosor del texto: … Contraste sin redondear y resultado: … Uso permitido y ejemplo: … Restricciones y comprobaciones pendientes: …
Preguntas frecuentes
¿Todos los colores deben servir para texto corrido?
No. Un acento puede ser útil como fondo o elemento decorativo. Documenta dónde se permite y acompáñalo de un texto adecuado.
¿Puedo conservar un acento claro?
A menudo sí. Prueba un texto más oscuro encima o resérvalo para una función que no dependa de texto tenue. Comprueba la aplicación real.
¿Superar el contraste equivale a una revisión completa de accesibilidad?
No. Solo evalúa una relación visual concreta. La navegación, el significado, la interacción y los demás requisitos necesitan sus propias comprobaciones.
PONLO EN PRÁCTICA
¿Todo listo para preparar tu paquete?
logopack.app convierte tus diseños SVG en un paquete de logotipos organizado. Previsualiza los archivos, elige entre las opciones de exportación disponibles y revisa el resultado antes de entregarlo. Para exportar tus propios logotipos o iconos necesitas Pro.
Empieza con el generador de paquetes de logotipos, explora el ZIP de ejemplo o compara los planes actuales.
Abrir generador