Paleta de color

Gama cromática

La identidad visual de Utel se articula a través de un sistema cromático integral, diseñado para proyectar nuestra esencia y fortalecer nuestra presencia en cada punto de contacto. Nuestra gama se organiza en tres niveles estratégicos que trabajan en conjunto para asegurar una comunicación coherente y de alto impacto:

• Paleta Principal: El eje fundamental de nuestra identidad está compuesto por el Verde Profundo y el Verde Utel. Estos tonos actúan como nuestro identificador visual de primer impacto, generando sensaciones positivas vinculadas al crecimiento orgánico y a la conexión con nuevos entornos. Esta combinación nos otorga la flexibilidad y el contraste necesarios para jerarquizar la información y establecer el dominio visual que nos define.
• Paleta Complementaria: Esta selección de colores —Verde Lima, Amarillo y Morado— está diseñada para generar un salto de color estratégico en nuestras piezas. Su función es romper la uniformidad, inyectar dinamismo y atraer la mirada hacia los elementos clave, permitiéndonos resaltar valores como la innovación, la alegría y la confianza con un impacto visual diferenciado.
• Paleta de Soporte: Como base estructural de nuestro sistema, contamos con una escala de neutros que incluye grises, blanco y negro. Estos colores garantizan la legibilidad, el equilibrio y la elegancia en todas nuestras piezas, funcionando como el soporte necesario para que tanto la paleta principal como la complementaria desplieguen todo su potencial comunicativo.

Este ecosistema cromático es nuestra herramienta fundamental, garantizando que cada mensaje institucional mantenga la fuerza, la cohesión y la identidad que distinguen a nuestra universidad.

Paleta principal

Paleta complementaria

Paleta de soporte

Proporción global

Normativas de proporción y uso del color

Para garantizar que la identidad visual de la marca mantenga un equilibrio, coherencia y un alto nivel de reconocimiento en todos sus puntos de contacto, se ha establecido un sistema de proporción cromática basado en la regla 40-40-20.

Es fundamental entender que esta proporción rige el ecosistema visual global de la marca (por ejemplo, el aspecto general de un sitio web, un catálogo completo o el feed en redes sociales). En el diseño de piezas individuales, los porcentajes pueden flexibilizarse para priorizar la jerarquía del mensaje y evitar la saturación.

1.- La Identidad Central: 80% Paleta Principal

El 80% del peso visual de la marca está asignado a nuestros colores base: Verde Profundo (40%) y Verde Utel (40%). Esta distribución asegura un reconocimiento inmediato.

Para evitar la monotonía o el choque visual en piezas individuales, no es obligatorio usar ambos colores simultáneamente. Te recomendamos elegir un "color protagonista" según la intención del mensaje, creando dos rutas visuales:

Ruta Institucional (predominio del Verde Profundo): Ideal para comunicados oficiales, reportes y temas corporativos. Transmite seriedad, peso y formalidad. El Verde Utel puede omitirse o usarse solo en detalles mínimos.

Ruta Dinámica (predominio del Verde Utel): Ideal para campañas promocionales, redes sociales y vida estudiantil. Transmite energía, cercanía y modernidad. El Verde Profundo puede utilizarse únicamente para textos o fondos secundarios que aporten contraste.

Nota: ningún tono de verde es incorrecto. Su uso responde a la creación de una jerarquía visual y de protagonismo, pero no es un lineamiento mandatorio.

2.- Acentos Visuales: 20% Paleta Complementaria

El 20% restante está reservado para la paleta complementaria (Verde Lima, Amarillo y Morado).

• Uso estratégico: Estos colores nunca deben utilizarse como fondos principales o plastas dominantes. Su propósito es actuar como herramientas de jerarquía visual.
• Aplicación: Se utilizan exclusivamente para destacar información crítica, elementos interactivos (botones o Call to Actions), visualización de datos (gráficas, infografías) o iconografía específica. Aportan el contraste necesario para guiar la mirada del usuario sin diluir la presencia de los colores institucionales.

Proporción de color en piezas individuales (por ejemplo redes sociales)

Aunque nuestra marca vive globalmente bajo la regla 40-40-20, forzar esta matemática exacta en un solo arte (como un post de Facebook o Instagram) generará saturación visual y pérdida de jerarquía.

Para piezas individuales, los porcentajes de color deben reasignarse bajo el principio de "Un Protagonista y Un Acento".

Al diseñar un arte, divide visualmente tu lienzo (100%) de la siguiente manera:

1. El Protagonista/Fondo (Aprox. 70%-80% del arte)

• Qué colores usar: Elige solo uno de los colores principales (Verde Profundo o Verde Utel) o un color neutro (Blanco/Gris Claro).
• Explicación: Este color dominará la pieza. Será el fondo, la plasta principal o el filtro de la fotografía. Define el "tono" del mensaje (institucional si usas Profundo; dinámico si usas Utel; limpio si usas Blanco).

2. El Soporte/Estructura (Aprox. 10%-20% del arte)

• Qué colores usar: El "otro" verde principal que no usaste de fondo, más los colores neutros (Negro/Blanco).
• Explicación: Sirven para estructurar la información sin robar atención. Aquí entran los textos, líneas divisorias, o plecas secundarias. Ejemplo: Si tu fondo es Verde Profundo, tus textos serán Blancos y quizás haya una pequeña pleca en Verde Utel.

3. El Acento/Llamado a la Acción (Aprox. 5%-10% del arte)

• Qué colores usar: La paleta complementaria (Verde Lima, Amarillo o Morado).
• Explicación: En un arte individual, el 20% global de la marca se reduce a un toque mínimo pero ultravibrante. Este porcentaje tan pequeño es exclusivo para lo más importante del post: un botón de "Regístrate", un "50% de descuento", un ícono clave o una fecha límite.

¿Dónde viven los colores (globalmente)?

Esta tabla guía el uso y combinación de los colores de la paleta, asegurando coherencia, legibilidad y una correcta jerarquía visual en todos los materiales.

*No todos los colores, ver directamente cuáles sí y cuáles no en sus respectivas páginas.

Reglas de contraste y legibilidad

El propósito fundamental de esta categoría es garantizar la correcta visualización y accesibilidad siempre que un elemento se coloca encima de otro. Las siguientes reglas definen las combinaciones de color permitidas exclusivamente para entender cómo interactúan las capas de diseño entre sí en cualquier formato. Ya sea que se trate de texto sobre una pleca, una pleca sobre otra, o un elemento gráfico sobre un fondo, respetar estas combinaciones es vital para asegurar que cada nivel de superposición mantenga una jerarquía clara y una lectura cómoda, sin comprometer el impacto visual.

Colores principales y de soporte

Los colores principales y los tonos claros de soporte están destinados exclusivamente para construir los fondos de nuestras composiciones. Para asegurar la máxima legibilidad, cualquier texto o elemento superpuesto debe respetar estrictamente las combinaciones de contraste aprobadas y mostradas en el interior de cada bloque visual.

Colores complementarios

Los colores complementarios están reservados para dirigir la atención y generar interacción. Su función explícita es dar vida y hacer resaltar fuertemente los botones de CTA, asegurando que las decisiones clave destaquen de inmediato sobre el resto de la interfaz.

Colores de soporte

Los colores oscuros de soporte tienen una regla de uso estricta: deben aplicarse únicamente en esquemas monocromáticos. Están diseñados para aportar estructura, profundidad y jerarquía, contrastando de forma directa y utilizando exclusivamente el color blanco para sus textos o elementos interiores.

Degradados

Derivado de nuestra gama cromática, la unión entre cada color puede usarse a manera de degradado. Estos son los usos recomendados y que permiten un balance visual agradable, no saturado y que se adaptan a cualquier uso o soporte. Considera los códigos de color, los grados de orientación y su combinación. Es importante que tus degradados siempre comiencen desde la esquina inferior izquierda hacia la esquina superior derecha.

Degradado 1

hex 06B706
rgb 6 186 6

hex 1C2D1A
rgb 28 45 26

Aplicación lineal que evoluciona hacia el Verde Profundo. Se utiliza un punto de fuga externo para suavizar la mezcla, asegurando que el matiz oscuro aporte profundidad sin perder su identidad verde ni tornarse negro. El porcentaje de presencia es variable debido a que son colores principales.

Degradado 2

hex 06B706
rgb 6 186 6

hex 1C2D1A
rgb 28 45 26

Degradado radial del Verde Utel al Verde Profundo. Se utiliza un radio extendido para que el tono más oscuro no se concentre en las esquinas, garantizando un acabado limpio, vibrante y libre de tonos negruzcos.

Degradado 3

hex 06B706
rgb 6 186 6

hex 4000BC
rgb 64 0 188

El uso del color complementario actúa como un acento periférico. Se proyecta de forma marginal (10%) para elevar el contraste y aportar dinamismo visual, asegurando que la transición sea sutil y el Verde Utel permanezca como el tono dominante absoluto.

Degradado 4

hex D9D9D9
rgb 217 217 217

hex F8F8F8
rgb 248 248 248

Este degradado se puede utilizar de fondo y donde se quiera resaltar personas o atributos importantes, con sus colores en positivo o en algunas aplicaciones donde se requiera diferenciar con el fondo blanco sutilmente.

+Recomendado para:
• Su uso en hero es uno de los más poderosos.
• Uso dentro de la web.

Degradados no permitidos

Estos son algunos ejemplos no permitidos del uso de degradados en nuestra comunicación. Considera no alterar las formas, la integración de más de dos colores ni ajustes radiales no consistentes.

Ejemplo de usos correctos e incorrectos

Ejemplo del uso de degradados en nuestros ads.

Lineamientos técnicos para aplicación de color

Configuración de Archivos y Perfiles de Color

Para garantizar la máxima fidelidad y consistencia en la reproducción del color, es necesario que todos los diseñadores y proveedores configuren sus espacios de trabajo en los programas de diseño (como Adobe Illustrator, Photoshop o InDesign) con los siguientes perfiles estándar, dependiendo del destino final de la pieza: