Emerald City color palette
Pure green and nothing else, stepped from a deep emerald, #004D00, up to a glowing #00FF00, like the walls of Oz. All five are fully saturated with no yellow or blue lean, so the effect is theatrical and bold. It pops on black or white but can tire the eyes in large areas. St. Patrick's Day promos and fantasy games are the obvious places to use it.
Emerald City palette in use
Use #004D00 as a dark background with #00FF00 for headings and #00CC00 for buttons. On white, switch text to #007700, and keep #009900 for icons and borders.
This pair measures 7.42:1, so it works for body text too. The button uses #00CC00 with black text.
ButtonGood for
- St. Patrick's Day promo
- Fantasy game UI
- Eco campaign poster
- Green-screen guide
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 |
|---|---|---|---|
#004D00 | #00FF00 | 7.42:1 | AAA |
#004D00 | #00CC00 | 4.67:1 | AA |
#007700 | #00FF00 | 4.20:1 | AA large |
Emerald City palette as code
CSS variables
:root {
--emerald-city-1: #004D00;
--emerald-city-2: #007700;
--emerald-city-3: #009900;
--emerald-city-4: #00CC00;
--emerald-city-5: #00FF00;
}Tailwind v4
@theme {
--color-emerald-city-1: #004D00;
--color-emerald-city-2: #007700;
--color-emerald-city-3: #009900;
--color-emerald-city-4: #00CC00;
--color-emerald-city-5: #00FF00;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'emerald-city': {
100: '#004D00',
200: '#007700',
300: '#009900',
400: '#00CC00',
500: '#00FF00',
},SCSS
$emerald-city-1: #004D00;
$emerald-city-2: #007700;
$emerald-city-3: #009900;
$emerald-city-4: #00CC00;
$emerald-city-5: #00FF00;JSON
["#004D00","#007700","#009900","#00CC00","#00FF00"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.