Back to palettes

Palette

Oceanic Reef Life

Bright, lively teals and coral oranges, capturing the effervescent energy of vibrant reef life.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Reef Life 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 Oceanic Reef Life.

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

Data visualization

#007F7F#00BFBF#00FFFF#FF4040#FF8080

Palette guide

How to use Oceanic Reef Life

Overview

The Oceanic Reef Life palette is an energetic burst of color, combining vibrant teals and aquas with striking coral reds and oranges, perfectly capturing the effervescent energy of a lively coral reef. With deep teal #007F7F, bright aqua #00BFBF, and dazzling #00FFFF, contrasted powerfully by the vivid #FF4040 and the softer #FF8080, this collection is designed to create dynamic, eye-catching, and memorable experiences. It's an excellent choice for designers and developers seeking to convey excitement, youthfulness, and the vibrant diversity of life.

Best used for

  • Youth-oriented brands and products
  • Game interfaces and promotional materials
  • Event branding for festivals or parties
  • Creative and artistic portfolios
  • Children's educational platforms
  • Social media campaigns requiring high impact

Suggested color roles

primary

Utilize #007F7F as a strong, grounding primary color for main sections or brand identity, offering depth.

secondary

Apply #00BFBF for supporting content blocks or larger UI components, maintaining a bright, aquatic feel.

accent

Deploy #FF4040 or #FF8080 for calls to action, warnings, or key highlights to create maximum visual pop and urgency.

background

The luminous #00FFFF can be used sparingly for backgrounds in light mode or for specific interactive elements to create a dazzling effect.

text

For dark backgrounds like #007F7F, use white. For #00BFBF or #00FFFF, a dark charcoal or black is essential. On #FF4040 and #FF8080, white text provides the best contrast.

Accessibility notes

  • White text provides excellent contrast on #007F7F, #FF4040, and #FF8080.
  • For #00BFBF and #00FFFF, dark text (black or dark gray) is crucial for readability.
  • Be cautious with text on #FF8080, ensuring sufficient contrast, especially for small font sizes.
  • Always verify color pairings with WCAG contrast tools to ensure accessibility for all users.

Recommended combinations

Reef Contrast

Creates a high-energy, striking contrast, perfect for bold statements or interactive elements.

#007F7F · #FF4040 · #00FFFF

Coral Glow

Offers a softer, yet still vibrant, blend, suitable for playful designs or backgrounds.

#FF8080 · #00BFBF · #007F7F

Aqua Pop

Delivers a dazzling and modern look, ideal for accents, buttons, or dynamic infographics.

#00FFFF · #FF4040 · #00BFBF

CSS variables

:root {
  --oceanic-reef-life-2-1: #007F7F;
  --oceanic-reef-life-2-2: #00BFBF;
  --oceanic-reef-life-2-3: #00FFFF;
  --oceanic-reef-life-2-4: #FF4040;
  --oceanic-reef-life-2-5: #FF8080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-reef-life-2": {
        1: "#007F7F",
        2: "#00BFBF",
        3: "#00FFFF",
        4: "#FF4040",
        5: "#FF8080",
      }
    }
  }
}

Related searches

vibrant reef color paletteteal and coral designenergetic ocean schemebright aquatic colorspop art marine palette

Palette colors

Hex values

Color 1#007F7F
·
Color 2#00BFBF
·
Color 3#00FFFF
·
Color 4#FF4040
·
Color 5#FF8080
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
3.9:1AA18
1.4:1Fail
2:1Fail
2
2.1:1Fail
1.8:1Fail
1.5:1Fail
1.1:1Fail
3
3.9:1AA18
1.8:1Fail
2.8:1Fail
1.9:1Fail
4
1.4:1Fail
1.5:1Fail
2.8:1Fail
1.4:1Fail
5
2:1Fail
1.1:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Oceanic Reef Life

View all vibrant