Palette

Ocean Kelp Forest

Dive into the mysterious depths of an underwater kelp forest, where dappled light dances through verdant fronds.

coolnatural5 colors

More cool 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

#1F4531#4E7D63#2B657A#7CA7AD#5A452D

Palette guide

How to use Ocean Kelp Forest

Overview

The Ocean Kelp Forest palette uniquely blends deep forest greens with cool ocean blues and a touch of earthy warmth, mirroring the complex ecosystem of an underwater kelp forest. It features the grounding #1F4531, the serene #2B657A, and the contrasting #5A452D. Mid-tones like #4E7D63 and #7CA7AD provide harmonious transitions, allowing for rich, textured designs. Designers can create projects that feel both mysterious and inviting, evoking dappled light through verdant fronds. Developers will find this palette excellent for crafting nuanced interfaces, offering distinct visual cues while maintaining a cohesive, natural aesthetic.

Best used for

Adventure and outdoor brands
Nature documentary branding
Rustic and artisanal product design
Environmental education platforms
Game design for natural environments
Unique travel and exploration blogs

Suggested color roles

primary

Use #2B657A for main sections or key brand elements, offering a cool, deep blue-green foundation.

secondary

Apply #1F4531 for supporting content or darker accents, providing earthy depth and stability.

accent

Highlight with #7CA7AD for subtle interactive elements or light decorative touches, adding an airy contrast.

background

Employ #4E7D63 for a balanced, natural background, or #7CA7AD for a lighter, more open feel.

text

On darker shades like #1F4531 and #2B657A, use white or a very light grey. On lighter shades, a dark charcoal or black is recommended.

Accessibility notes

White text provides good contrast against #1F4531, #4E7D63, #2B657A, and #5A452D.
Ensure dark text (e.g., black) on #7CA7AD meets WCAG AA contrast requirements.
Avoid using #4E7D63 text on #1F4531 without careful contrast checking.
The warm #5A452D will need sufficient contrast with text, preferably dark.

Recommended combinations

Forest Depths

Creates a rich, mysterious ambiance, ideal for backgrounds or foundational design elements.

#1F4531 · #2B657A · #4E7D63

Sunlit Fronds

Excellent for layered visuals or gradients, evoking dappled light and movement.

#4E7D63 · #7CA7AD · #2B657A

Earthy Contrast

Provides a unique balance of warm and cool, suitable for accent details or dynamic branding.

#5A452D · #2B657A · #7CA7AD

CSS variables

:root {
  --ocean-kelp-forest-3-1: #1F4531;
  --ocean-kelp-forest-3-2: #4E7D63;
  --ocean-kelp-forest-3-3: #2B657A;
  --ocean-kelp-forest-3-4: #7CA7AD;
  --ocean-kelp-forest-3-5: #5A452D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-kelp-forest-3": {
        1: "#1F4531",
        2: "#4E7D63",
        3: "#2B657A",
        4: "#7CA7AD",
        5: "#5A452D",
      }
    }
  }
}

Hex values

Color 1#1F4531

Color 2#4E7D63

Color 3#2B657A

Color 4#7CA7AD

Color 5#5A452D

Accessibility

Contrast checker

2.3:1Fail

1.7:1Fail

4.1:1AA18

1.2:1Fail

2.3:1Fail

1.4:1Fail

1.8:1Fail

1.9:1Fail

1.7:1Fail

1.4:1Fail

2.5:1Fail

1.4:1Fail

4.1:1AA18

1.8:1Fail

2.5:1Fail

3.4:1AA18

1.2:1Fail

1.9:1Fail

1.4:1Fail

3.4:1AA18

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

Forest Depths

Sunlit Fronds

Earthy Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Ocean Kelp Forest