Palette

Reef Jewel Bloom

A dazzling and energetic palette capturing the brilliant, diverse colors of a vibrant coral reef ecosystem.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF6F61#FFC1CC#06D6A0#40E0D0#EF476F

Palette guide

How to use Reef Jewel Bloom

Overview

The Reef Jewel Bloom palette is a dazzling and energetic collection, capturing the brilliant, diverse colors of a vibrant coral reef ecosystem. Featuring striking #FF6F61 (coral red), #06D6A0 (teal), and #EF476F (bright pink), this palette is bursting with life and contrast. The inclusion of #FFC1CC (light pink) and #40E0D0 (turquoise) provides softer, yet still lively, supporting tones. This palette is perfect for designers and developers seeking to create engaging, dynamic, and visually exciting experiences. Its high contrast and varied hues make it suitable for projects that demand attention and convey a sense of playful sophistication.

Best used for

Youthful and energetic brand identities
Creative portfolio websites
Digital art and illustration for children or fantasy themes
Interactive dashboards or data visualizations
Event branding for lively, modern gatherings
E-commerce sites for unique, colorful products

Suggested color roles

primary

Use #EF476F as a bold primary color for calls-to-action, headings, or focal points, demanding attention.

secondary

Employ #06D6A0 for secondary navigation, interactive elements, or sections, providing a strong, refreshing contrast.

accent

Apply #FF6F61 for key highlights, alerts, or to draw the eye to important information with its vibrant warmth.

background

The lightest shade, #FFC1CC, can serve as a soft, airy background, allowing the bolder colors to truly pop.

text

For text on lighter backgrounds like #FFC1CC, use dark gray or black. For text on #06D6A0 or #EF476F, white or a very light gray is recommended.

Accessibility notes

Ensure high contrast between text and background, especially when using #FFC1CC with other light colors.
Pair the vibrant #06D6A0 and #EF476F with pure white text to meet WCAG AA contrast standards.
Avoid using #FF6F61 for small text on #FFC1CC backgrounds due to potential legibility issues.
Consider using larger font sizes or bolding for text set in mid-range colors like #40E0D0 to improve readability.

Recommended combinations

Vibrant Pop

Creates a dynamic, eye-catching header or call-to-action, combining bold pink with refreshing teal.

#EF476F · #06D6A0 · #FFC1CC

Reef Depth

Ideal for layered backgrounds or detailed illustrations, mimicking the rich diversity of a coral reef.

#FF6F61 · #40E0D0 · #06D6A0

Energetic Cards

Useful for UI cards or feature sections, with a light base supporting two strong, contrasting accents.

#FFC1CC · #EF476F · #06D6A0

CSS variables

:root {
  --reef-jewel-bloom-1: #FF6F61;
  --reef-jewel-bloom-2: #FFC1CC;
  --reef-jewel-bloom-3: #06D6A0;
  --reef-jewel-bloom-4: #40E0D0;
  --reef-jewel-bloom-5: #EF476F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "reef-jewel-bloom": {
        1: "#FF6F61",
        2: "#FFC1CC",
        3: "#06D6A0",
        4: "#40E0D0",
        5: "#EF476F",
      }
    }
  }
}

Hex values

Color 1#FF6F61

Color 2#FFC1CC

Color 3#06D6A0

Color 4#40E0D0

Color 5#EF476F

Accessibility

Contrast checker

1.8:1Fail

1.4:1Fail

1.7:1Fail

1.3:1Fail

1.8:1Fail

1.2:1Fail

1.1:1Fail

2.4:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1.9:1Fail

1.7:1Fail

1.1:1Fail

2.2:1Fail

1.3:1Fail

2.4:1Fail

1.9:1Fail

2.2:1Fail

Similar palettes

More like Reef Jewel Bloom

Reef Jewel Bloom

See it in context.

Ready when you are.

Built with Reef Jewel Bloom.

How to use Reef Jewel Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Vibrant Pop

Reef Depth

Energetic Cards

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Reef Jewel Bloom