Palette

Kelp Forest Sway

Deep sea greens and blues illustrate the graceful, fluid movement of a kelp forest swaying beneath the ocean's surface.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A3B3E#1F6E7A#4CA3B3#072A2E#041F22

Palette guide

How to use Kelp Forest Sway

Overview

The Kelp Forest Sway palette captures the deep, serene essence of an underwater world, with graceful, fluid movement. This collection features a range of deep sea greens and blues, from the almost-black #041F22 and #072A2E to the rich #0A3B3E and #1F6E7A. A refreshing contrast is provided by the lighter, airy #4CA3B3. Designers and developers can employ this palette to create sophisticated, calming, and immersive digital environments or branding. It’s ideal for projects that aim to evoke tranquility, depth, and a connection to the mysterious beauty of the ocean, offering a refined and elegant visual experience.

Best used for

Marine conservation and environmental organization branding
Luxury spa and wellness website designs
Sophisticated tech interfaces with a calming aesthetic
Deep-sea exploration or aquatic-themed applications
High-end resort or travel branding for coastal destinations
Documentary or educational content related to oceanography

Suggested color roles

primary

Utilize #041F22 as the foundational, deepest color for main sections, strong headings, or footers, providing immense depth and a premium feel.

secondary

Employ #072A2E and #0A3B3E for supporting content panels, subheadings, or as backgrounds for sections that require a slightly lighter, yet still profound, dark tone.

accent

Introduce #4CA3B3 for refreshing highlights, interactive elements like buttons, or subtle graphical details to provide a vital contrast.

background

A very light gray or off-white background will make the deep colors pop. Alternatively, use #4CA3B3 for an immersive, soft background in specific sections.

text

For optimal readability on the dark background colors, use white or a very light gray. For text on #4CA3B3, a dark charcoal or #041F22 provides clear contrast.

Accessibility notes

White text on #0A3B3E, #1F6E7A, #072A2E, and #041F22 will generally provide excellent contrast and readability.
Ensure dark text (e.g., #041F22 or black) is used on #4CA3B3 for optimal readability and WCAG compliance.
Avoid using light gray text on #4CA3B3 as it will likely have insufficient contrast.
Prioritize clear contrast for all interactive elements to ensure usability, especially for links and buttons.

Recommended combinations

Deep Ocean

Perfect for a deep, anchoring header, a refreshing accent for calls-to-action, and a rich mid-tone for content blocks.

#041F22 · #4CA3B3 · #0A3B3E

Subtle Flow

Layer these for content cards or background gradients, creating a sense of depth and fluid movement reminiscent of water.

#1F6E7A · #072A2E · #4CA3B3

Marine Serenity

Use the dark green for primary text, the light teal for interactive elements, and the deepest shade for a grounding footer or hero section.

#0A3B3E · #4CA3B3 · #041F22

CSS variables

:root {
  --kelp-forest-sway-1: #0A3B3E;
  --kelp-forest-sway-2: #1F6E7A;
  --kelp-forest-sway-3: #4CA3B3;
  --kelp-forest-sway-4: #072A2E;
  --kelp-forest-sway-5: #041F22;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "kelp-forest-sway": {
        1: "#0A3B3E",
        2: "#1F6E7A",
        3: "#4CA3B3",
        4: "#072A2E",
        5: "#041F22",
      }
    }
  }
}

Hex values

Color 1#0A3B3E

Color 2#1F6E7A

Color 3#4CA3B3

Color 4#072A2E

Color 5#041F22

Accessibility

Contrast checker

2.1:1Fail

4.2:1AA18

1.2:1Fail

1.4:1Fail

2.1:1Fail

2:1Fail

2.6:1Fail

2.9:1Fail

4.2:1AA18

2:1Fail

5.2:1AA

5.9:1AA

1.2:1Fail

2.6:1Fail

5.2:1AA

1.1:1Fail

1.4:1Fail

2.9:1Fail

5.9:1AA

1.1:1Fail

Similar palettes

More like Kelp Forest Sway

View all cool

Submerged Garden Whisper

Azure Ocean Current

Cerulean Coastline Calm

Coastal Seafoam Whisper

Coastal Tide Pool

Deep Kelp Forest