Palette

Reef Coral Blossom

A vivid, flourishing collection of warm pinks and reds found in a healthy coral reef.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF5A5F#FF8A8A#FFA3A3#FFC0C0#FFE0E0

Palette guide

How to use Reef Coral Blossom

Overview

The Reef Coral Blossom palette is a vivid, flourishing collection of warm pinks and reds, reminiscent of a healthy coral reef. Featuring bright #FF5A5F, softer #FF8A8A, and delicate #FFE0E0, this palette offers a playful yet cohesive range of coral tones. Designers and developers can use these hex codes to infuse projects with a vibrant, tropical, and inviting energy. It's perfect for applications requiring a cheerful and lively aesthetic, from e-commerce sites selling summer fashion to whimsical digital illustrations. The harmonious progression of shades ensures a soft visual flow while maintaining an energetic core.

Best used for

Summer fashion e-commerce websites
Children's book illustrations or toy branding
Tropical resort marketing materials
Beauty and cosmetic product packaging
Playful mobile app interfaces
Event branding for lively, outdoor gatherings

Suggested color roles

primary

Use #FF5A5F as a dominant, energetic color for calls-to-action, main headings, or impactful graphic elements.

secondary

Employ #FF8A8A for secondary content blocks, interactive buttons, or background sections that need warmth.

accent

The vibrant #FF5A5F naturally serves as a powerful accent, drawing immediate attention to key features.

background

The lightest shade, #FFE0E0, provides a soft, airy background that allows darker text and elements to pop.

text

For text on lighter backgrounds like #FFE0E0, use a dark charcoal or black. For text on #FF5A5F, white or a very light pink provides contrast.

Accessibility notes

Ensure sufficient contrast when using lighter coral shades like #FFA3A3 for text against #FFE0E0 backgrounds.
Pair the most vibrant color, #FF5A5F, with white text for optimal readability and WCAG AA compliance.
Avoid using two very similar light pinks for text and background to prevent legibility issues.
Consider larger font sizes or bolding for text set in mid-range colors like #FFC0C0 to improve contrast.

Recommended combinations

Vibrant Bloom

Creates a lively hero section, with a bold coral focal point against a soft, breathable background.

#FF5A5F · #FFE0E0 · #FF8A8A

Gentle Gradient

Ideal for subtle background transitions or layering UI elements with harmonious color shifts.

#FF8A8A · #FFA3A3 · #FFC0C0

Coral Pop

Use for cards or interactive elements where a light base supports a strong, attention-grabbing accent.

#FFE0E0 · #FF5A5F · #FFC0C0

CSS variables

:root {
  --reef-coral-blossom-1: #FF5A5F;
  --reef-coral-blossom-2: #FF8A8A;
  --reef-coral-blossom-3: #FFA3A3;
  --reef-coral-blossom-4: #FFC0C0;
  --reef-coral-blossom-5: #FFE0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "reef-coral-blossom": {
        1: "#FF5A5F",
        2: "#FF8A8A",
        3: "#FFA3A3",
        4: "#FFC0C0",
        5: "#FFE0E0",
      }
    }
  }
}

Hex values

Color 1#FF5A5F

Color 2#FF8A8A

Color 3#FFA3A3

Color 4#FFC0C0

Color 5#FFE0E0

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

2:1Fail

2.5:1Fail

1.3:1Fail

1.2:1Fail

1.5:1Fail

1.8:1Fail

1.6:1Fail

1.2:1Fail

1.5:1Fail

2:1Fail

1.5:1Fail

1.2:1Fail

1.3:1Fail

2.5:1Fail

1.8:1Fail

1.5:1Fail

1.3:1Fail

Similar palettes

More like Reef Coral Blossom

Reef Coral Blossom

See it in context.

Ready when you are.

Built with Reef Coral Blossom.

How to use Reef Coral Blossom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Vibrant Bloom

Gentle Gradient

Coral Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Reef Coral Blossom