Paleta

En esta página

Paleta
Negro, blanco y grises
Escalas
Cómo usarlos
Variables CSS
Accesibilidad

Accesibilidad: todas las combinaciones cumplen WCAG 2.2 AA y la mayoría llegan a AAA. El detalle está al final de la página.

Color	Nombre en las clases	Pastel	Color de texto (modo claro)
Celeste	`sky`	`#5CDFEB`	`#02464B`
Azul	`blue`	`#8AB4FF`	`#003290`
Lavanda	`lavender`	`#B9A3FF`	`#5F23B8`
Rosa	`pink`	`#FFA6D1`	`#940061`
Melocotón	`peach`	`#FFB98A`	`#5F2E01`
Limón	`lemon`	`#FFE38A`	`#4B3B01`
Menta	`mint`	`#8BE3B6`	`#014A2F`
Coral	`coral`	`#FF9B9B`	`#9C0226`

En modo oscuro, el color de texto es el propio pastel.

Negro, blanco y grises

Los mismos grises que ya usa el framework, en una escala como la de Bootstrap. Se usan con las mismas clases que los pastel.

Color	Valor	Texto sobre el color sólido
`white`	`#ffffff`	negro
`gray-100`	`#f5f5f7`	negro
`gray-200`	`#e8e8ed`	negro
`gray-300`	`#d2d2d7`	negro
`gray-400`	`#aeaeb2`	negro
`gray-500`	`#8e8e93`	negro
`gray-600`	`#636366`	blanco
`gray-700`	`#48484a`	blanco
`gray-800`	`#3a3a3c`	blanco
`gray-900`	`#1d1d1f`	blanco
`black`	`#000000`	blanco

Escalas

Cada color tiene 13 tonos, del 025 (casi blanco) al 975 (casi negro), calculados a partir de su pastel: el mismo matiz con distinta luminosidad. El tono marcado con ★ pastel es el pastel y Aa texto, el tono de texto en modo claro. Debajo de cada tono, su contraste sobre blanco (□) y sobre negro (■): a partir de 4,5 sirve para texto.

Son variables CSS, como los colores de Bootstrap: var(--gm-sky-500), var(--gm-coral-800), var(--gm-gray-050)… No hay una clase para cada tono, para que el archivo no crezca.

Celeste --gm-sky-…

025#eefeff□ 1,0 · ■ 20,3

050#ddfcff□ 1,1 · ■ 19,4

100#b8f9ff□ 1,2 · ■ 18,0

200#70f1fd□ 1,3 · ■ 15,7

300#5cdfeb□ 1,6 · ■ 13,2★ pastel

400#3dc6d2□ 2,1 · ■ 10,2

500#09acb8□ 2,8 · ■ 7,6

600#0a919b□ 3,8 · ■ 5,5

700#20747b□ 5,5 · ■ 3,8

800#045e65□ 7,5 · ■ 2,8

900#02464b□ 10,6 · ■ 2,0Aa texto

950#013236□ 13,9 · ■ 1,5

975#012225□ 16,7 · ■ 1,3

Azul --gm-blue-…

025#f7faff□ 1,0 · ■ 20,1

050#f0f5fe□ 1,1 · ■ 19,2

100#e1ecff□ 1,2 · ■ 17,6

200#c8dcff□ 1,4 · ■ 15,1

300#a9c8ff□ 1,7 · ■ 12,4

400#8ab4ff□ 2,1 · ■ 10,1★ pastel

500#5b95ff□ 2,9 · ■ 7,2

600#3979f1□ 4,1 · ■ 5,2

700#1f61d7□ 5,6 · ■ 3,7

800#0c48b4□ 8,1 · ■ 2,6

900#003290□ 11,3 · ■ 1,9Aa texto

950#00236b□ 14,5 · ■ 1,5

975#00164d□ 17,2 · ■ 1,2

Lavanda --gm-lavender-…

025#faf9fe□ 1,0 · ■ 20,0

050#f5f3fe□ 1,1 · ■ 19,1

100#ece8fe□ 1,2 · ■ 17,5

200#dcd4ff□ 1,4 · ■ 14,9

300#cabcff□ 1,7 · ■ 12,1

400#b9a3ff□ 2,2 · ■ 9,7★ pastel

500#a17bff□ 3,1 · ■ 6,8

600#8d57f6□ 4,4 · ■ 4,8

700#6d47e5□ 5,7 · ■ 3,7

800#5f23b8□ 8,7 · ■ 2,4Aa texto

900#490795□ 12,0 · ■ 1,7

950#350170□ 15,1 · ■ 1,4

975#240051□ 17,6 · ■ 1,2

Rosa --gm-pink-…

025#fff8fb□ 1,0 · ■ 20,1

050#fef1f7□ 1,1 · ■ 19,1

100#ffe2ef□ 1,2 · ■ 17,4

200#ffc9e1□ 1,4 · ■ 14,7

300#ffa6d1□ 1,8 · ■ 11,6★ pastel

400#ff7ec1□ 2,3 · ■ 9,0

500#f054ab□ 3,2 · ■ 6,6

600#d33892□ 4,4 · ■ 4,8

700#c71c6f□ 5,5 · ■ 3,8

800#940061□ 8,6 · ■ 2,4Aa texto

900#700148□ 11,8 · ■ 1,8

950#520034□ 14,9 · ■ 1,4

975#3a0023□ 17,4 · ■ 1,2

Melocotón --gm-peach-…

025#fff9f5□ 1,0 · ■ 20,1

050#fff2eb□ 1,1 · ■ 19,2

100#ffe6d6□ 1,2 · ■ 17,5

200#ffd0b1□ 1,4 · ■ 14,9

300#ffb98a□ 1,7 · ■ 12,6★ pastel

400#f1995b□ 2,2 · ■ 9,4

500#d58041□ 3,0 · ■ 7,0

600#bb6826□ 4,1 · ■ 5,1

700#a75118□ 5,5 · ■ 3,8

800#7f3f00□ 8,0 · ■ 2,6

900#5f2e01□ 11,2 · ■ 1,9Aa texto

950#452001□ 14,4 · ■ 1,5

975#311400□ 17,1 · ■ 1,2

Limón --gm-lemon-…

025#fffae9□ 1,0 · ■ 20,1

050#fff5d5□ 1,1 · ■ 19,3

100#ffe38a□ 1,3 · ■ 16,6★ pastel

200#f5d980□ 1,4 · ■ 15,1

300#e1c56d□ 1,7 · ■ 12,4

400#caaf56□ 2,1 · ■ 9,8

500#b1963c□ 2,9 · ■ 7,3

600#987e1d□ 3,9 · ■ 5,3

700#856a13□ 5,2 · ■ 4,1

800#645004□ 7,8 · ■ 2,7

900#4b3b01□ 10,9 · ■ 1,9Aa texto

950#362a00□ 14,1 · ■ 1,5

975#251c00□ 16,9 · ■ 1,2

Menta --gm-mint-…

025#eefff5□ 1,0 · ■ 20,3

050#dcffeb□ 1,1 · ■ 19,5

100#b2ffd6□ 1,2 · ■ 18,2

200#99f1c3□ 1,3 · ■ 15,7

300#8be3b6□ 1,5 · ■ 13,8★ pastel

400#6fc69b□ 2,1 · ■ 10,2

500#55ad82□ 2,7 · ■ 7,7

600#3a946b□ 3,7 · ■ 5,6

700#2c7851□ 5,4 · ■ 3,9

800#006340□ 7,3 · ■ 2,9

900#014a2f□ 10,4 · ■ 2,0Aa texto

950#013520□ 13,7 · ■ 1,5

975#002415□ 16,6 · ■ 1,3

Coral --gm-coral-…

025#fff8f8□ 1,0 · ■ 20,0

050#fef2f1□ 1,1 · ■ 19,2

100#ffe4e3□ 1,2 · ■ 17,5

200#ffcccb□ 1,4 · ■ 14,8

300#ffafae□ 1,8 · ■ 12,0

400#ff9b9b□ 2,0 · ■ 10,4★ pastel

500#fe5361□ 3,2 · ■ 6,6

600#e03549□ 4,4 · ■ 4,8

700#cb1d1d□ 5,6 · ■ 3,7

800#9c0226□ 8,6 · ■ 2,5Aa texto

900#76021b□ 11,7 · ■ 1,8

950#580011□ 14,8 · ■ 1,4

975#3e0009□ 17,4 · ■ 1,2

Gris --gm-gray-…

025#fbfbfd□ 1,0 · ■ 20,3

050#f9f9fb□ 1,1 · ■ 20,0

100#f5f5f7□ 1,1 · ■ 19,3

200#e8e8ed□ 1,2 · ■ 17,2

300#d2d2d7□ 1,5 · ■ 13,9

400#aeaeb2□ 2,2 · ■ 9,5

500#8e8e93□ 3,3 · ■ 6,4

600#636366□ 6,0 · ■ 3,5

700#48484a□ 9,1 · ■ 2,3

800#3a3a3c□ 11,3 · ■ 1,9

900#1d1d1f□ 16,8 · ■ 1,2

950#111112□ 18,9 · ■ 1,1

975#0a0a0a□ 19,8 · ■ 1,1

Cómo usarlos

Cada color se usa con estas clases:

Color de texto: el texto en un color, con .gm-text-sky.
Fondo: un fondo sólido, con .gm-bg-sky.
Modo claro y oscuro: modo claro u oscuro en una parte de la página, con data-theme.
Tema: sólido, vidriado o texto de una vez, con .gm-theme-sky y .gm-theme-solid, .gm-theme-glass o .gm-theme-text.

Variables CSS

Cada color tiene tres variables para usarlo en tu propio CSS:

css

--gm-sky: #5cdfeb;          /* el pastel */
--gm-sky-rgb: 92 223 235;   /* el mismo color en canales RGB, para darle transparencia */
--gm-sky-text: #20747b;     /* el tono de texto (en oscuro, el propio pastel) */

Los valores del vidriado también son variables: --gm-glass-alpha, --gm-glass-border-alpha, --gm-glass-radius, --gm-glass-blur y --gm-glass-shadow.

Accesibilidad

Uso	Contraste	Nivel
Texto negro sobre el color sólido	de 7,8:1 a 13,3:1	AAA
Texto sobre el vidriado (claro y oscuro)	unos 14:1	AAA
Texto de color, modo oscuro	de 9,7:1 a 16,6:1	AAA
Texto de color, modo claro (tonos 800 y 900)	7:1 o más	AAA
Texto sobre los grises (sólido)	7:1 o más, salvo `gray-500` (5,2:1) y `gray-600` (6:1)	AAA (esos dos, AA)
Texto gris (`.gm-theme-text`)	7:1 o más	AAA

Nunca texto blanco sobre el pastel sólido: se queda por debajo de 2,2:1.
El borde del vidriado es suave. Las tarjetas, avisos y botones con texto no necesitan más, pero los controles de formulario que se reconocen por su contorno (campos, casillas, interruptores) usan el borde gris del framework, que llega a 3:1.
No indiques un estado solo con el color: éxito, aviso y error llevan siempre un icono o un texto.
El vidriado deja ver el fondo. Sobre una foto o colores fuertes, mide el contraste del texto en el sitio donde lo uses.