Back to palettes

Palette

Coral Reef Sunset

Capturing the vibrant transition of colors as the sun dips below a warm coral-filled sea.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF6B6B#FFC75F#FFE7B3#A2D6F9#56A8F0

Palette guide

How to use Coral Reef Sunset

Overview

The Coral Reef Sunset palette beautifully captures the vibrant transition of colors as the sun dips below a warm coral-filled sea. It features a passionate bright red #FF6B6B, a sunny Goldenrod #FFC75F, and a soft pale #FFE7B3, creating a radiant sunset effect. These warm hues are perfectly complemented by a light Sky Blue #A2D6F9 and a vibrant Dodger Blue #56A8F0, reflecting the clear, deepening waters. This palette is ideal for energetic and inviting designs, perfect for travel, summer themes, or any project needing a lively, tropical feel.

Best used for

  • Summer festival branding
  • Tropical vacation advertisements
  • Children's book illustrations
  • Beach-themed product packaging
  • Lively website headers
  • Social media graphics for sunny destinations

Suggested color roles

primary

Use Dodger Blue #56A8F0 for main navigation or foundational elements, providing a strong, clear presence.

secondary

Bright red #FF6B6B can be used for calls-to-action or important headings, adding a dynamic pop.

accent

Goldenrod #FFC75F provides a cheerful highlight for details or interactive elements.

background

The pale #FFE7B3 offers a warm, luminous base that allows other colors to shine.

text

A dark blue or deep charcoal ensures excellent readability against the lighter background tones.

Accessibility notes

  • #FFE7B3 and #A2D6F9 are very light; rely on dark text for readability.
  • Bright red #FF6B6B and Goldenrod #FFC75F may not meet WCAG AA contrast with white text.
  • Ensure #56A8F0 has sufficient contrast when used for text on lighter backgrounds.
  • Always test color combinations for text and interactive elements.

Recommended combinations

Sunset Radiance

Ideal for warm gradients, banners, or elements evoking a sun-drenched, energetic feel.

#FF6B6B · #FFC75F · #FFE7B3

Ocean Twilight

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

#A2D6F9 · #56A8F0 · #FFC75F

Vibrant Pop

Use for energetic calls-to-action or graphic elements that need to stand out.

#FF6B6B · #56A8F0 · #FFE7B3

CSS variables

:root {
  --coral-reef-sunset-1: #FF6B6B;
  --coral-reef-sunset-2: #FFC75F;
  --coral-reef-sunset-3: #FFE7B3;
  --coral-reef-sunset-4: #A2D6F9;
  --coral-reef-sunset-5: #56A8F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-sunset": {
        1: "#FF6B6B",
        2: "#FFC75F",
        3: "#FFE7B3",
        4: "#A2D6F9",
        5: "#56A8F0",
      }
    }
  }
}

Related searches

coral blue sunset palettevibrant summer colorstropical ocean schemebright beach designenergetic marine palette

Palette colors

Hex values

Color 1#FF6B6B
·
Color 2#FFC75F
·
Color 3#FFE7B3
·
Color 4#A2D6F9
·
Color 5#56A8F0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.3:1Fail
1.8:1Fail
1.1:1Fail
2
1.8:1Fail
1.3:1Fail
1:1Fail
1.6:1Fail
3
2.3:1Fail
1.3:1Fail
1.3:1Fail
2.1:1Fail
4
1.8:1Fail
1:1Fail
1.3:1Fail
1.6:1Fail
5
1.1:1Fail
1.6:1Fail
2.1:1Fail
1.6:1Fail

Similar palettes

More like Coral Reef Sunset

View all vibrant
Coral Reef Dawn
Coral Reef Bloom
Coral Reef Bloom
Coral Reef Dawn
Coral Reef Dawn
Coral Reef Harmony