Back to palettes

Palette

Vivid Horizon

Witness the breathtaking spectrum of colors painted across the sky as the sun dips below the horizon.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF7F50#DC143C#FF007F#00BFFF#FFFF00

Palette guide

How to use Vivid Horizon

Overview

The Vivid Horizon palette captures the exhilarating energy of a dramatic sunset, brimming with bold and contrasting hues. Featuring the fiery orange of #FF7F50, the deep crimson of #DC143C, the striking magenta of #FF007F, the clear blue of #00BFFF, and the bright yellow of #FFFF00, this collection is designed for maximum impact. Designers can use this palette to create dynamic, energetic, and visually stimulating projects that demand attention. Developers will find these hex codes perfect for vibrant marketing campaigns, event promotions, or any digital platform seeking a lively and unforgettable aesthetic. This palette is all about boldness and expressive visual storytelling.

Best used for

  • Event promotion and posters
  • Youth-oriented branding and websites
  • Creative agency portfolios
  • Digital art and illustrations with high energy
  • Festive holiday designs
  • Sports team branding

Suggested color roles

primary

Use #DC143C or #FF007F for dominant elements, creating a strong, energetic focal point.

secondary

Employ #FF7F50 for supporting sections or subheadings, adding warmth and vibrancy.

accent

Highlight key information or interactive states with #FFFF00 or #00BFFF, providing sharp, attention-grabbing contrasts.

background

For a neutral base, consider a very dark gray or black to make all colors pop. For a lighter approach, use a near-white.

text

Pair bright colors with black or white for optimal readability. For example, white text on #DC143C or black text on #FFFF00.

Accessibility notes

  • Be cautious with color combinations like #FF7F50 on #FFFF00 or #DC143C on #FF007F for text due to low contrast.
  • Ensure all text and interactive elements meet WCAG contrast guidelines, likely requiring black or white text.
  • Avoid relying solely on color to convey information due to the high vibrancy and potential for colorblindness issues.
  • Use distinct color pairings for interactive states (e.g., hover, active) to ensure clarity.

Recommended combinations

Sunset Pop

Striking combination for headlines, calls-to-action, and vibrant graphic elements.

#DC143C · #FFFF00 · #00BFFF

Fiery Contrast

Great for energetic gradients, bold illustrations, and impactful branding.

#FF7F50 · #FF007F · #DC143C

Vivid Sky

Ideal for dynamic backgrounds, playful interfaces, and highlighting key features.

#00BFFF · #FFFF00 · #FF7F50

CSS variables

:root {
  --vivid-horizon-1: #FF7F50;
  --vivid-horizon-2: #DC143C;
  --vivid-horizon-3: #FF007F;
  --vivid-horizon-4: #00BFFF;
  --vivid-horizon-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vivid-horizon": {
        1: "#FF7F50",
        2: "#DC143C",
        3: "#FF007F",
        4: "#00BFFF",
        5: "#FFFF00",
      }
    }
  }
}

Related searches

vibrant sunset color schemeenergetic bright palettebold contrasting colorscolorful event designhigh impact web colors

Palette colors

Hex values

Color 1#FF7F50
·
Color 2#DC143C
·
Color 3#FF007F
·
Color 4#00BFFF
·
Color 5#FFFF00
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
1.5:1Fail
1.2:1Fail
2.3:1Fail
2
2:1Fail
1.3:1Fail
2.4:1Fail
4.6:1AA
3
1.5:1Fail
1.3:1Fail
1.8:1Fail
3.5:1AA18
4
1.2:1Fail
2.4:1Fail
1.8:1Fail
2:1Fail
5
2.3:1Fail
4.6:1AA
3.5:1AA18
2:1Fail

Similar palettes

More like Vivid Horizon

View all vibrant