Back to palettes

Palette

Emerald Gemstone Vein

A luxurious collection of greens reflecting the rich, varied facets of natural emeralds.

vibrantelegant5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Emerald Gemstone Vein 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 Gemstone Vein.

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

Data visualization

#006400#228B22#3CB371#6B8E23#8FBC8F

Palette guide

How to use Emerald Gemstone Vein

Overview

The Emerald Gemstone Vein palette presents a rich tapestry of greens, reminiscent of precious minerals embedded in nature. This collection ranges from the deep, forest-like #006400 and vibrant #228B22, to the refreshing #3CB371 and earthy olive of #6B8E23. A lighter, more muted tone like #8FBC8F provides a gentle contrast, allowing for diverse applications. Ideal for projects that aim to convey natural luxury, organic growth, or sophisticated earthiness, this palette is perfect for high-end eco-friendly brands, botanical designs, or elegant web interfaces. Its varied green spectrum offers depth and visual interest, making it highly adaptable for both vibrant accents and serene background elements.

Best used for

  • Organic food branding
  • Sustainable luxury product design
  • Botanical garden websites
  • Nature-themed interior design concepts
  • Eco-conscious app interfaces
  • Jewelry and gemstone marketing

Suggested color roles

primary

Use #006400 as a deep, grounding base for headers, strong branding elements, or primary UI.

secondary

Employ #228B22 as a vibrant, supportive green for subheadings, active states, or secondary graphics.

accent

Apply #3CB371 as a bright, fresh highlight for calls-to-action, alerts, or key information.

background

Utilize #8FBC8F as a soft, natural background for content areas, providing a calm and earthy base.

text

Pair #006400 with light backgrounds for excellent readability, or use white text on darker palette colors.

Accessibility notes

  • Ensure #8FBC8F provides enough contrast with lighter text; consider darker shades for smaller fonts.
  • Pair #006400 or #228B22 with white text for optimal legibility on dark backgrounds.
  • Avoid using #6B8E23 directly on #8FBC8F for body text without checking contrast ratios.
  • All text and background color combinations should be tested for WCAG AA compliance.

Recommended combinations

Deep Forest

Creates a robust, natural feel for rugged outdoor brands or environmental websites.

#006400 · #228B22 · #6B8E23

Fresh Growth

Ideal for conveying freshness and vitality in health, wellness, or organic product designs.

#3CB371 · #8FBC8F · #006400

Earthy Elegance

Suited for sophisticated branding that leans into natural, understated luxury.

#6B8E23 · #8FBC8F · #228B22

CSS variables

:root {
  --emerald-gemstone-vein-1: #006400;
  --emerald-gemstone-vein-2: #228B22;
  --emerald-gemstone-vein-3: #3CB371;
  --emerald-gemstone-vein-4: #6B8E23;
  --emerald-gemstone-vein-5: #8FBC8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-gemstone-vein": {
        1: "#006400",
        2: "#228B22",
        3: "#3CB371",
        4: "#6B8E23",
        5: "#8FBC8F",
      }
    }
  }
}

Related searches

natural emerald green colorsearthy gemstone paletteorganic green brandingdeep forest green schemerich natural greens

Palette colors

Hex values

Color 1#006400
·
Color 2#228B22
·
Color 3#3CB371
·
Color 4#6B8E23
·
Color 5#8FBC8F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
2:1Fail
3.5:1AA18
2
1.7:1Fail
1.6:1Fail
1.2:1Fail
2:1Fail
3
2.8:1Fail
1.6:1Fail
1.4:1Fail
1.2:1Fail
4
2:1Fail
1.2:1Fail
1.4:1Fail
1.8:1Fail
5
3.5:1AA18
2:1Fail
1.2:1Fail
1.8:1Fail

Similar palettes

More like Emerald Gemstone Vein

View all vibrant
Regal Emerald Bloom
Amethyst Aura
Art Deco Emerald Pool
Emerald City Glaze
Emerald City Gleam
Emerald City Gleam