Palette

Aquatic Flora Bloom

A tranquil collection inspired by the gentle undulations and vibrant life found within an underwater garden.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5F9EA0#40E0D0#20B2AA#00CED1#48D1CC

Palette guide

How to use Aquatic Flora Bloom

Overview

The "Aquatic Flora Bloom" palette is a tranquil collection inspired by the gentle undulations and vibrant life found within an underwater garden. This cool, refreshing palette showcases a beautiful range of teals and aquas, including the muted Cadet Blue #5F9EA0, the lively Turquoise #40E0D0, and the strong Light Sea Green #20B2AA. It also features the striking Dark Turquoise #00CED1 and the bright Medium Turquoise #48D1CC. Developers can utilize these harmonious shades to craft serene yet engaging user interfaces that evoke natural beauty and calm. Designers will find this palette ideal for projects related to nature, sustainability, wellness, or any brand seeking a fresh, organic, and visually soothing aesthetic.

Best used for

Botanical garden branding
Spa and relaxation apps
Eco-conscious product lines
Marine-themed digital art
Health and wellness websites
Nature documentary graphics

Suggested color roles

primary

A strong, deep turquoise #00CED1, providing a vibrant yet calming foundation for main elements, brand logos, or prominent headings.

secondary

A balanced light sea green #20B2AA that supports the primary, suitable for navigation, secondary buttons, or large content blocks.

accent

A bright, lively turquoise #40E0D0 that offers a refreshing pop, perfect for interactive elements, highlights, or decorative accents.

background

Use #5F9EA0 for a muted, cool background or a near-white for ultimate clarity.

text

Use #00CED1 for headings and #333333 (charcoal) for body text on light backgrounds for optimal readability.

Accessibility notes

Ensure sufficient contrast for text using #00CED1 or #20B2AA on lighter backgrounds like #5F9EA0 or white.
Lighter shades like #40E0D0 and #48D1CC may require darker text or larger font sizes to meet wcag contrast guidelines.
Avoid using light text on #5F9EA0 or #48D1CC.
Use a dark neutral (e.g., black or charcoal) for main body text to ensure maximum readability.

Recommended combinations

Garden Depths

For establishing a deep, natural base in websites or apps, with dark turquoise as primary, cadet blue as background, and light sea green for secondary elements.

#00CED1 · #5F9EA0 · #20B2AA

Blooming Highlights

Ideal for highlighting details or creating vibrant accents, using brighter turquoises and aquamarines against a soft blue.

#40E0D0 · #48D1CC · #5F9EA0

Serene Focus

Effective for calls to action or emphasized content, using light sea green for buttons, cadet blue for surrounding space, and dark turquoise for button text or icons.

#20B2AA · #5F9EA0 · #00CED1

CSS variables

:root {
  --aquatic-flora-bloom-1: #5F9EA0;
  --aquatic-flora-bloom-2: #40E0D0;
  --aquatic-flora-bloom-3: #20B2AA;
  --aquatic-flora-bloom-4: #00CED1;
  --aquatic-flora-bloom-5: #48D1CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aquatic-flora-bloom": {
        1: "#5F9EA0",
        2: "#40E0D0",
        3: "#20B2AA",
        4: "#00CED1",
        5: "#48D1CC",
      }
    }
  }
}

Hex values

Color 1#5F9EA0

Color 2#40E0D0

Color 3#20B2AA

Color 4#00CED1

Color 5#48D1CC

Accessibility

Contrast checker

1.9:1Fail

1.2:1Fail

1.6:1Fail

1.9:1Fail

1.6:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.6:1Fail

1.3:1Fail

1.4:1Fail

1.6:1Fail

1.2:1Fail

1.3:1Fail

1:1Fail

1.6:1Fail

1.1:1Fail

1.4:1Fail

1:1Fail

Similar palettes

More like Aquatic Flora Bloom

Aquatic Flora Bloom

See it in context.

Ready when you are.

Built with Aquatic Flora Bloom.

How to use Aquatic Flora Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Garden Depths

Blooming Highlights

Serene Focus

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Aquatic Flora Bloom