Saltar al contenido
GlassMarshmallow
Volver: Herramientas

Generador de paletas

Elige un color base y una armonía: sale una paleta con un papel para cada color, aplicada a una página de ejemplo hecha con el framework. Cada color cumple su contraste en modo claro y oscuro.

Vista previa

Color base

0°
0 %
100 %

Contraste del texto

Texto Blanco: 1,0:1 No llega a AA
Texto Negro: 21,0:1 Se lee bien (AA)
Armonía

Colores de la paleta

  • Fondo#f5f9fa
  • Superficie#ffffff
  • Texto#1d2e3013.3:1 AAA
  • Texto secundario#5773754.8:1 AA
  • Principal#5cdfeb
  • Texto sobre el principal#00000013.2:1 AAA
  • Secundario#cbf6e4
  • Acento#1b6dde4.6:1 AA
Textos de ejemplo
/* Generado con GlassMarshmallow */
:root {
  --gm-bg: #f5f9fa;
  --gm-surface: #ffffff;
  --gm-surface-solid: #ffffff;
  --gm-surface-glass: #ffffff;
  --gm-form-bg: #ffffff;
  --gm-header-bg: #ffffff;
  --gm-text: #1d2e30;
  --gm-nav-link: #1d2e30;
  --gm-text-secondary: #577375;
  --gm-muted: #577375;
  --gm-primary: #5cdfeb;
  --gm-on-primary: #000000;
  --gm-tag: #cbf6e4;
  --gm-fill-subtle: #cbf6e4;
  --gm-accent: #1b6dde;
  --gm-link: #1b6dde;
  --gm-focus: #1b6dde;
  --gm-field-focus: #1b6dde;
}

[data-theme="dark"] {
  --gm-bg: #0c1617;
  --gm-surface: #172526;
  --gm-surface-solid: #172526;
  --gm-surface-glass: #172526;
  --gm-form-bg: #172526;
  --gm-header-bg: #172526;
  --gm-text: #ecf3f4;
  --gm-nav-link: #ecf3f4;
  --gm-text-secondary: #adc1c2;
  --gm-muted: #adc1c2;
  --gm-primary: #5cdfeb;
  --gm-on-primary: #000000;
  --gm-tag: #0f5739;
  --gm-fill-subtle: #0f5739;
  --gm-accent: #5c97eb;
  --gm-link: #5c97eb;
  --gm-focus: #5c97eb;
  --gm-field-focus: #5c97eb;
}

Cómo aplicar los colores de la paleta

Una paleta no se reparte a partes iguales. La regla 60-30-10 ayuda a que la página se vea equilibrada: mucho color tranquilo, algo de color de apoyo y muy poco color fuerte, que es el que guía la mirada.

  • 60 % para el fondo y las superficies: el color que menos se nota y más espacio ocupa.
  • 30 % para el secundario: etiquetas, avisos, zonas destacadas y bloques que quieres separar del fondo.
  • 10 % para el principal y el acento: botones de acción, enlaces e iconos. Si está en todas partes, deja de destacar.

Dónde va cada color

  • FondoEl fondo de toda la página. Neutro, con un poco del tono base para que no sea un gris sin más.
  • SuperficieTarjetas, formularios, menús y la barra de navegación: todo lo que va por encima del fondo.
  • TextoTítulos y texto principal. Llega a 7:1 sobre el fondo (AAA).
  • Texto secundarioDescripciones, ayudas y texto de menos importancia. Llega a 4,5:1 sobre el fondo (AA).
  • PrincipalEl botón de la acción principal y los elementos que más tienen que destacar. Uno por zona, como mucho.
  • Texto sobre el principalEl texto y los iconos de los botones principales: blanco o negro, el que más contraste.
  • SecundarioEtiquetas, avisos y fondos de zonas destacadas. Lleva el texto normal encima.
  • AcentoEnlaces, iconos y el foco del teclado. Se lee sobre el fondo y la superficie.

Reglas para usarla bien

  • El texto normal necesita 4,5:1 con su fondo (7:1 para AAA) y los bordes de campos e iconos, 3:1. La paleta ya viene ajustada; si cambias un color, vuelve a medirlo.
  • No uses solo el color para dar información: acompáñalo de texto o de un icono (por ejemplo, un error en rojo también dice que es un error).
  • Los colores de estado (éxito, aviso y peligro) van aparte de la paleta: menta, limón y coral en GlassMarshmallow.
  • Pruébala en modo claro y oscuro: el CSS trae los dos y el oscuro no es el claro invertido.
  • Usa el principal con moderación: si todo destaca, nada destaca.