Palette

Oceanic Kelp Forest

Cool, aquatic tones reflecting the serene and mysterious depths of a thriving 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

#1a2d3c#3b5c6e#5f889c#87b6c7#afe0f0

Palette guide

How to use Oceanic Kelp Forest

Overview

The "Oceanic Kelp Forest" palette (ID oceanic-kelp-forest-2) captures the serene and mysterious depths of a thriving kelp forest through cool, aquatic tones. This graduated collection ranges from the very deep, almost black #1a2d3c, through the rich #3b5c6e and the balanced #5f889c. It lightens further with the soft #87b6c7 and culminates in the airy, bright aqua of #afe0f0. This palette is ideal for projects seeking a tranquil, sophisticated, and natural aesthetic. Designers can use these hues to create calming digital interfaces, elegant branding, or atmospheric visual content. Developers will find this palette excellent for crafting applications that convey peace, clarity, and a subtle sense of natural wonder, perfect for eco-conscious or nature-focused platforms.

Best used for

Environmental conservation organizations
Nature documentaries or educational content
Sustainable brand packaging
Yoga or meditation app interfaces
Clean, minimalist web design
Marine science research websites

Suggested color roles

primary

A deep, calming blue-gray #3b5c6e, ideal for main brand elements, navigation, or significant content blocks, establishing a sophisticated and natural tone.

secondary

A balanced mid-tone blue-green #5f889c, excellent for supporting graphics, secondary calls-to-action, or sections requiring a clear, approachable blue.

accent

A soft, inviting light blue #87b6c7, perfect for subtle highlights, interactive elements, or small decorative details that add a touch of lightness and freshness.

background

A very deep, almost black blue-gray #1a2d3c, providing a rich, immersive, and grounding backdrop that enhances the luminosity of the lighter blues.

text

Use white or a very light gray for primary text on dark backgrounds such as #1a2d3c. For headings, #3b5c6e offers good contrast and sophistication.

Accessibility notes

Ensure white text has sufficient contrast against the darkest colors, #1a2d3c and #3b5c6e, for WCAG AA compliance.
Avoid using #afe0f0 for small text on lighter backgrounds; it's best for large headings or decorative use.
Text in #5f889c on #87b6c7 will likely have insufficient contrast; always verify.
For critical information, aim for high contrast pairings like white on #1a2d3c.

Recommended combinations

Forest Depths

Ideal for hero sections, main navigation, or immersive backgrounds, creating depth and a sense of light.

#1A2D3C · #5F889C · #AFE0F0

Kelp Canopy

Effective for content cards, informational blocks, or subtle gradients, providing a harmonious and calm blend.

#3B5C6E · #87B6C7 · #5F889C

Aqua Growth

Great for accentuating interactive elements, hover states, or delicate illustrations, leveraging high contrast and lightness.

#AFE0F0 · #1A2D3C · #87B6C7

CSS variables

:root {
  --oceanic-kelp-forest-2-1: #1a2d3c;
  --oceanic-kelp-forest-2-2: #3b5c6e;
  --oceanic-kelp-forest-2-3: #5f889c;
  --oceanic-kelp-forest-2-4: #87b6c7;
  --oceanic-kelp-forest-2-5: #afe0f0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-kelp-forest-2": {
        1: "#1a2d3c",
        2: "#3b5c6e",
        3: "#5f889c",
        4: "#87b6c7",
        5: "#afe0f0",
      }
    }
  }
}

Hex values

Color 1#1a2d3c

Color 2#3b5c6e

Color 3#5f889c

Color 4#87b6c7

Color 5#afe0f0

Accessibility

Contrast checker

2:1Fail

3.7:1AA18

6.4:1AA

9.9:1AAA

2:1Fail

1.9:1Fail

3.2:1AA18

5:1AA

3.7:1AA18

1.9:1Fail

1.7:1Fail

2.7:1Fail

6.4:1AA

3.2:1AA18

1.7:1Fail

1.5:1Fail

9.9:1AAA

5:1AA

2.7:1Fail

1.5:1Fail

Similar palettes

More like Oceanic Kelp Forest

Coastal Seaglass Gems

Cobalt Reef Depths