Palette

Reef Radiance

A vibrant burst of warm coral tones, evoking the bright, lively glow of sunlit underwater reefs.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF6F61#FF9F93#FFCFC7#E66055#FF8F83

Palette guide

How to use Reef Radiance

Overview

The Reef Radiance palette is a vibrant burst of warm coral tones, evoking the bright, lively glow of sunlit underwater reefs. With a focus on harmonious red-orange shades like #FF6F61, #FF9F93, and #FF8F83, this collection provides a cohesive yet energetic aesthetic. The inclusion of #FFCFC7 offers a softer, breathable counterpart, while #E66055 adds a slightly deeper, more grounded hue. This palette is perfect for designers and developers looking to inject warmth, energy, and a touch of tropical charm into their projects. Its inviting nature makes it ideal for a wide range of applications, from digital interfaces to print media.

Best used for

Summer-themed marketing campaigns and websites
Beachwear or swimwear e-commerce sites
Tropical travel blogs and tourism materials
Food and beverage branding (e.g., fruit juices, cocktails)
Playful mobile app interfaces and game designs
Event branding for outdoor or festive gatherings

Suggested color roles

primary

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

secondary

Employ #FF9F93 for secondary content blocks, navigation, or interactive components, maintaining warmth.

accent

Apply #E66055 for a slightly deeper accent, providing emphasis without losing the palette's overall brightness.

background

The lightest shade, #FFCFC7, is ideal for clean, airy backgrounds that allow the vibrant corals to stand out.

text

For text on lighter backgrounds like #FFCFC7, use dark charcoal or black. For text on #FF6F61, white or a very light cream provides good contrast.

Accessibility notes

Ensure sufficient contrast between the lighter coral shades like #FFCFC7 and text, especially for body copy.
Pair the most vibrant colors (#FF6F61, #E66055) with pure white text for optimal WCAG AA compliance.
Avoid using similar light shades for text and background (e.g., #FF9F93 on #FFCFC7) to prevent legibility issues.
Consider larger font sizes or bolding for text set in mid-range colors like #FF8F83 to improve readability.

Recommended combinations

Sunny Glow

Creates a bright, inviting hero section, with a strong coral focal point against a soft background.

#FF6F61 · #FFCFC7 · #FF9F93

Coral Layers

Ideal for building visual depth in UI elements or illustrations, with a harmonious progression of coral tones.

#FF9F93 · #FF8F83 · #E66055

Radiant Accent

Useful for cards or interactive components, using a light base with two vibrant, complementary accents.

#FFCFC7 · #FF6F61 · #E66055

CSS variables

:root {
  --reef-radiance-1: #FF6F61;
  --reef-radiance-2: #FF9F93;
  --reef-radiance-3: #FFCFC7;
  --reef-radiance-4: #E66055;
  --reef-radiance-5: #FF8F83;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "reef-radiance": {
        1: "#FF6F61",
        2: "#FF9F93",
        3: "#FFCFC7",
        4: "#E66055",
        5: "#FF8F83",
      }
    }
  }
}

Hex values

Color 1#FF6F61

Color 2#FF9F93

Color 3#FFCFC7

Color 4#E66055

Color 5#FF8F83

Accessibility

Contrast checker

1.4:1Fail

1.9:1Fail

1.2:1Fail

1.4:1Fail

1.7:1Fail

1.1:1Fail

1.9:1Fail

1.4:1Fail

2.4:1Fail

1.6:1Fail

1.2:1Fail

1.7:1Fail

2.4:1Fail

1.5:1Fail

1.2:1Fail

1.1:1Fail

1.6:1Fail

1.5:1Fail

Similar palettes

More like Reef Radiance

Reef Radiance

See it in context.

Ready when you are.

Built with Reef Radiance.

How to use Reef Radiance

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunny Glow

Coral Layers

Radiant Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Reef Radiance