Palette

Ocean Kelp Forest

Deep, rich greens and earthy tones, mimicking the swaying, mysterious depths of a kelp forest.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Kelp Forest 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 Ocean Kelp Forest.

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

Data visualization

#002B1D#004F3F#007361#009783#00BBA6

Palette guide

How to use Ocean Kelp Forest

Overview

The Ocean Kelp Forest palette plunges into the mysterious depths of an underwater world, offering a rich gradient of deep, earthy greens. From the profound #002B1D and #004F3F to the vibrant #00BBA6, this collection perfectly mimics the swaying fronds of a kelp forest. Designers can leverage this palette to evoke a sense of natural mystery, growth, and tranquility, making it ideal for eco-conscious or nature-inspired projects. Developers will find its harmonious progression excellent for creating visual depth and clear hierarchies in UI design, ensuring a cohesive and immersive user experience. It's a truly organic and captivating color scheme.

Best used for

Environmental and conservation organizations
Organic and natural food branding
Eco-tourism websites
Forest and nature-themed illustrations
Sustainable product packaging
Wellness apps focused on grounding

Suggested color roles

primary

Use #007361 for main content areas or significant brand elements, offering a balanced, natural green.

secondary

Apply #004F3F for supporting sections or darker accents, providing depth without being overwhelming.

accent

Highlight with #00BBA6 for calls-to-action or important interactive elements, ensuring a vibrant, fresh pop.

background

Employ #002B1D for a dramatic, deep background, or #007361 for a slightly lighter base.

text

On darker shades, use a crisp white or near-white for optimal readability. On lighter shades like #00BBA6, a very dark grey or black is recommended.

Accessibility notes

White text provides excellent contrast against all colors in this palette, except possibly #00BBA6 for very small text.
For #00BBA6, ensure dark text (e.g., black or #002B1D) is used for readability.
Avoid placing #007361 text on #004F3F without checking contrast carefully.
Always verify WCAG AA compliance for all text and interactive elements.

Recommended combinations

Deep Forest

Creates a rich, immersive backdrop, ideal for hero sections or a sophisticated brand presence.

#002B1D · #004F3F · #007361

Kelp Canopy

Excellent for gradients or layered UI elements, evoking dappled light through kelp fronds.

#007361 · #009783 · #00BBA6

Vibrant Growth

Provides a dynamic contrast for calls-to-action or highlighting key information, full of natural energy.

#004F3F · #00BBA6 · #009783

CSS variables

:root {
  --ocean-kelp-forest-2-1: #002B1D;
  --ocean-kelp-forest-2-2: #004F3F;
  --ocean-kelp-forest-2-3: #007361;
  --ocean-kelp-forest-2-4: #009783;
  --ocean-kelp-forest-2-5: #00BBA6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-kelp-forest-2": {
        1: "#002B1D",
        2: "#004F3F",
        3: "#007361",
        4: "#009783",
        5: "#00BBA6",
      }
    }
  }
}

Hex values

Color 1#002B1D

Color 2#004F3F

Color 3#007361

Color 4#009783

Color 5#00BBA6

Accessibility

Contrast checker

1.6:1Fail

2.7:1Fail

4.2:1AA18

6.4:1AA

1.6:1Fail

1.7:1Fail

2.6:1Fail

4:1AA18

2.7:1Fail

1.7:1Fail

1.6:1Fail

2.4:1Fail

4.2:1AA18

2.6:1Fail

1.6:1Fail

1.5:1Fail

6.4:1AA

4:1AA18

2.4:1Fail

1.5:1Fail

Similar palettes

More like Ocean Kelp Forest

Ocean Kelp Forest

See it in context.

Ready when you are.

Built with Ocean Kelp Forest.

How to use Ocean Kelp Forest

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Forest

Kelp Canopy

Vibrant Growth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Ocean Kelp Forest