00. Criterio de uso: sobrio
La paleta oficial es amplia y vistosa, pero una interfaz profesional no debe usarla toda a la vez. Regla práctica de proporción por pantalla:
- Una sola acción principal por pantalla, en azul institucional.
- Verde, amarillo y rojo solo para estados (aprobado, pendiente, error), en tonos suaves.
- Ocre y violeta solo en la línea del logotipo y piezas impresas; no en componentes.
- La línea multicolor como firma fina (3 px) en pie de página y portada; nunca como borde de todo.
- Degradados vivos (azul → cian) en portadas e ilustraciones, no en botones, tablas ni tarjetas.
01. Paleta oficial
Los 8 colores de la página «Paleta cromática» del manual. Los cuatro primarios definen la identidad (en la web dominan el azul → cian → celeste); el resto se usa como acento en objetos. Clic en un color para copiar su HEX.
Primario
Azul institucional (PRIMARIO)
HEX
#0071BB
RGB 0 · 113 · 187
CMYK 87 · 49 · 0 · 0
CSS var(--mg-primary)
Tailwind bg-mg-primary
Primario
Cian (PRIMARIO – final del degradado)
HEX
#00B7D9
RGB 0 · 183 · 217
CMYK 72 · 0 · 13 · 0
CSS var(--mg-cyan)
Tailwind bg-mg-cyan
Primario
Celeste (PRIMARIO – fondos suaves)
HEX
#9FD7E5
RGB 159 · 215 · 229
CMYK 41 · 0 · 11 · 0
CSS var(--mg-sky)
Tailwind bg-mg-sky
Primario
Rojo (PRIMARIO – acentos / alertas)
HEX
#F7003C
RGB 247 · 0 · 60
CMYK 0 · 96 · 66 · 0
CSS var(--mg-red)
Tailwind bg-mg-red
Acento
Amarillo (acento)
HEX
#FEC800
RGB 254 · 200 · 0
CMYK 0 · 23 · 93 · 0
CSS var(--mg-yellow)
Tailwind bg-mg-yellow
Acento
Verde (acento / éxito)
HEX
#69B75E
RGB 105 · 183 · 94
CMYK 63 · 0 · 78 · 0
CSS var(--mg-green)
Tailwind bg-mg-green
Acento
Ocre (acento)
HEX
#A28034
RGB 162 · 128 · 52
CMYK 30 · 41 · 85 · 21
CSS var(--mg-olive)
Tailwind bg-mg-olive
Acento
Violeta (acento – extremos de la franja)
HEX
#5618BA
RGB 86 · 24 · 186
CMYK 80 · 89 · 0 · 0
CSS var(--mg-purple)
Tailwind bg-mg-purple
Neutros
HEX
#1D1D1BCSS var(--mg-ink)HEX
#606060CSS var(--mg-gray)HEX
#F6F5F5CSS var(--mg-surface)HEX
#081A2CCSS var(--mg-navy-900)HEX
#F1F4F8CSS var(--mg-gray-100)02. Superficies y degradados
Para interfaces de trabajo se usan superficies blancas y azul-noche; la gama azul brillante (0071BB → 00B7D9 → 9FD7E5) queda para portadas e ilustraciones. Todas las variables existen en CSS, SCSS, Less, Tailwind, JSON y en los temas de AdminLTE, Material y PrimeNG.
Azul-noche vertical. Sidebar y menús laterales (superficie oscura sobria).
Variable:
var(--mg-gradient-deep)
Clase: mg-bg-deep · Tailwind: bg-mg-grad-deep
linear-gradient(180deg, #081A2C 0%, #051220 100%)Azul-noche diagonal. Hero, cabeceras de página, tarjetas y pies oscuros.
Variable:
var(--mg-gradient-night)
Clase: mg-bg-night · Tailwind: bg-mg-grad-night
linear-gradient(135deg, #0B2239 0%, #051220 100%)Tonal: el mismo azul con un leve brillo vertical. Botón principal (contraste 5:1 con texto blanco).
Variable:
var(--mg-gradient-steel)
Clase: mg-bg-steel · Tailwind: bg-mg-grad-steel
linear-gradient(180deg, #147CC0 0%, #0071BB 100%)La línea de la marca: azul → cian a 135°. Uso puntual: portadas, ilustraciones, acentos finos.
Variable:
var(--mg-gradient-primary)
Clase: mg-bg-primary · Tailwind: bg-mg-grad-primary
linear-gradient(135deg, #0071BB 0%, #00B7D9 100%)Los tres azules (azul → cian → celeste). Banners y portadas; evitar en pantallas de trabajo.
Variable:
var(--mg-gradient-sky)
Clase: mg-bg-sky · Tailwind: bg-mg-grad-sky
linear-gradient(135deg, #0071BB 0%, #00B7D9 55%, #9FD7E5 100%)Cian → celeste. Zonas claras de apoyo (texto oscuro).
Variable:
var(--mg-gradient-aqua)
Clase: mg-bg-aqua · Tailwind: bg-mg-grad-aqua
linear-gradient(135deg, #00B7D9 0%, #9FD7E5 100%)Celeste muy suave. Fondos de sección y de formularios.
Variable:
var(--mg-gradient-mist)
Clase: mg-bg-mist · Tailwind: bg-mg-grad-mist
linear-gradient(180deg, #9FD7E5 0%, #EAF6FA 100%)Horizontal (90°): filetes y barras finas de acento.
Variable:
var(--mg-gradient-primary-h)
Clase: mg-bg-primary-h · Tailwind: bg-mg-grad-primary-h
linear-gradient(90deg, #0071BB 0%, #00B7D9 100%)Degradados de acento (uso muy puntual)
Para ilustraciones, íconos o infografías. No los use como fondo de tarjetas, botones o paneles de trabajo.
Cian → verde. Estados positivos, turismo y naturaleza.
Variable:
var(--mg-gradient-tropical)
Clase: mg-bg-tropical · Tailwind: bg-mg-grad-tropical
linear-gradient(135deg, #00B7D9 0%, #69B75E 100%)Amarillo → ocre. Destacados, fechas, llamadas de atención.
Variable:
var(--mg-gradient-sun)
Clase: mg-bg-sun · Tailwind: bg-mg-grad-sun
linear-gradient(135deg, #FEC800 0%, #DAAC00 100%)Rojo → rojo oscuro. Alertas y acciones destructivas.
Variable:
var(--mg-gradient-heat)
Clase: mg-bg-heat · Tailwind: bg-mg-grad-heat
linear-gradient(135deg, #F7003C 0%, #AD002A 100%)Ocre. Cultura, patrimonio, etiquetas.
Variable:
var(--mg-gradient-earth)
Clase: mg-bg-earth · Tailwind: bg-mg-grad-earth
linear-gradient(135deg, #A28034 0%, #715A24 100%)Violeta → azul. Extremos de la franja; uso muy puntual.
Variable:
var(--mg-gradient-violet)
Clase: mg-bg-violet · Tailwind: bg-mg-grad-violet
linear-gradient(135deg, #5618BA 0%, #0071BB 100%)03. La línea (franja multicolor)
La franja de nueve segmentos que acompaña al logotipo en tarjetas, carnets, pendones, backing y vallas. En la web se usa como remate de cabeceras, pies de página, tarjetas y separadores.
.mg-stripe (6 px)
.mg-stripe--thin / --thick / --xl
.mg-stripe--flow (continua)
.mg-stripe--v vertical
Orden oficial de la línea (de izquierda a derecha)
purple #5618BA → olive #A28034 → yellow #FEC800 → red #F7003C → primary #0071BB → cyan #00B7D9 → sky #9FD7E5 → green #69B75E → purple #5618BA
<hr class="mg-stripe"> <!-- línea suelta -->
<div class="mg-card mg-card--stripe-top">…</div> <!-- línea como borde superior de una tarjeta -->
<header class="mg-navbar">…</header> <!-- navbar con la línea abajo -->
<div class="mg-stripe-top" style="--mg-stripe-h:10px">…</div> <!-- cualquier contenedor -->04. Escalas tonales
Cada color tiene una escala 50–950 (500 = color oficial) para hover/active, fondos suaves, bordes y texto. navy (azul-noche) y gray (gris azulado) son los neutros de interfaz. Clic para copiar.
50100200300400500600700800900950
primary
navy
gray
cyan
sky
red
yellow
green
olive
purple
05. Colores semánticos y accesibilidad
Mapeo recomendado de la marca a estados de interfaz y contraste de texto calculado (WCAG 2.1). Regla práctica: texto blanco sobre azul y rojo; texto oscuro sobre cian, celeste, amarillo y verde.
--mg-color-primary = #0071BBTexto encima: --mg-on-primary--mg-color-secondary = #606060Texto encima: --mg-on-secondary--mg-color-info = #00B7D9Texto encima: --mg-on-info--mg-color-success = #69B75ETexto encima: --mg-on-success--mg-color-warning = #FEC800Texto encima: --mg-on-warning--mg-color-danger = #F7003CTexto encima: --mg-on-danger| Muestra | Combinación | Contraste | Nivel | Nota |
|---|---|---|---|---|
| Aa | Blanco sobre Azul primario | 5.15:1 | AA | Texto en botones y barras azules |
| Aa | Negro de marca sobre Cian | 7.06:1 | AAA | Cian: usar texto oscuro, no blanco |
| Aa | Blanco sobre Cian | 2.39:1 | No cumple | No usar para texto normal |
| Aa | Negro de marca sobre Celeste | 10.71:1 | AAA | Fondos suaves |
| Aa | Blanco sobre Rojo | 4.18:1 | AA grande | Solo texto grande/negrita (≥ 18.7 px bold) |
| Aa | Negro de marca sobre Amarillo | 10.83:1 | AAA | Acentos y avisos |
| Aa | Negro de marca sobre Verde | 6.86:1 | AA | Éxito |
| Aa | Blanco sobre Ocre | 3.70:1 | AA grande | Texto grande/negrita |
| Aa | Blanco sobre Violeta | 9.39:1 | AAA | |
| Aa | Gris institucional sobre Blanco | 6.29:1 | AA | Texto secundario |
| Aa | Blanco sobre extremo del degradado «action» | 3.00:1 | AA grande | Mínimo 3:1 |
| Aa | Blanco sobre extremo del degradado «primary» (cian) | 2.39:1 | No cumple | Solo decorativo / títulos enormes |