Palette

Peridot Glaze

Bright, fresh greens with a sparkling translucence, like the lively glint of a peridot gem.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Peridot Glaze 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 Peridot Glaze.

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

Data visualization

#5E8A2F#8DBA4D#C2EC77#DFFFAD#4A7024

Palette guide

How to use Peridot Glaze

Overview

The Peridot Glaze palette offers a fresh, vibrant spectrum of greens, perfect for designs aiming to evoke nature, vitality, and growth. Anchored by a deep forest green, #4A7024, it blossoms into a lively mid-tone like #8DBA4D and a bright, almost neon #C2EC77. This palette is ideal for digital interfaces that require an energetic yet organic feel, or for branding that emphasizes eco-friendliness and natural products. The lightest shade, #DFFFAD, provides an excellent highlight, while the rich #5E8A2F offers a solid base, ensuring versatility for various design elements from backgrounds to interactive components. Developers will find these hues easy to pair with neutral grays for balanced interfaces.

Best used for

Eco-friendly brand identity
Nature-themed websites or applications
Health and wellness product packaging
Outdoor adventure gear design
Spring/summer fashion collections
Educational content on botany

Suggested color roles

primary

#5E8A2F - A balanced, natural green for main branding elements and primary call-to-actions, signaling growth and reliability.

secondary

#8DBA4D - A brighter, more inviting green, suitable for secondary buttons, interactive elements, or illustrative details that need to stand out gently.

accent

#C2EC77 - A vibrant, almost electric lime, perfect for urgent notifications, success messages, or small, impactful graphical accents.

background

#DFFFAD - A very light, airy green that serves as a clean, soft background, providing a subtle natural base without overpowering content.

text

#4A7024 - A deep, rich green offering excellent contrast against lighter shades for primary body text, or a dark charcoal for general readability.

Accessibility notes

Ensure sufficient contrast when using #C2EC77 for text on #DFFFAD; consider using a darker green for readability.
The darkest shade, #4A7024, provides excellent contrast for white or very light text.
Avoid using mid-tones like #8DBA4D for large blocks of body text without careful contrast checks.
Utilize #DFFFAD as a background with #4A7024 or #5E8A2F for text to meet WCAG AA standards.

Recommended combinations

Fresh Growth

For bold branding or energetic UI sections, combining deep and bright greens for impact.

#4A7024 · #5E8A2F · #C2EC77

Soft Meadow

Ideal for serene interfaces or natural product packaging, offering gentle contrast and a calm feel.

#DFFFAD · #8DBA4D · #5E8A2F

Dynamic Highlight

Use for interactive elements where #C2EC77 serves as a standout accent on a light background, paired with a solid base.

#5E8A2F · #DFFFAD · #C2EC77

CSS variables

:root {
  --peridot-glaze-1: #5E8A2F;
  --peridot-glaze-2: #8DBA4D;
  --peridot-glaze-3: #C2EC77;
  --peridot-glaze-4: #DFFFAD;
  --peridot-glaze-5: #4A7024;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "peridot-glaze": {
        1: "#5E8A2F",
        2: "#8DBA4D",
        3: "#C2EC77",
        4: "#DFFFAD",
        5: "#4A7024",
      }
    }
  }
}

Hex values

Color 1#5E8A2F

Color 2#8DBA4D

Color 3#C2EC77

Color 4#DFFFAD

Color 5#4A7024

Accessibility

Contrast checker

1.8:1Fail

3:1AA18

3.7:1AA18

1.4:1Fail

1.8:1Fail

1.7:1Fail

2.1:1Fail

2.5:1Fail

3:1AA18

1.7:1Fail

1.2:1Fail

4.3:1AA18

3.7:1AA18

2.1:1Fail

1.2:1Fail

5.2:1AA

1.4:1Fail

2.5:1Fail

4.3:1AA18

5.2:1AA

Similar palettes

More like Peridot Glaze

View all vibrant

Electric Meadow

Botanical Bloom Canopy