Back to palettes

Palette

Ocean Kelp Forest

Dark, cool greens reminiscent of submerged kelp forests swaying gently in the ocean currents.

darkcalm5 colors
More dark 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

#3A5B5A#6C8B82#98B4AC#25403E#4E706B

Palette guide

How to use Ocean Kelp Forest

Overview

The Ocean Kelp Forest palette offers a serene and sophisticated collection of dark, cool greens, perfectly capturing the tranquil essence of submerged kelp forests. From the deep, anchoring #25403E to the lighter, misty #98B4AC, with balanced mid-tones like #3A5B5A and #6C8B82, this palette exudes a calm, natural elegance. Designers can use these shades to create designs that feel grounded, peaceful, and subtly mysterious. Developers will find its cohesive nature ideal for building interfaces that are easy on the eyes, providing a soothing backdrop for content. It's an excellent choice for projects seeking a refined, nature-inspired aesthetic.

Best used for

  • High-end eco-friendly brands
  • Minimalist and sophisticated web design
  • Sustainable architecture concepts
  • Wellness and mindfulness retreats
  • Nature-inspired photography displays
  • Luxury spa services branding

Suggested color roles

primary

Use #3A5B5A for main content areas or key brand elements, offering a balanced, deep green-grey.

secondary

Apply #25403E for foundational elements or strong contrasts, providing profound depth.

accent

Highlight with #98B4AC for subtle interactive elements or delicate design details, adding a touch of lightness.

background

Employ #6C8B82 for a balanced, calming background, or #98B4AC for a very light, airy base.

text

On darker shades like #25403E and #3A5B5A, use white or a very light grey. On lighter shades, a dark charcoal or black is recommended.

Accessibility notes

  • White text provides excellent contrast against #25403E, #3A5B5A, and #4E706B.
  • Ensure dark text (e.g., black or #25403E) on #98B4AC meets WCAG AA contrast requirements.
  • Avoid pairing #6C8B82 text on #4E706B without careful contrast checking.
  • Always use a contrast checker to verify compliance for all text and interactive elements.

Recommended combinations

Deep Serene

Creates a rich, sophisticated backdrop, ideal for hero sections or elegant branding.

#25403E · #3A5B5A · #4E706B

Misty Greens

Excellent for soft gradients or layered UI elements, evoking a gentle, ethereal quality.

#6C8B82 · #98B4AC · #3A5B5A

Grounded Contrast

Provides a strong yet calm visual hierarchy, suitable for primary content and subtle accents.

#25403E · #98B4AC · #6C8B82

CSS variables

:root {
  --ocean-kelp-forest-1: #3A5B5A;
  --ocean-kelp-forest-2: #6C8B82;
  --ocean-kelp-forest-3: #98B4AC;
  --ocean-kelp-forest-4: #25403E;
  --ocean-kelp-forest-5: #4E706B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-kelp-forest": {
        1: "#3A5B5A",
        2: "#6C8B82",
        3: "#98B4AC",
        4: "#25403E",
        5: "#4E706B",
      }
    }
  }
}

Related searches

dark green ocean paletteserene kelp colorssophisticated green grey schemecalm nature palettedeep aquatic greens

Palette colors

Hex values

Color 1#3A5B5A
·
Color 2#6C8B82
·
Color 3#98B4AC
·
Color 4#25403E
·
Color 5#4E706B
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.3:1AA18
1.5:1Fail
1.4:1Fail
2
2:1Fail
1.7:1Fail
3:1AA18
1.5:1Fail
3
3.3:1AA18
1.7:1Fail
5:1AA
2.5:1Fail
4
1.5:1Fail
3:1AA18
5:1AA
2:1Fail
5
1.4:1Fail
1.5:1Fail
2.5:1Fail
2:1Fail

Similar palettes

More like Ocean Kelp Forest

View all dark
Abyssal Bloom Depths
Deep Sea Lullaby
Dusky Forest Whispers
Whispering Pines Shade
Ancient Fern Whisper
Celestial Dream Dust