Back to palettes

Palette

Oceanic Kelp Sway

Evokes the mysterious depths and graceful movements of kelp forests swaying gently in cool ocean currents.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#3CB371#5F9EA0#008B8B#20B2AA

Palette guide

How to use Oceanic Kelp Sway

Overview

The Oceanic Kelp Sway palette captures the gentle, flowing essence of an underwater kelp forest with its harmonious blend of deep greens and blues. Starting with the elegant #2F4F4F, it transitions through vibrant teals like #3CB371 and #20B2AA, anchored by the serene blue-green of #5F9EA0 and the striking #008B8B. This collection is perfect for designs aiming to convey natural beauty, tranquility, and a sense of fluid movement. Designers and developers will find its versatility suitable for creating engaging and calming visual experiences across various platforms.

Best used for

  • Environmental conservation websites and campaigns
  • Yoga and meditation app interfaces
  • Oceanography and marine biology educational content
  • Sustainable product branding
  • Relaxation and wellness marketing materials
  • Nature photography portfolios

Suggested color roles

primary

Employ #2F4F4F as a strong, grounding primary color for headers or main content blocks.

secondary

Use #5F9EA0 for secondary elements, backgrounds, or larger UI components to maintain a calming flow.

accent

Introduce #3CB371 or #008B8B for calls to action, interactive elements, or key visual highlights, providing a pop of fresh energy.

background

The mid-tone #20B2AA works well for section backgrounds, offering a soothing backdrop without being too dark.

text

For optimal readability, use a crisp white or very light gray on #2F4F4F, #5F9EA0, #008B8B. For lighter tones like #3CB371, a dark charcoal or black is recommended.

Accessibility notes

  • White text generally provides good contrast on #2F4F4F, #5F9EA0, #008B8B, and #20B2AA.
  • Ensure #3CB371 has sufficient contrast when used for text, especially on light backgrounds.
  • Avoid using #2F4F4F and #5F9EA0 together for small text if contrast is critical; they are similar in value.
  • Always verify text and background color pairings with a contrast checker to meet WCAG AA standards.

Recommended combinations

Deep Current

Creates a sophisticated, deep-sea ambiance, ideal for professional or contemplative designs.

#2F4F4F · #5F9EA0 · #008B8B

Kelp Bloom

Highlights natural vibrancy and growth, suitable for nature-focused or energetic wellness applications.

#3CB371 · #20B2AA · #2F4F4F

Oceanic Flow

Offers a balanced, serene, and cohesive aquatic look, perfect for backgrounds or gradient effects.

#5F9EA0 · #008B8B · #20B2AA

CSS variables

:root {
  --oceanic-kelp-sway-1: #2F4F4F;
  --oceanic-kelp-sway-2: #3CB371;
  --oceanic-kelp-sway-3: #5F9EA0;
  --oceanic-kelp-sway-4: #008B8B;
  --oceanic-kelp-sway-5: #20B2AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-kelp-sway": {
        1: "#2F4F4F",
        2: "#3CB371",
        3: "#5F9EA0",
        4: "#008B8B",
        5: "#20B2AA",
      }
    }
  }
}

Related searches

kelp forest color schemedeep green teal palettecalm ocean colorsmarine greens and bluesnature inspired design palette

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#3CB371
·
Color 3#5F9EA0
·
Color 4#008B8B
·
Color 5#20B2AA
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.3:1AA18
2.9:1Fail
2.2:1Fail
3.4:1AA18
2
3.3:1AA18
1.1:1Fail
1.6:1Fail
1:1Fail
3
2.9:1Fail
1.1:1Fail
1.4:1Fail
1.2:1Fail
4
2.2:1Fail
1.6:1Fail
1.4:1Fail
1.6:1Fail
5
3.4:1AA18
1:1Fail
1.2:1Fail
1.6:1Fail

Similar palettes

More like Oceanic Kelp Sway

View all cool
Azure Ocean Current
Deep Kelp Forest
Deep Ocean Current
Kelp Forest Sway
Ocean Depths Glimmer
Oceanic Kelp Forest