Palette

Tropic Horizon Splash

A lively burst of sunset hues and oceanic blues, mirroring a vibrant tropical horizon at dusk.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tropic Horizon Splash 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 Tropic Horizon Splash.

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

Data visualization

#FF6347#FFD700#3CB371#1E90FF#8A2BE2

Palette guide

How to use Tropic Horizon Splash

Overview

The Tropic Horizon Splash palette captures the dynamic beauty of a tropical horizon at dusk, bursting with sunset hues and oceanic blues. This vibrant collection features a fiery tomato red (#FF6347), a radiant gold (#FFD700), a refreshing seafoam green (#3CB371), an electric blue (#1E90FF), and a majestic purple (#8A2BE2). For designers and developers, this palette offers an energetic yet balanced spectrum, perfect for creating engaging interfaces, bold branding, or captivating digital art that evokes adventure and exhilaration. It's an excellent choice for projects demanding a lively, colorful, and memorable aesthetic.

Best used for

Travel and adventure brand websites
Summer festival and event promotions
Youth-focused product marketing
Digital art and illustration projects
Dynamic mobile app interfaces
Outdoor lifestyle and sportswear branding

Suggested color roles

primary

Use #1E90FF as a strong, anchoring primary for main navigation, key information, or core brand elements, representing the vast ocean.

secondary

Apply #FF6347 for secondary calls-to-action, important alerts, or energetic accents, symbolizing the vibrant sunset.

accent

Utilize #FFD700 for highlights, interactive elements, or small, attention-grabbing details, adding a bright, golden shimmer.

background

Employ a pure white ("#FFFFFF") or a very light gray ("#F5F5F5") to provide a clean canvas that allows the vibrant colors to truly pop.

text

A dark charcoal ("#333333") is recommended for main body text to ensure maximum legibility against the bright palette; #1E90FF can be used for headings.

Accessibility notes

Ensure sufficient contrast when using any of the vibrant colors for text on light backgrounds; avoid using them for long paragraphs.
Avoid pairing #FFD700 text with #FF6347 due to low contrast and poor readability.
Use a dark neutral color for body text to guarantee readability across diverse backgrounds.
Test interactive elements for sufficient contrast against their surrounding elements to ensure usability for all users.

Recommended combinations

Sunset Ocean

Ideal for striking headers, vibrant calls-to-action, or designs that capture a dynamic horizon blend.

#FF6347 · #1E90FF · #FFD700

Tropical Twilight

Great for creating depth and intrigue, suitable for backgrounds or sophisticated, energetic branding.

#1E90FF · #8A2BE2 · #3CB371

Vibrant Splash

Excellent for eye-catching promotional materials, event branding, or designs that need a bold, celebratory feel.

#FFD700 · #FF6347 · #8A2BE2

CSS variables

:root {
  --tropic-horizon-splash-1: #FF6347;
  --tropic-horizon-splash-2: #FFD700;
  --tropic-horizon-splash-3: #3CB371;
  --tropic-horizon-splash-4: #1E90FF;
  --tropic-horizon-splash-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropic-horizon-splash": {
        1: "#FF6347",
        2: "#FFD700",
        3: "#3CB371",
        4: "#1E90FF",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#FF6347

Color 2#FFD700

Color 3#3CB371

Color 4#1E90FF

Color 5#8A2BE2

Accessibility

Contrast checker

2.1:1Fail

1.1:1Fail

2:1Fail

2.1:1Fail

1.9:1Fail

2.3:1Fail

4.2:1AA18

1.1:1Fail

1.9:1Fail

1.2:1Fail

2.2:1Fail

1.1:1Fail

2.3:1Fail

1.2:1Fail

1.8:1Fail

2:1Fail

4.2:1AA18

2.2:1Fail

1.8:1Fail

Similar palettes

More like Tropic Horizon Splash

Tropic Horizon Splash

See it in context.

Ready when you are.

Built with Tropic Horizon Splash.

How to use Tropic Horizon Splash

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunset Ocean

Tropical Twilight

Vibrant Splash

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Tropic Horizon Splash