Back to palettes

Palette

Emerald City Lights

Illuminates a fantastical urban landscape with brilliant greens and a touch of enchanting blue-green glow.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Emerald City Lights reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Emerald City Lights.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#006400#228B22#3CB371#90EE90#ADD8E6

Palette guide

How to use Emerald City Lights

Overview

The Emerald City Lights palette (ID: emerald-city-lights) illuminates designs with a captivating blend of lush greens and a serene blue-green glow. It features the deep forest green of #006400, the vibrant #228B22, and the lively #3CB371, creating a natural yet energetic spectrum. The lighter #90EE90 adds a fresh touch, while #ADD8E6 introduces a tranquil, sky-like blue. This palette is excellent for projects aiming for a magical, bright, and inviting aesthetic, from nature-inspired branding to cheerful digital interfaces and illustrations that evoke a sense of wonder and energetic calm with its distinct color harmony.

Best used for

  • Nature-inspired branding and packaging
  • Children's book illustrations and app design
  • Eco-friendly product websites
  • Outdoor adventure and tourism marketing
  • Event decor for garden parties or spring events
  • Digital art with fantastical landscapes

Suggested color roles

primary

Use #006400 for dominant elements, headers, or backgrounds to establish a strong, natural foundation.

secondary

Employ #228B22 or #3CB371 for supporting graphics, subheadings, or interactive elements, adding vibrancy.

accent

Apply #ADD8E6 for subtle highlights, decorative patterns, or background accents to introduce a serene, magical glow.

background

Utilize #90EE90 for clean, light backgrounds that allow darker greens to pop, or a very light grey for neutrality.

text

For body text, use a deep charcoal. For headlines on lighter backgrounds, #006400 or #228B22 provides excellent readability. Use white for text on #006400.

Accessibility notes

  • Ensure #006400 or #228B22 text on #90EE90 or #ADD8E6 has sufficient contrast.
  • Avoid using #ADD8E6 for small text on light backgrounds; it's best for accents or larger display text.
  • The lighter greens #90EE90 and #ADD8E6 will require dark text for readability.
  • Pair #006400 with #90EE90 for strong contrast in key areas.

Recommended combinations

Forest Glow

Ideal for nature-focused branding, website hero sections, or illustrations that convey depth and natural light.

#006400 · #3CB371 · #90EE90

Skyline Serenity

Perfect for creating airy, calming UI elements, background gradients, or decorative patterns in digital design.

#228B22 · #ADD8E6 · #90EE90

Vibrant Energy

Use for impactful call-to-action buttons, key highlights, or sections that need to feel both grounding and uplifting.

#006400 · #ADD8E6 · #228B22

CSS variables

:root {
  --emerald-city-lights-1: #006400;
  --emerald-city-lights-2: #228B22;
  --emerald-city-lights-3: #3CB371;
  --emerald-city-lights-4: #90EE90;
  --emerald-city-lights-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-city-lights": {
        1: "#006400",
        2: "#228B22",
        3: "#3CB371",
        4: "#90EE90",
        5: "#ADD8E6",
      }
    }
  }
}

Related searches

emerald green blue palettemagical city lights colorsvibrant forest greenbright natural color schemeenergetic green branding

Palette colors

Hex values

Color 1#006400
·
Color 2#228B22
·
Color 3#3CB371
·
Color 4#90EE90
·
Color 5#ADD8E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
5.2:1AA
4.9:1AA
2
1.7:1Fail
1.6:1Fail
3.1:1AA18
2.9:1Fail
3
2.8:1Fail
1.6:1Fail
1.9:1Fail
1.7:1Fail
4
5.2:1AA
3.1:1AA18
1.9:1Fail
1.1:1Fail
5
4.9:1AA
2.9:1Fail
1.7:1Fail
1.1:1Fail

Similar palettes

More like Emerald City Lights

View all vibrant
Aurora Veil Lights
City Neon Pulse
Cyber Glow Spectrum
Cyberpunk Alley Light
Cyberpunk Alley Neon
Digital Circuit Flow