Paleta Spring Color Palette

Verdes frescos, rosa de floración y amarillo solar pálido. Luminosos, optimistas y limpios.

primaverafrescosuave
#A8D8B9
#F9C8D5
#FDE8B6
#BFE3F0
#D5E8C4
#a8d8b9 #f9c8d5 #fde8b6 #bfe3f0 #d5e8c4
#A8D8B9 #F9C8D5 #FDE8B6 #BFE3F0 #D5E8C4

Roles semánticos

Asignados de forma determinista: el más claro = fondo, el más oscuro = texto, el más saturado = primario.

background#FDE8B6
surface#D5E8C4
text#A8D8B9
text-muted#F9C8D5
primary#BFE3F0
secondary#F9C8D5
accent#D5E8C4

Variables CSS 

:root {
  --background: #fde8b6;
  --surface: #d5e8c4;
  --text: #a8d8b9;
  --text-muted: #f9c8d5;
  --primary: #bfe3f0;
  --secondary: #f9c8d5;
  --accent: #d5e8c4;
}
Vista previa en interfaces →

Matriz de accesibilidad

Color del texto (filas) sobre el fondo (columnas). Verde = cumple WCAG AA para texto normal (≥4.5:1).

Texto \ Fondo#A8D8B9#F9C8D5#FDE8B6#BFE3F0#D5E8C4
#A8D8B9
1.0
1.1
1.3
1.2
1.2
#F9C8D5
1.1
1.0
1.2
1.1
1.1
#FDE8B6
1.3
1.2
1.0
1.1
1.1
#BFE3F0
1.2
1.1
1.1
1.0
1.1
#D5E8C4
1.2
1.1
1.1
1.1
1.0

Bajo deuteranopía

Simulación de Machado et al. (2009), severidad 1.0 — aproximación, no es una herramienta médica.

Colores de esta paleta

#A8D8B9
rgb(168, 216, 185)
#F9C8D5
rgb(249, 200, 213)
#FDE8B6
rgb(253, 232, 182)
#BFE3F0
rgb(191, 227, 240)
#D5E8C4
rgb(213, 232, 196)

Paletas similares

Pistachio Color Palette
Mint Color Palette
Apricot Color Palette

Preguntas frecuentes

¿Cómo uso la paleta Spring Color Palette en CSS?

Copia las variables CSS de abajo en :root y usa var(--primary), var(--background), etc. Paleta completa: #A8D8B9, #F9C8D5, #FDE8B6, #BFE3F0, #D5E8C4.

¿Estos colores pasan las comprobaciones de accesibilidad?

Consulta la matriz WCAG de esta página: cada combinación texto-sobre-fondo con ratio ≥ 4.5 cumple AA para texto normal; ≥ 3 cumple AA para texto grande y componentes de interfaz.

Spring Color Palette — #A8D8B9 #F9C8D5 #FDE8B6 #BFE3F0 #D5E8C4 — Tintiva