Palette

Coral Reef Jewel

Bright and lively colors inspired by the exotic life and vibrant beauty of a bustling coral reef.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coral Reef Jewel 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 Coral Reef Jewel.

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

Data visualization

#FF5A5F#FF8C6B#FBB02D#4CC9F0#2D4C90

Palette guide

How to use Coral Reef Jewel

Overview

The Coral Reef Jewel palette is a strikingly vibrant and dynamic collection, perfect for designs that evoke the exotic life and dazzling beauty of a bustling tropical reef. It features a bold bright red-orange, #FF5A5F, and a complementary coral orange, #FF8C6B, providing intense warmth and energy. A brilliant golden yellow, #FBB02D, adds a precious, sunlit sparkle. These warm tones are dramatically contrasted by the cool, refreshing sky blue, #4CC9F0, reminiscent of clear ocean waters, and a deep, grounding dark blue, #2D4C90, which adds sophistication. This palette is ideal for energetic, visually captivating projects that celebrate vibrancy and natural splendor.

Best used for

Tropical resort and travel marketing
Adventure sports and outdoor gear branding
Youth-focused fashion and lifestyle brands
Educational content on marine biology
Interactive dashboards and data visualizations
Festive event and party promotions

Suggested color roles

primary

#FF5A5F - Use this bright red-orange for high-impact calls-to-action, critical alerts, or brand elements that demand immediate attention and energy.

secondary

#2D4C90 - A deep, grounding dark blue, excellent for primary navigation, section headers, or as a dominant background color for sophisticated areas.

accent

#FBB02D - This brilliant golden yellow is perfect for highlighting key information, star ratings, icons, or small decorative details to add sparkle.

background

#4CC9F0 - A refreshing sky blue that can serve as an energetic and open background, especially when offset with darker text or UI elements.

text

#2D4C90 - For body text, the dark blue offers excellent readability against lighter backgrounds. Consider black or dark charcoal for general body text or white for text on #FF5A5F.

Accessibility notes

Ensure #FF5A5F and #FF8C6B have sufficient contrast with text; dark colors like black or #2D4C90 are recommended.
#FBB02D (golden yellow) should primarily be used for accents or very large display text, as small text may lack contrast.
The dark blue #2D4C90 provides good contrast for text on #4CC9F0 or white backgrounds.
Avoid placing #FBB02D text on #FF8C6B or #FF5A5F due to poor contrast.

Recommended combinations

Jewel Depths

Creates a powerful, contrasting look, ideal for bold headlines and dynamic interactive elements, simulating a treasure.

#2D4C90 · #FF5A5F · #FBB02D

Ocean Sparkle

Perfect for lively backgrounds with warm, bright accents, evoking a playful and inviting underwater scene.

#4CC9F0 · #FF8C6B · #FBB02D

Vibrant Reef

Balances intense warm and cool tones, effective for UI elements that guide users through engaging content with high energy.

#FF5A5F · #4CC9F0 · #2D4C90

CSS variables

:root {
  --coral-reef-jewel-1: #FF5A5F;
  --coral-reef-jewel-2: #FF8C6B;
  --coral-reef-jewel-3: #FBB02D;
  --coral-reef-jewel-4: #4CC9F0;
  --coral-reef-jewel-5: #2D4C90;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-jewel": {
        1: "#FF5A5F",
        2: "#FF8C6B",
        3: "#FBB02D",
        4: "#4CC9F0",
        5: "#2D4C90",
      }
    }
  }
}

Hex values

Color 1#FF5A5F

Color 2#FF8C6B

Color 3#FBB02D

Color 4#4CC9F0

Color 5#2D4C90

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

2.7:1Fail

1.3:1Fail

1.2:1Fail

3.6:1AA18

1.6:1Fail

1.2:1Fail

1:1Fail

4.5:1AA18

1.6:1Fail

1.2:1Fail

1:1Fail

4.3:1AA18

2.7:1Fail

3.6:1AA18

4.5:1AA18

4.3:1AA18

Similar palettes

More like Coral Reef Jewel

Coral Reef Jewel

See it in context.

Ready when you are.

Built with Coral Reef Jewel.

How to use Coral Reef Jewel

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Jewel Depths

Ocean Sparkle

Vibrant Reef

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coral Reef Jewel