Palette

Deep Marine Verdure

A deep dive into vibrant greens, capturing the mysterious beauty of an underwater kelp forest.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Marine Verdure 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 Deep Marine Verdure.

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

Data visualization

#006400#2E8B57#3CB371#66CDAA#20B2AA

Palette guide

How to use Deep Marine Verdure

Overview

The Deep Marine Verdure palette offers a refreshing and organic aesthetic, drawing inspiration from lush underwater kelp forests and serene oceanic depths. This cool-toned collection features a rich dark green, #006400, providing a strong foundation, complemented by the vibrant medium greens #2E8B57 and #3CB371. Lighter, more aquatic greens like #66CDAA and #20B2AA introduce a calming, airy quality. Ideal for projects aiming to evoke nature, tranquility, and growth, this palette is versatile for branding, digital interfaces, and print. Designers and developers can leverage its harmonious blend to create immersive experiences, ensuring a cohesive and visually appealing design that resonates with natural elegance.

Best used for

Eco-friendly product branding and packaging
Nature-themed websites and mobile apps
Wellness and spa marketing materials
Environmental non-profit campaigns
Sustainable fashion or lifestyle blogs
Botanical garden signage and visitor guides

Suggested color roles

primary

#006400 - Use this deep forest green for strong brand anchors, main headings, or substantial UI elements where a sense of stability and depth is desired.

secondary

#2E8B57 - A versatile medium green, excellent for subheadings, prominent buttons, or graphical elements that need to stand out without overpowering the primary.

accent

#3CB371 - This vibrant medium-light green provides a lively pop, perfect for calls-to-action, interactive elements, or small illustrative details that require immediate attention.

background

#66CDAA - A light, calming green that works well for subtle backgrounds, secondary content areas, or card elements to create a soft, natural base.

text

For dark text, consider a very dark gray or black (e.g., #333333) against lighter backgrounds like #66CDAA or #20B2AA. For light text, white (#FFFFFF) can be used against #006400 or #2E8B57 for optimal readability.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using lighter greens like #66CDAA and #20B2AA for backgrounds.
Avoid placing #3CB371 text directly on #2E8B57 backgrounds without checking WCAG AA or AAA compliance.
For interactive elements, use a distinct color like #3CB371 or #2E8B57 against a neutral background to clearly indicate interactivity.
Use a tool to verify contrast ratios for all text and UI elements to meet WCAG standards, particularly for #006400 text on lighter shades.

Recommended combinations

Deep Forest Contrast

Ideal for a strong, authoritative brand presence; #006400 as primary, #66CDAA for backgrounds, and #3CB371 for accents or highlights.

#006400 · #66CDAA · #3CB371

Verdant Serenity

Creates a calming, harmonious feel for digital interfaces; #2E8B57 for main content, #20B2AA for secondary elements, and #006400 for deep accents.

#2E8B57 · #20B2AA · #006400

Lively Aquatic

Great for vibrant, fresh designs; #3CB371 for energetic elements, #66CDAA as a light base, and #2E8B57 for grounding details.

#3CB371 · #66CDAA · #2E8B57

CSS variables

:root {
  --deep-marine-verdure-1: #006400;
  --deep-marine-verdure-2: #2E8B57;
  --deep-marine-verdure-3: #3CB371;
  --deep-marine-verdure-4: #66CDAA;
  --deep-marine-verdure-5: #20B2AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-marine-verdure": {
        1: "#006400",
        2: "#2E8B57",
        3: "#3CB371",
        4: "#66CDAA",
        5: "#20B2AA",
      }
    }
  }
}

Hex values

Color 1#006400

Color 2#2E8B57

Color 3#3CB371

Color 4#66CDAA

Color 5#20B2AA

Accessibility

Contrast checker

1.8:1Fail

2.8:1Fail

3.9:1AA18

2.8:1Fail

1.8:1Fail

1.6:1Fail

2.2:1Fail

1.6:1Fail

2.8:1Fail

1.6:1Fail

1.4:1Fail

1:1Fail

3.9:1AA18

2.2:1Fail

1.4:1Fail

2.8:1Fail

1.6:1Fail

1:1Fail

1.4:1Fail

Similar palettes

More like Deep Marine Verdure

Deep Marine Verdure

See it in context.

Ready when you are.

Built with Deep Marine Verdure.

How to use Deep Marine Verdure

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Forest Contrast

Verdant Serenity

Lively Aquatic

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Deep Marine Verdure