Midnight Forest color palette
This green ramp starts at #1B4332, close to black, and climbs to a soft jade at #74C69D. There's no pale tint anywhere, so the palette keeps a nighttime, after-the-campfire mood. The greens share one hue, which makes layering easy: each step up reads as a raised surface. It makes a good dark theme for a hiking app, a craft brewery, an outdoor podcast or a dispensary that wants to look grown up.
Midnight Forest palette in use
Build the app on a #1B4332 background and set text and icons in #74C69D. #2D6A4F fits cards and panels, with #52B788 for buttons and active states.
This pair measures 5.43:1, so it works for body text too. The button uses #52B788 with black text.
ButtonGood for
- Hiking app dark theme
- Craft brewery label
- Outdoor podcast cover
- Dispensary website
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#1B4332 | #74C69D | 5.43:1 | AA |
#1B4332 | #52B788 | 4.47:1 | AA large |
#2D6A4F | #74C69D | 3.13:1 | AA large |
Midnight Forest palette as code
CSS variables
:root {
--midnight-forest-1: #1B4332;
--midnight-forest-2: #2D6A4F;
--midnight-forest-3: #40916C;
--midnight-forest-4: #52B788;
--midnight-forest-5: #74C69D;
}Tailwind v4
@theme {
--color-midnight-forest-1: #1B4332;
--color-midnight-forest-2: #2D6A4F;
--color-midnight-forest-3: #40916C;
--color-midnight-forest-4: #52B788;
--color-midnight-forest-5: #74C69D;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'midnight-forest': {
100: '#1B4332',
200: '#2D6A4F',
300: '#40916C',
400: '#52B788',
500: '#74C69D',
},SCSS
$midnight-forest-1: #1B4332;
$midnight-forest-2: #2D6A4F;
$midnight-forest-3: #40916C;
$midnight-forest-4: #52B788;
$midnight-forest-5: #74C69D;JSON
["#1B4332","#2D6A4F","#40916C","#52B788","#74C69D"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.