Beach Color Palette

Shallow-water teal, sky blue, warm sand and foam — layered like the shoreline itself. Anchors: #0E7490, #7DD3FC, #FDE68A, #FEF3C7.

beachcoastaltropical
#0E7490
#7DD3FC
#FDE68A
#FEF3C7
#A0BECC
#0e7490 #7dd3fc #fde68a #fef3c7 #a0becc
#0E7490 #7DD3FC #FDE68A #FEF3C7 #A0BECC

Semantic roles

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

background#FEF3C7
surface#FDE68A
text#0E7490
text-muted#A0BECC
primary#7DD3FC
secondary#FDE68A
accent#A0BECC

CSS variables 

:root {
  --background: #fef3c7;
  --surface: #fde68a;
  --text: #0e7490;
  --text-muted: #a0becc;
  --primary: #7dd3fc;
  --secondary: #fde68a;
  --accent: #a0becc;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#0E7490#7DD3FC#FDE68A#FEF3C7#A0BECC
#0E7490
1.0
3.2
4.3
4.8
2.7
#7DD3FC
3.2
1.0
1.3
1.5
1.2
#FDE68A
4.3
1.3
1.0
1.1
1.6
#FEF3C7
4.8
1.5
1.1
1.0
1.8
#A0BECC
2.7
1.2
1.6
1.8
1.0

Under deuteranopia

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

Colors in this palette

#0E7490
rgb(14, 116, 144)
#7DD3FC
rgb(125, 211, 252)
#FDE68A
rgb(253, 230, 138)
#FEF3C7
rgb(254, 243, 199)
#A0BECC
rgb(160, 190, 204)

Similar palettes

Coral Color Palette
Garden Color Palette
Easter Color Palette

FAQ

How do I use the beach color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #0E7490, #7DD3FC, #FDE68A, #FEF3C7, #A0BECC.

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.