Summer Color Palette

Pool cyan, sun yellow, watermelon red and blinding white — the brightness of the season. Anchors: #00B4D8, #FFD166, #F25C54, #F8F9FA.

summerbrightsun
#00B4D8
#FFD166
#F25C54
#F8F9FA
#AEDDEE
#00b4d8 #ffd166 #f25c54 #f8f9fa #aeddee
#00B4D8 #FFD166 #F25C54 #F8F9FA #AEDDEE

Semantic roles

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

background#F8F9FA
surface#FFD166
text#F25C54
text-muted#00B4D8
primary#00B4D8
secondary#FFD166
accent#AEDDEE

CSS variables 

:root {
  --background: #f8f9fa;
  --surface: #ffd166;
  --text: #f25c54;
  --text-muted: #00b4d8;
  --primary: #00b4d8;
  --secondary: #ffd166;
  --accent: #aeddee;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#00B4D8#FFD166#F25C54#F8F9FA#AEDDEE
#00B4D8
1.0
1.7
1.3
2.3
1.7
#FFD166
1.7
1.0
2.3
1.4
1.0
#F25C54
1.3
2.3
1.0
3.1
2.2
#F8F9FA
2.3
1.4
3.1
1.0
1.4
#AEDDEE
1.7
1.0
2.2
1.4
1.0

Under deuteranopia

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

Colors in this palette

#00B4D8
rgb(0, 180, 216)
#FFD166
rgb(255, 209, 102)
#F25C54
rgb(242, 92, 84)
#F8F9FA
rgb(248, 249, 250)
#AEDDEE
rgb(174, 221, 238)

Similar palettes

Amber Color Palette
Travel Color Palette
Branding Color Palette

FAQ

How do I use the summer color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #00B4D8, #FFD166, #F25C54, #F8F9FA, #AEDDEE.

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.