Back to palettes

Palette

Ocean Bloom

A tranquil collection of blues and greens inspired by lush, vibrant deep-sea coral gardens.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Bloom 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 Bloom.

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

Data visualization

#2E8B57#3CB371#66CDAA#8FBC8F#20B2AA

Palette guide

How to use Ocean Bloom

Overview

The Ocean Bloom palette is a tranquil collection of vibrant greens and teals, inspired by lush, thriving deep-sea coral gardens. Featuring rich hues like #2E8B57 (Sea Green) and #3CB371 (Medium Sea Green), it transitions gracefully to the softer #66CDAA (Medium Aquamarine) and #8FBC8F (Dark Sea Green). The vibrant #20B2AA (Light Sea Green) adds a refreshing accent. This palette is perfect for designs aiming to evoke nature, growth, tranquility, and health. Designers and developers can use these colors to create inviting interfaces for eco-conscious brands, wellness apps, or any project desiring a fresh, organic, and serene aesthetic.

Best used for

  • Eco-friendly brand websites
  • Health and wellness applications
  • Nature-themed educational content
  • Sustainable product packaging
  • Spa and resort branding
  • Outdoor recreation apps

Suggested color roles

primary

Use #2E8B57 as a grounding primary color for large sections or main elements, symbolizing depth and nature.

secondary

Employ #3CB371 for secondary backgrounds, headers, or content blocks, providing a vibrant yet harmonious contrast.

accent

Apply #20B2AA for interactive elements, call-to-action buttons, or key highlights due to its distinct vibrancy.

background

A lighter shade like #66CDAA can serve as a calming background, or #8FBC8F for a slightly deeper, organic feel.

text

For text on lighter backgrounds, a dark charcoal or black works best. On darker palette colors, use white or a very light grey for readability.

Accessibility notes

  • Ensure sufficient contrast for all text. White text on #2E8B57 or #3CB371 provides good contrast.
  • Avoid placing #66CDAA text on #8FBC8F backgrounds, as the contrast may be too low for readability.
  • Use #20B2AA for interactive elements but check its contrast against adjacent background colors.
  • For body text on lighter shades like #66CDAA, use a dark grey or black to meet WCAG contrast guidelines.

Recommended combinations

Deep Ocean

Creates a rich, vibrant underwater feel, ideal for headers, primary sections, and energetic accents.

#2E8B57 · #3CB371 · #20B2AA

Coral Garden

Excellent for layered content blocks or illustrations, providing a harmonious gradient of greens.

#3CB371 · #66CDAA · #8FBC8F

Fresh Accent

Combines a deep base with a softer secondary and a lively, eye-catching accent for calls-to-action.

#2E8B57 · #8FBC8F · #20B2AA

CSS variables

:root {
  --ocean-bloom-1: #2E8B57;
  --ocean-bloom-2: #3CB371;
  --ocean-bloom-3: #66CDAA;
  --ocean-bloom-4: #8FBC8F;
  --ocean-bloom-5: #20B2AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-bloom": {
        1: "#2E8B57",
        2: "#3CB371",
        3: "#66CDAA",
        4: "#8FBC8F",
        5: "#20B2AA",
      }
    }
  }
}

Related searches

green blue color palettedeep sea colorstranquil nature paletteaquatic design colorseco friendly brand colors

Palette colors

Hex values

Color 1#2E8B57
·
Color 2#3CB371
·
Color 3#66CDAA
·
Color 4#8FBC8F
·
Color 5#20B2AA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.2:1Fail
2:1Fail
1.6:1Fail
2
1.6:1Fail
1.4:1Fail
1.2:1Fail
1:1Fail
3
2.2:1Fail
1.4:1Fail
1.1:1Fail
1.4:1Fail
4
2:1Fail
1.2:1Fail
1.1:1Fail
1.2:1Fail
5
1.6:1Fail
1:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Ocean Bloom

View all cool
Azure Coast Relic
Coastal Rockpool
Deep Sea Coral
Aurora Borealis Glow
Azure Coastline
Celestial Ocean Mirror