What are the hex codes in the Emerald City palette?

The Emerald City color palette consists of Evergreen #004B23, Forest #007200, Kelly Green #38B000, Chartreuse #9EF01A.

How should I use the Emerald City palette on a website?

Use Chartreuse #9EF01A as the background, Evergreen #004B23 for text, Forest #007200 for buttons and links, and Kelly Green #38B000 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Chartreuse at 7.35:1.

Which colors in Emerald City have enough contrast for text?

The highest-contrast pair is #004B23 on #9EF01A with a ratio of 7.35:1, which passes WCAG AA for normal text.

#004B23Evergreen

#007200Forest

#38B000Kelly Green

#9EF01AChartreuse

Emerald City color palette

Forest Vibrant Neon Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Evergreen	`#004B23`	`rgb(0, 75, 35)`	`hsl(148, 100%, 15%)`	`oklch(36.2% 0.095 152)`
Forest	`#007200`	`rgb(0, 114, 0)`	`hsl(120, 100%, 22%)`	`oklch(47.8% 0.163 142)`
Kelly Green	`#38B000`	`rgb(56, 176, 0)`	`hsl(101, 100%, 35%)`	`oklch(66.4% 0.213 140)`
Chartreuse	`#9EF01A`	`rgb(158, 240, 26)`	`hsl(83, 88%, 52%)`	`oklch(86.9% 0.231 130)`

Why it works and how to use it

Emerald City is a vivid dark, analogous color palette tagged forest, vibrant, neon. The hues stay within 65° of each other on the color wheel, which is why the palette feels cohesive rather than busy. These are bold, punchy colors that need generous white space around them.

With 4 chromatic colors, Forest takes the lead while the rest support. Lightness runs from 15% to 52%. Well suited to dark-mode interfaces and gaming.

Background: Chartreuse (#9EF01A) is the lightest color, so it belongs on large surfaces.
Text: Evergreen (#004B23) on #9EF01A gives 7.35:1, passing WCAG AAA.
Primary: Forest (#007200) is the most saturated mid-tone; use it for buttons and links (4.38:1 against the background, fine for UI elements).
Accent: Kelly Green (#38B000) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Chartreuse at 7.35:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Emerald City

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#004B23

#007200

#38B000

#9EF01A

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#004B23` on `#9EF01A`	Aa	7.35:1	AAA
`#007200` on `#9EF01A`	Aa	4.38:1	AA large only
`#004B23` on `#38B000`	Aa	3.63:1	AA large only
`#007200` on `#38B000`	Aa	2.17:1	Fail
`#38B000` on `#9EF01A`	Aa	2.02:1	Fail
`#004B23` on `#007200`	Aa	1.68:1	Fail

:root {
  --evergreen: #004B23;
  --forest: #007200;
  --kelly-green: #38B000;
  --chartreuse: #9EF01A;
}

$evergreen: #004B23;
$forest: #007200;
$kelly-green: #38B000;
$chartreuse: #9EF01A;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'evergreen': '#004B23',
        'forest': '#007200',
        'kelly-green': '#38B000',
        'chartreuse': '#9EF01A',
      },
    },
  },
};

{
  "name": "Emerald City",
  "colors": [
    "#004B23",
    "#007200",
    "#38B000",
    "#9EF01A"
  ]
}

background: linear-gradient(135deg, #004B23, #007200, #38B000, #9EF01A);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-03-07 · Free for commercial use, no attribution needed.

Similar palettes 25 more in this mood