Palette

Coral Reef Sanctuary

A lively mix of pinks, oranges, and aquas, celebrating the diverse and vibrant ecosystem of a 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 Sanctuary 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 Sanctuary.

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

Data visualization

#FF6F61#FFAD69#FFE478#90D5CB#4F9ECB

Palette guide

How to use Coral Reef Sanctuary

Overview

The Coral Reef Sanctuary palette is a lively and harmonious collection, blending warm pinks and oranges with cool aquas, reminiscent of a vibrant underwater world. This palette features the inviting Living Coral #FF6F61, the sunny Peach #FFAD69, and a bright Mellow Yellow #FFE478, beautifully complemented by the refreshing Turquoise #90D5CB and a deeper Cerulean #4F9ECB. It's an excellent choice for designs that aim to convey energy, natural beauty, and tropical cheer, making it highly versatile for web design, branding, and creative projects that need a splash of life.

Best used for

Marine conservation websites
Children's educational content
Summer fashion branding
Travel and tourism marketing
Packaging for natural products
Event invitations with a tropical theme

Suggested color roles

primary

Use Living Coral #FF6F61 for key headings or interactive elements to create a focal point.

secondary

Peach #FFAD69 can support primary elements or be used for sub-sections, adding warmth.

accent

Cerulean #4F9ECB provides a strong, cool contrast for highlights or important details.

background

Mellow Yellow #FFE478 offers a bright, cheerful base that keeps the design light.

text

A dark blue like #4F9ECB or deep charcoal provides good contrast against lighter backgrounds.

Accessibility notes

#FFE478 will require dark text for readability; avoid white text.
Living Coral #FF6F61 and Peach #FFAD69 may have insufficient contrast with white text for WCAG AA.
Ensure adequate contrast between #90D5CB and #4F9ECB if used in proximity.
Always test color combinations for text and interactive elements.

Recommended combinations

Sunset Glow

Perfect for warm gradients, banners, or elements evoking a sunlit, energetic feel.

#FF6F61 · #FFAD69 · #FFE478

Ocean Depths

Ideal for creating depth and contrast, suitable for navigation or background patterns.

#90D5CB · #4F9ECB · #FF6F61

Bright Accents

Use for calls-to-action, icons, or graphic details that need to pop.

#FFE478 · #4F9ECB · #FFAD69

CSS variables

:root {
  --coral-reef-sanctuary-1: #FF6F61;
  --coral-reef-sanctuary-2: #FFAD69;
  --coral-reef-sanctuary-3: #FFE478;
  --coral-reef-sanctuary-4: #90D5CB;
  --coral-reef-sanctuary-5: #4F9ECB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-sanctuary": {
        1: "#FF6F61",
        2: "#FFAD69",
        3: "#FFE478",
        4: "#90D5CB",
        5: "#4F9ECB",
      }
    }
  }
}

Hex values

Color 1#FF6F61

Color 2#FFAD69

Color 3#FFE478

Color 4#90D5CB

Color 5#4F9ECB

Accessibility

Contrast checker

1.5:1Fail

2.2:1Fail

1.6:1Fail

1.1:1Fail

1.5:1Fail

1.1:1Fail

1.6:1Fail

2.2:1Fail

1.5:1Fail

1.3:1Fail

2.3:1Fail

1.6:1Fail

1.1:1Fail

1.3:1Fail

1.8:1Fail

1.1:1Fail

1.6:1Fail

2.3:1Fail

1.8:1Fail

Similar palettes

More like Coral Reef Sanctuary

Coral Reef Sanctuary

See it in context.

Ready when you are.

Built with Coral Reef Sanctuary.

How to use Coral Reef Sanctuary

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunset Glow

Ocean Depths

Bright Accents

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coral Reef Sanctuary