Paleta Fitness Color Palette

Base casi negra con señales cian eléctrico y lima: marca de gimnasio de alta energía y alta legibilidad. Anclas: #111827, #22D3EE, #A3E635.

fitnessdeporteenergía
#111827
#22D3EE
#A3E635
#8B8D96
#2F8A9E
#111827 #22d3ee #a3e635 #8b8d96 #2f8a9e
#111827 #22D3EE #A3E635 #8B8D96 #2F8A9E

Roles semánticos

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

background#A3E635
surface#22D3EE
text#111827
text-muted#2F8A9E
primary#22D3EE
secondary#8B8D96
accent#2F8A9E

Variables CSS 

:root {
  --background: #a3e635;
  --surface: #22d3ee;
  --text: #111827;
  --text-muted: #2f8a9e;
  --primary: #22d3ee;
  --secondary: #8b8d96;
  --accent: #2f8a9e;
}
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#111827#22D3EE#A3E635#8B8D96#2F8A9E
#111827
1.0
9.8
11.8
5.4
4.4
#22D3EE
9.8
1.0
1.2
1.8
2.2
#A3E635
11.8
1.2
1.0
2.2
2.6
#8B8D96
5.4
1.8
2.2
1.0
1.2
#2F8A9E
4.4
2.2
2.6
1.2
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

#111827
rgb(17, 24, 39)
#22D3EE
rgb(34, 211, 238)
#A3E635
rgb(163, 230, 53)
#8B8D96
rgb(139, 141, 150)
#2F8A9E
rgb(47, 138, 158)

Paletas similares

Mobile App Color Palette
E-commerce Color Palette
Nature Color Palette

Preguntas frecuentes

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

Copia las variables CSS de abajo en :root y usa var(--primary), var(--background), etc. Paleta completa: #111827, #22D3EE, #A3E635, #8B8D96, #2F8A9E.

¿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.

Fitness Color Palette — #111827 #22D3EE #A3E635 #8B8D96 #2F8A9E — Tintiva