Palette

Tropical Reef Vibrance

An explosion of cheerful greens, yellows, and oranges, capturing the lively spirit of a tropical reef.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tropical Reef Vibrance 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 Tropical Reef Vibrance.

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

Data visualization

#00796B#388E3C#8BC34A#FFEB3B#FF9800

Palette guide

How to use Tropical Reef Vibrance

Overview

The Tropical Reef Vibrance palette is an explosion of cheerful greens, yellows, and oranges, capturing the lively spirit of a tropical reef. It features a deep forest green #00796B, a vibrant emerald #388E3C, and a bright lime #8BC34A, reflecting lush marine flora. Complementing these are a sunny yellow #FFEB3B and a warm orange #FF9800, reminiscent of exotic fish and corals. This palette is perfect for designs that need to convey energy, warmth, and a natural, thriving ecosystem feel. Designers can leverage its high contrast and lively color combinations, while developers will appreciate the clear color distinctions for various UI elements.

Best used for

Eco-tourism websites and brochures
Organic food and beverage branding
Nature-themed educational apps
Outdoor adventure marketing materials
Children's clothing or toy design
Health and wellness product packaging

Suggested color roles

primary

Use #00796B (Dark Cyan) for main headings or significant UI elements, grounding the palette with a deep, natural tone.

secondary

Apply #FF9800 (Orange) for secondary calls-to-action, important alerts, or complementary headings, adding warmth and energy.

accent

Utilize #FFEB3B (Yellow) sparingly for interactive elements, highlights, or small icons to create a bright, attention-grabbing pop.

background

Employ #8BC34A (Light Green) as a fresh, natural background, providing a lively base that complements the warmer hues.

text

For dark text, a deep charcoal like #333333 works on #8BC34A. Pure white provides excellent contrast on #00796B, #388E3C, #FFEB3B, and #FF9800.

Accessibility notes

Ensure sufficient contrast when pairing #FFEB3B with lighter text; darker text or bold white is essential for readability.
The vibrant #FF9800 and #FFEB3B might need careful pairing with text; always check WCAG guidelines.
Use #00796B or #388E3C as background for white text to maintain good contrast ratios for readability.
Avoid using #8BC34A as a primary text color due to its brightness and potential for eye strain against light backgrounds.

Recommended combinations

Lush & Sunny

Ideal for vibrant headers, product showcases, or interactive dashboards, creating a fresh and energetic visual.

#00796B · #FFEB3B · #388E3C

Warm Coral Glow

Perfect for calls-to-action, highlights, or seasonal promotions, bringing warmth and a playful feel.

#FF9800 · #FFEB3B · #8BC34A

Natural Harmony

Creates an earthy, organic feel, suitable for informational sections, subtle branding, or backgrounds emphasizing nature.

#388E3C · #8BC34A · #00796B

CSS variables

:root {
  --tropical-reef-vibrance-1: #00796B;
  --tropical-reef-vibrance-2: #388E3C;
  --tropical-reef-vibrance-3: #8BC34A;
  --tropical-reef-vibrance-4: #FFEB3B;
  --tropical-reef-vibrance-5: #FF9800;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-reef-vibrance": {
        1: "#00796B",
        2: "#388E3C",
        3: "#8BC34A",
        4: "#FFEB3B",
        5: "#FF9800",
      }
    }
  }
}

Hex values

Color 1#00796B

Color 2#388E3C

Color 3#8BC34A

Color 4#FFEB3B

Color 5#FF9800

Accessibility

Contrast checker

1.3:1Fail

2.5:1Fail

4.4:1AA18

2.5:1Fail

1.3:1Fail

2:1Fail

3.4:1AA18

1.9:1Fail

2.5:1Fail

2:1Fail

1.7:1Fail

1:1Fail

4.4:1AA18

3.4:1AA18

1.7:1Fail

1.8:1Fail

2.5:1Fail

1.9:1Fail

1:1Fail

1.8:1Fail

Similar palettes

More like Tropical Reef Vibrance

Tropical Reef Vibrance

See it in context.

Ready when you are.

Built with Tropical Reef Vibrance.

How to use Tropical Reef Vibrance

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Lush & Sunny

Warm Coral Glow

Natural Harmony

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Tropical Reef Vibrance