Palette

Vibrant Reef Mosaic

A dazzling and energetic palette capturing the lively ecosystem of a tropical coral reef, bursting with brilliant colors.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vibrant Reef Mosaic 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 Vibrant Reef Mosaic.

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

Data visualization

#00A7BB#00C2B8#FF6F61#F7D25A#3A3A3A

Palette guide

How to use Vibrant Reef Mosaic

Overview

The Vibrant Reef Mosaic palette captures the stunning biodiversity and energetic ecosystem of a tropical coral reef. Featuring a refreshing teal #00A7BB, serene aqua #00C2B8, lively coral #FF6F61, sunny mustard yellow #F7D25A, and a grounding dark gray #3A3A3A, this collection is perfect for designers and developers seeking a vibrant yet sophisticated feel. It evokes images of clear ocean waters and exotic marine life, making it ideal for projects related to travel, nature, or playful, modern brands. The dark gray provides a crucial anchor, allowing the brilliant hues to truly sparkle and create a captivating visual experience.

Best used for

Tropical travel and tourism branding
Eco-conscious product packaging and websites
Children's educational content and apps
Summer fashion or swimwear collections
Spa and wellness brand identity
Aquatic-themed digital interfaces

Suggested color roles

primary

Use #00A7BB for main navigation, key headings, or brand elements to establish a calm yet vibrant tone.

secondary

Apply #FF6F61 for calls-to-action, highlights, or to introduce a warm, energetic contrast.

accent

Integrate #F7D25A for small details, icons, or interactive states, providing a cheerful pop.

background

Utilize #3A3A3A as a sophisticated background to make the brighter colors glow, or a very light off-white for a airy feel.

text

Pair a crisp white or light gray with #00A7BB, #00C2B8, and #FF6F61. For lighter backgrounds, #3A3A3A offers excellent readability.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using #F7D25A, which may need darker text.
The dark gray #3A3A3A provides an excellent base for high-contrast white text, improving readability.
Be mindful of colorblindness when combining #FF6F61 and #F7D25A for essential information; test their contrast.
Use #00A7BB and #00C2B8 together for larger graphical elements rather than small, critical text to maintain distinctness.

Recommended combinations

Oceanic Glow

Ideal for creating a refreshing, dynamic header or feature section, evoking clear waters and coral.

#00A7BB · #00C2B8 · #FF6F61

Tropical Contrast

Excellent for robust data visualization, bold call-to-action blocks, or dark-mode interfaces.

#3A3A3A · #F7D25A · #FF6F61

Vibrant Accents

Perfect for interactive elements, infographics, or small decorative details that need to stand out.

#F7D25A · #00A7BB · #FF6F61

CSS variables

:root {
  --vibrant-reef-mosaic-1: #00A7BB;
  --vibrant-reef-mosaic-2: #00C2B8;
  --vibrant-reef-mosaic-3: #FF6F61;
  --vibrant-reef-mosaic-4: #F7D25A;
  --vibrant-reef-mosaic-5: #3A3A3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vibrant-reef-mosaic": {
        1: "#00A7BB",
        2: "#00C2B8",
        3: "#FF6F61",
        4: "#F7D25A",
        5: "#3A3A3A",
      }
    }
  }
}

Hex values

Color 1#00A7BB

Color 2#00C2B8

Color 3#FF6F61

Color 4#F7D25A

Color 5#3A3A3A

Accessibility

Contrast checker

1.3:1Fail

1.1:1Fail

2:1Fail

3.9:1AA18

1.3:1Fail

1.2:1Fail

1.5:1Fail

5.1:1AA

1.1:1Fail

1.2:1Fail

1.9:1Fail

4.2:1AA18

2:1Fail

1.5:1Fail

1.9:1Fail

7.8:1AAA

3.9:1AA18

5.1:1AA

4.2:1AA18

7.8:1AAA

Similar palettes

More like Vibrant Reef Mosaic