Ramadan Color Palette

Deep emerald, night green, lantern gold and moonlit cream — the traditional palette of Ramadan decoration and greeting cards. Anchors: #0B3D2E, #14532D, #C9A227, #F8F5EF.

ramadanislamicevent
#0B3D2E
#14532D
#C9A227
#F8F5EF
#8DA39A
#0b3d2e #14532d #c9a227 #f8f5ef #8da39a
#0B3D2E #14532D #C9A227 #F8F5EF #8DA39A

Semantic roles

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

background#F8F5EF
surface#C9A227
text#0B3D2E
text-muted#14532D
primary#C9A227
secondary#14532D
accent#8DA39A

CSS variables 

:root {
  --background: #f8f5ef;
  --surface: #c9a227;
  --text: #0b3d2e;
  --text-muted: #14532d;
  --primary: #c9a227;
  --secondary: #14532d;
  --accent: #8da39a;
}
Preview in UIs →

Accessibility matrix

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

Text \ BG#0B3D2E#14532D#C9A227#F8F5EF#8DA39A
#0B3D2E
1.0
1.3
5.0
11.2
4.5
#14532D
1.3
1.0
3.8
8.4
3.4
#C9A227
5.0
3.8
1.0
2.2
1.1
#F8F5EF
11.2
8.4
2.2
1.0
2.5
#8DA39A
4.5
3.4
1.1
2.5
1.0

Under deuteranopia

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

Colors in this palette

#0B3D2E
rgb(11, 61, 46)
#14532D
rgb(20, 83, 45)
#C9A227
rgb(201, 162, 39)
#F8F5EF
rgb(248, 245, 239)
#8DA39A
rgb(141, 163, 154)

Similar palettes

Eid Color Palette
Luxury Color Palette
Hotel Color Palette

FAQ

How do I use the ramadan color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #0B3D2E, #14532D, #C9A227, #F8F5EF, #8DA39A.

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.