Palette

Oceanic Kelp Forest

Rich aquatic greens and blues, like light filtering through a majestic underwater kelp forest.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#004D40#2E7D6F#5DA69B#1E3D4F#2C5F6D

Palette guide

How to use Oceanic Kelp Forest

Overview

The Oceanic Kelp Forest palette evokes the serene, mysterious depths of an underwater world, perfect for designs seeking a tranquil yet sophisticated feel. Featuring a spectrum of deep greens and blues, including the rich forest green of #004D40 and the muted teal of #2E7D6F, it provides a harmonious foundation. The lighter #5DA69B offers a refreshing contrast, while the darker blues #1E3D4F and #2C5F6D add profound depth. This palette is ideal for projects that aim to convey natural elegance, sustainability, or a sense of calm reflection, guiding users through a visually soothing experience.

Best used for

Eco-friendly brand identity and packaging
Nature-themed websites and mobile applications
Spa and wellness promotional materials
Documentary film branding and titles
Interior design schemes for tranquil spaces
Sustainable fashion collections

Suggested color roles

primary

Use #004D40 as the dominant background or main brand color, providing a deep, stable foundation.

secondary

Apply #2E7D6F for supporting sections, navigation elements, or secondary branding, offering a softer yet still profound presence.

accent

Highlight key information or interactive elements with #5DA69B, ensuring visibility against darker tones.

background

The deep blue-green #1E3D4F makes an excellent background for immersive experiences or dark mode interfaces, offering depth.

text

For body text, use a light cream or white on darker backgrounds like #004D40 or #1E3D4F. For lighter backgrounds, a dark charcoal or black is recommended.

Accessibility notes

Ensure sufficient contrast when pairing #5DA69B with any text; it may require larger font sizes or bolding.
White text on #004D40, #2E7D6F, #1E3D4F, and #2C5F6D provides excellent readability.
Avoid using #5DA69B for small text areas on a light background, as contrast may be low.
Test color combinations with accessibility checkers to meet WCAG guidelines, especially for interactive elements.

Recommended combinations

Deep Ocean

For a serious, sophisticated, or mysterious feel, ideal for corporate or luxury brands.

#004D40 · #1E3D4F · #2C5F6D

Kelp Shimmer

To create a refreshing, natural, and slightly energetic aquatic vibe, good for health or eco-tourism.

#2E7D6F · #5DA69B · #004D40

Underwater Haze

Excellent for layered designs, conveying depth and subtle complexity, suitable for data visualization or abstract art.

#1E3D4F · #2C5F6D · #5DA69B

CSS variables

:root {
  --oceanic-kelp-forest-1: #004D40;
  --oceanic-kelp-forest-2: #2E7D6F;
  --oceanic-kelp-forest-3: #5DA69B;
  --oceanic-kelp-forest-4: #1E3D4F;
  --oceanic-kelp-forest-5: #2C5F6D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-kelp-forest": {
        1: "#004D40",
        2: "#2E7D6F",
        3: "#5DA69B",
        4: "#1E3D4F",
        5: "#2C5F6D",
      }
    }
  }
}

Hex values

Color 1#004D40

Color 2#2E7D6F

Color 3#5DA69B

Color 4#1E3D4F

Color 5#2C5F6D

Accessibility

Contrast checker

2:1Fail

3.5:1AA18

1.2:1Fail

1.4:1Fail

2:1Fail

1.7:1Fail

2.3:1Fail

1.4:1Fail

3.5:1AA18

1.7:1Fail

4:1AA18

2.5:1Fail

1.2:1Fail

2.3:1Fail

4:1AA18

1.6:1Fail

1.4:1Fail

2.5:1Fail

1.6:1Fail

Similar palettes

More like Oceanic Kelp Forest

Oceanic Kelp Forest

See it in context.

Ready when you are.

Built with Oceanic Kelp Forest.

How to use Oceanic Kelp Forest

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Ocean

Kelp Shimmer

Underwater Haze

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Oceanic Kelp Forest