Fitness Color Palette

Near-black ground with electric cyan and lime signals — high-energy, high-legibility gym branding. Anchors: #111827, #22D3EE, #A3E635.

fitnesssportenergy
#111827
#22D3EE
#A3E635
#8B8D96
#2F8A9E
#111827 #22d3ee #a3e635 #8b8d96 #2f8a9e
#111827 #22D3EE #A3E635 #8B8D96 #2F8A9E

Semantic roles

Assigned deterministically: lightest = background, darkest = text, most saturated = primary.

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

CSS variables 

:root {
  --background: #a3e635;
  --surface: #22d3ee;
  --text: #111827;
  --text-muted: #2f8a9e;
  --primary: #22d3ee;
  --secondary: #8b8d96;
  --accent: #2f8a9e;
}
Preview in UIs →

Accessibility matrix

Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).

Text \ BG#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

Under deuteranopia

Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.

Colors in this palette

#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)

Similar palettes

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

FAQ

How do I use the fitness color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #111827, #22D3EE, #A3E635, #8B8D96, #2F8A9E.

Do these colors pass accessibility checks?

See the WCAG matrix on this page: every text-on-background pairing with ratio ≥ 4.5 passes AA for normal text; ≥ 3 passes AA for large text and UI components.