Palette

Horizon Sunset Sail

A dramatic oceanic sunset, where warm skies meet cool waters in a dazzling display of color.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Horizon Sunset Sail 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 Horizon Sunset Sail.

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

Data visualization

#E04F2F#FF8C42#FFC87E#2A9D8F#0F4C5C

Palette guide

How to use Horizon Sunset Sail

Overview

The "Horizon Sunset Sail" palette embodies the dramatic beauty of a sunset over the ocean, blending fiery warmth with serene cool tones. Featuring a vibrant spectrum from the intense #E04F2F and energetic #FF8C42 to the soft #FFC87E, it beautifully contrasts with the refreshing #2A9D8F and deep, grounding #0F4C5C. This energetic palette offers designers and developers a versatile foundation for projects requiring a sense of adventure, warmth, and dramatic flair. Its rich hues are perfect for creating engaging visual narratives across branding, digital interfaces, and print media, evoking both excitement and tranquility.

Best used for

Travel agency branding and websites
Summer event promotions and marketing materials
Tropical resort and hospitality design
Dynamic UI dashboards and interactive experiences
Outdoor adventure and lifestyle product packaging
Children's book illustrations and educational apps

Suggested color roles

primary

#E04F2F. Use this bold, fiery orange-red for dominant calls-to-action, key branding elements, or hero section headlines to command immediate attention.

secondary

#2A9D8F. This calming teal provides a refreshing counterpoint, ideal for supporting navigation, secondary buttons, or data visualizations that need to stand out against warmer tones.

accent

#FFC87E. Employ this soft, luminous peach for subtle highlights, interactive states like hover effects, or decorative elements that add a touch of warmth and brightness without overpowering.

background

#0F4C5C. A deep, anchoring ocean blue, perfect for dark mode interfaces, footer sections, or as a sophisticated backdrop that allows the brighter colors to truly pop.

text

For maximum readability on dark backgrounds like #0F4C5C, use white or a very light gray. For text on lighter colors, #0F4C5C provides excellent contrast for headlines, while a charcoal gray can work for body text.

Accessibility notes

Ensure sufficient contrast when using #FFC87E for text or small elements; it will require very dark text (e.g., #0F4C5C) to meet WCAG AA standards.
The contrast between #E04F2F and #FF8C42 is low; avoid using them together for critical text or interactive elements without careful checking.
#0F4C5C offers excellent contrast for light text, making it a strong choice for primary text on light backgrounds or background elements in dark mode.
Always test color combinations for readability, especially for users with color vision deficiencies, using a reliable contrast checker.

Recommended combinations

Fiery Horizon

Ideal for high-energy hero sections, urgent calls-to-action, or vibrant marketing banners that demand immediate attention.

#E04F2F · #FF8C42 · #FFC87E

Oceanic Depth

Excellent for sophisticated branding, impactful data visualizations, or creating a dramatic dark UI theme with contrasting warm accents.

#0F4C5C · #2A9D8F · #E04F2F

Sunset Glow

Use for softer, more inviting background patterns, subtle UI elements, or content aimed at a younger audience, evoking warmth and playfulness.

#FFC87E · #2A9D8F · #FF8C42

CSS variables

:root {
  --horizon-sunset-sail-1: #E04F2F;
  --horizon-sunset-sail-2: #FF8C42;
  --horizon-sunset-sail-3: #FFC87E;
  --horizon-sunset-sail-4: #2A9D8F;
  --horizon-sunset-sail-5: #0F4C5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "horizon-sunset-sail": {
        1: "#E04F2F",
        2: "#FF8C42",
        3: "#FFC87E",
        4: "#2A9D8F",
        5: "#0F4C5C",
      }
    }
  }
}

Hex values

Color 1#E04F2F

Color 2#FF8C42

Color 3#FFC87E

Color 4#2A9D8F

Color 5#0F4C5C

Accessibility

Contrast checker

1.7:1Fail

2.6:1Fail

1.2:1Fail

2.4:1Fail

1.7:1Fail

1.5:1Fail

1.4:1Fail

4.1:1AA18

2.6:1Fail

1.5:1Fail

2.2:1Fail

6.3:1AA

1.2:1Fail

1.4:1Fail

2.2:1Fail

2.9:1Fail

2.4:1Fail

4.1:1AA18

6.3:1AA

2.9:1Fail

Similar palettes

More like Horizon Sunset Sail

View all vibrant

Crimson Horizon Blaze

Coastal Sunset Blaze

Fiery Sunset Chroma

Fiesta Sunset

Tropic Horizon Splash

Tropical Sunset Blaze