Palette

Emerald Peak Summit

Reaches for the pristine, cool greens of a towering emerald mountain peak under a clear sky.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Emerald Peak Summit 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 Peak Summit.

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

Data visualization

#004B49#007B7A#00A9A8#00D7D6#30FFFF

Palette guide

How to use Emerald Peak Summit

Overview

The Emerald Peak Summit palette reaches for the pristine, cool greens and vibrant teals of a towering mountain peak under a clear sky. From the profound depth of #004B49 and #007B7A, it transitions through the balanced #00A9A8 to the bright #00D7D6, culminating in the luminous #30FFFF. This collection is perfect for designs seeking to convey freshness, aspiration, and a connection to untouched natural heights. Ideal for outdoor adventure brands, tech innovation, or any digital interface that benefits from a clean, modern, and invigorating aesthetic. The progressive lightness of the shades creates a dynamic visual hierarchy, offering a sense of clarity and boundless possibility.

Best used for

Outdoor adventure and hiking brands
Tech and innovation company branding
Environmental conservation initiatives
Mountain resort and tourism marketing
Clean energy and sustainability projects
Modern, minimalist UI/UX designs

Suggested color roles

primary

Use #004B49 as the deepest, most stable color for main headers, branding, or dark mode.

secondary

Employ #007B7A as a supportive deep teal for subheadings, important text, or active states.

accent

Apply #30FFFF as the brightest, most luminous highlight for calls-to-action, alerts, or key features.

background

Utilize #00D7D6 as a light, refreshing background for content areas, providing energy and clarity.

text

Pair #004B49 with light backgrounds for strong contrast, or use white/light gray on darker backgrounds.

Accessibility notes

#30FFFF and #00D7D6 require very dark text (e.g., #004B49 or black) to ensure readability.
Ensure sufficient contrast when using #00A9A8 as a background for text, especially for smaller fonts.
Avoid using #007B7A directly on #00A9A8 for small text due to similar luminosity.
Always verify WCAG AA contrast standards for all text and background combinations.

Recommended combinations

Peak Depths

Creates a strong, immersive foundation for primary branding or elegant dark mode interfaces.

#004B49 · #007B7A · #00A9A8

Summit Glow

Ideal for bright, inviting calls-to-action and clear content against a luminous background.

#30FFFF · #00D7D6 · #004B49

Clear Horizon

Suitable for interactive elements, progress bars, or illustrating clarity and progress.

#00A9A8 · #00D7D6 · #007B7A

CSS variables

:root {
  --emerald-peak-summit-1: #004B49;
  --emerald-peak-summit-2: #007B7A;
  --emerald-peak-summit-3: #00A9A8;
  --emerald-peak-summit-4: #00D7D6;
  --emerald-peak-summit-5: #30FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-peak-summit": {
        1: "#004B49",
        2: "#007B7A",
        3: "#00A9A8",
        4: "#00D7D6",
        5: "#30FFFF",
      }
    }
  }
}

Hex values

Color 1#004B49

Color 2#007B7A

Color 3#00A9A8

Color 4#00D7D6

Color 5#30FFFF

Accessibility

Contrast checker

2:1Fail

3.4:1AA18

5.6:1AA

8:1AAA

2:1Fail

1.8:1Fail

2.8:1Fail

4.1:1AA18

3.4:1AA18

1.8:1Fail

1.6:1Fail

2.3:1Fail

5.6:1AA

2.8:1Fail

1.6:1Fail

1.4:1Fail

8:1AAA

4.1:1AA18

2.3:1Fail

1.4:1Fail

Similar palettes

More like Emerald Peak Summit

View all cool

Dewdrop Emerald Vine

Emerald Grove Sanctuary