Back to palettes

Palette

Ocean Coral Sunset

Captures the dramatic shift of colors as the sun dips below a vibrant coral reef, warm and cool.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF6B6B#FFA07A#FFD700#4682B4#20B2AA

Palette guide

How to use Ocean Coral Sunset

Overview

The Ocean Coral Sunset palette dramatically captures the vivid shift of colors as the sun dips below a vibrant coral reef, blending warm and cool tones. It features the fiery #FF6B6B (Salmon Red) and #FFA07A (Light Salmon) alongside the sunny #FFD700 (Gold). These warm hues are beautifully contrasted by the serene #4682B4 (Steel Blue) and the refreshing #20B2AA (Light Sea Green). This collection is perfect for designs seeking to evoke energy, warmth, and the beauty of natural phenomena. Designers and developers can use it for travel brands, event promotions, or any project aiming for a dynamic and visually rich aesthetic.

Best used for

  • Tropical travel agency branding
  • Summer festival promotions
  • Beach resort websites
  • Event and party invitations
  • Food and beverage marketing
  • Nature photography showcases

Suggested color roles

primary

Use #4682B4 as a stable, grounding primary color, representing the deep ocean as the sun sets.

secondary

Employ #FF6B6B for energetic secondary elements, calls-to-action, or headers to capture attention.

accent

Apply #FFD700 for brilliant highlights, interactive states, or to symbolize sunlight and warmth.

background

A lighter, neutral background or a soft gradient incorporating #FFA07A and #20B2AA can create an inviting canvas.

text

On lighter backgrounds, a dark charcoal or black is best. On #4682B4 or #20B2AA, use white or #FFA07A for clear readability.

Accessibility notes

  • Ensure sufficient contrast for text. White text on #4682B4 or #20B2AA provides good readability.
  • Be cautious with #FFD700 text on #FFA07A backgrounds; contrast may be too low for body text.
  • Use #FF6B6B and #FFA07A primarily as accents or for larger headings to ensure visibility.
  • For body text on lighter areas, a dark neutral color (e.g., black or charcoal) is recommended for WCAG compliance.

Recommended combinations

Sunset Glow

Creates a warm, vibrant gradient, perfect for hero banners, brand logos, or energetic graphic elements.

#FF6B6B · #FFA07A · #FFD700

Ocean Contrast

Combines the cool depths of the ocean with a striking coral accent, ideal for balanced, dynamic layouts.

#4682B4 · #20B2AA · #FF6B6B

Tropical Harmony

A harmonious blend of warm and cool, excellent for illustrations, data visualization, or layered content blocks.

#FFA07A · #FFD700 · #20B2AA

CSS variables

:root {
  --ocean-coral-sunset-1: #FF6B6B;
  --ocean-coral-sunset-2: #FFA07A;
  --ocean-coral-sunset-3: #FFD700;
  --ocean-coral-sunset-4: #4682B4;
  --ocean-coral-sunset-5: #20B2AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-coral-sunset": {
        1: "#FF6B6B",
        2: "#FFA07A",
        3: "#FFD700",
        4: "#4682B4",
        5: "#20B2AA",
      }
    }
  }
}

Related searches

coral sunset color schemetropical vibrant palettewarm and cool ocean colorsenergetic beach palettedramatic marine colors

Palette colors

Hex values

Color 1#FF6B6B
·
Color 2#FFA07A
·
Color 3#FFD700
·
Color 4#4682B4
·
Color 5#20B2AA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
1.5:1Fail
1.1:1Fail
2
1.4:1Fail
1.4:1Fail
2.1:1Fail
1.3:1Fail
3
2:1Fail
1.4:1Fail
2.9:1Fail
1.9:1Fail
4
1.5:1Fail
2.1:1Fail
2.9:1Fail
1.6:1Fail
5
1.1:1Fail
1.3:1Fail
1.9:1Fail
1.6:1Fail

Similar palettes

More like Ocean Coral Sunset

View all vibrant
Coral Reef Dawn
Electric Coral Reef
Tropic Coral Reef
Coral Garden Bloom
Coral Reef Bloom
Coral Reef Bloom