Palette

Submarine Floral Burst

A colorful array of corals and calm blue waters, celebrating the lively ecosystem of a vibrant reef.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Submarine Floral Burst 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 Submarine Floral Burst.

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

Data visualization

#FF6347#FFA07A#B0E0E6#F0FFF0#5F9EA0

Palette guide

How to use Submarine Floral Burst

Overview

The Submarine Floral Burst palette captures the lively ecosystem of a vibrant reef with a colorful array of corals and calm blue waters. Featuring #FF6347 (Tomato), #FFA07A (Light Salmon), #B0E0E6 (Powder Blue), #F0FFF0 (Honeydew), and #5F9EA0 (Cadet Blue), this palette is perfect for designers and developers seeking a fresh, energetic, and natural aesthetic. Its blend of warm coral tones and cool marine blues creates a balanced yet vibrant feel, ideal for projects emphasizing nature, wellness, or a playful tropical mood. It offers versatility for both lively and serene designs.

Best used for

Eco-friendly product packaging
Tropical resort and travel branding
Summer fashion collections
Children's book illustrations
Health and wellness app interfaces
Marine conservation websites

Suggested color roles

primary

#FF6347 (Tomato): Use for energetic calls to action, prominent headings, or as a vibrant accent to draw immediate attention.

secondary

#5F9EA0 (Cadet Blue): Ideal for calm supporting elements, navigation, or as a serene background that balances the coral tones.

accent

#FFA07A (Light Salmon): Perfect for softer highlights, complementary details, or to add warmth without overwhelming the design.

background

#F0FFF0 (Honeydew): An excellent light, airy background that provides a fresh and clean canvas, allowing other colors to pop gently.

text

#B0E0E6 (Powder Blue): Suitable for very subtle secondary text or graphic elements. For main body text, a dark blue or charcoal is recommended for optimal readability.

Accessibility notes

Ensure sufficient contrast when using #B0E0E6 as text on #F0FFF0 background; it may not meet WCAG AA standards.
The warmer coral tones (#FF6347, #FFA07A) provide good contrast on #F0FFF0, making them suitable for headings and important information.
Avoid using #FFA07A for small body text, as its lightness can reduce readability against lighter backgrounds.
Always check color contrast for all text and interactive elements to ensure accessibility across different contexts.

Recommended combinations

Coral Reef

A lively and balanced combination, perfect for showcasing natural themes, vibrant product displays, or engaging content sections.

#FF6347 · #FFA07A · #5F9EA0

Ocean Bloom

Creates a fresh, airy feel with a vibrant pop, ideal for clean interfaces, light branding, or cheerful illustrations.

#B0E0E6 · #F0FFF0 · #FF6347

Tropical Fresh

A calming yet inviting blend, great for background elements, soft gradients, or designs that convey relaxation and warmth.

#5F9EA0 · #FFA07A · #F0FFF0

CSS variables

:root {
  --submarine-floral-burst-1: #FF6347;
  --submarine-floral-burst-2: #FFA07A;
  --submarine-floral-burst-3: #B0E0E6;
  --submarine-floral-burst-4: #F0FFF0;
  --submarine-floral-burst-5: #5F9EA0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "submarine-floral-burst": {
        1: "#FF6347",
        2: "#FFA07A",
        3: "#B0E0E6",
        4: "#F0FFF0",
        5: "#5F9EA0",
      }
    }
  }
}

Hex values

Color 1#FF6347

Color 2#FFA07A

Color 3#B0E0E6

Color 4#F0FFF0

Color 5#5F9EA0

Accessibility

Contrast checker

1.5:1Fail

2.1:1Fail

2.8:1Fail

1:1Fail

1.5:1Fail

1.4:1Fail

1.9:1Fail

1.5:1Fail

2.1:1Fail

1.4:1Fail

2.1:1Fail

2.8:1Fail

1.9:1Fail

1.4:1Fail

2.9:1Fail

1:1Fail

1.5:1Fail

2.1:1Fail

2.9:1Fail

Similar palettes

More like Submarine Floral Burst

Submarine Floral Burst

See it in context.

Ready when you are.

Built with Submarine Floral Burst.

How to use Submarine Floral Burst

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Coral Reef

Ocean Bloom

Tropical Fresh

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Submarine Floral Burst