Vibrant Color Palette

High-saturation hues spread across the wheel — maximum energy for sports, gaming and youth brands. Palette anchors: #FF004C, #FF8C00, #FFD700.

vibrantbold
#FF004C
#FF8C00
#FFD700
#00E07F
#00AAFF
#ff004c #ff8c00 #ffd700 #00e07f #00aaff
#FF004C #FF8C00 #FFD700 #00E07F #00AAFF

Semantic roles

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

background#FFD700
surface#00E07F
text#FF004C
text-muted#00AAFF
primary#FF8C00
secondary#00E07F
accent#00AAFF

CSS variables 

:root {
  --background: #ffd700;
  --surface: #00e07f;
  --text: #ff004c;
  --text-muted: #00aaff;
  --primary: #ff8c00;
  --secondary: #00e07f;
  --accent: #00aaff;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#FF004C#FF8C00#FFD700#00E07F#00AAFF
#FF004C
1.0
1.7
2.8
2.2
1.5
#FF8C00
1.7
1.0
1.7
1.3
1.1
#FFD700
2.8
1.7
1.0
1.3
1.8
#00E07F
2.2
1.3
1.3
1.0
1.5
#00AAFF
1.5
1.1
1.8
1.5
1.0

Under deuteranopia

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

Colors in this palette

#FF004C
rgb(255, 0, 76)
#FF8C00
Darkorange
#FFD700
Gold
#00E07F
rgb(0, 224, 127)
#00AAFF
rgb(0, 170, 255)

Similar palettes

Social Media Color Palette
Magenta Color Palette
Hot Pink Color Palette

FAQ

How do I use the vibrant color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #FF004C, #FF8C00, #FFD700, #00E07F, #00AAFF.

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.