Palette

Horizon Inferno Sky

Blazing reds and fiery oranges depicting an intense, vibrant sunset consuming the horizon.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#DC143C#FF4500#FF8C00#FFA07A

Palette guide

How to use Horizon Inferno Sky

Overview

The Horizon Inferno Sky palette captures the intense beauty of a fiery sunset, blending deep reds with vibrant oranges. Dominated by powerful hues like the rich #8B0000 and dynamic #DC143C, it evokes a sense of drama and energy. Complementary tones such as the blazing #FF4500 and warm #FF8C00 add depth, while the softer #FFA07A provides a gentle counterpoint, reminiscent of the last glow. This palette is ideal for projects requiring a strong visual impact and an energetic mood. Designers can leverage its warmth for striking calls to action or immersive branding, while developers will appreciate the clear hierarchy these bold colors offer for UI elements and data visualization.

Best used for

High-energy digital marketing campaigns
Gaming interfaces and branding
Event promotion and concert visuals
Food and beverage branding (spicy, vibrant)
Sports team branding and merchandise
Dramatic website hero sections

Suggested color roles

primary

#DC143C - A bold, central hue for main branding elements, hero sections, and key calls-to-action, demanding immediate attention.

secondary

#8B0000 - Provides a strong, deep foundation. Excellent for navigation backgrounds, footers, or to add gravitas to primary elements.

accent

#FF4500 - A vibrant, attention-grabbing accent for interactive elements, highlights, or urgent notifications, creating strong contrast.

background

#FFA07A - A warm, soft background for content areas, providing a gentle canvas that allows darker text to remain legible, or for subtle overlays.

text

For optimal legibility, use a dark charcoal or near-black text color like #333333 against lighter shades, or crisp white (#FFFFFF) against the deeper reds like #8B0000 and #DC143C.

Accessibility notes

Ensure sufficient contrast when pairing any of the brighter oranges (#FF4500, #FF8C00, #FFA07A) with light text; aim for WCAG AA or AAA.
Avoid placing #DC143C or #8B0000 directly on a pure black background without adequate text sizing, as it can cause vibration.
Use #FFA07A as a background only for very dark text (e.g., #333333 or #000000) to maintain readability.
Be mindful of color blindness; use alternative indicators beyond color alone for critical information, especially with similar red/orange tones.

Recommended combinations

Bold & Energetic

Dynamic calls to action, urgent alerts, game UI elements, or striking headlines.

#DC143C · #FF4500 · #8B0000

Warm Gradient

Background gradients, subtle highlights, or illustrative elements that need a fiery, smooth transition.

#FF8C00 · #FFA07A · #FF4500

Deep Contrast

Strong branding, primary content blocks with clear distinction, or navigation bars where #FFA07A serves as a highlight.

#8B0000 · #FFA07A · #DC143C

CSS variables

:root {
  --horizon-inferno-sky-1: #8B0000;
  --horizon-inferno-sky-2: #DC143C;
  --horizon-inferno-sky-3: #FF4500;
  --horizon-inferno-sky-4: #FF8C00;
  --horizon-inferno-sky-5: #FFA07A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "horizon-inferno-sky": {
        1: "#8B0000",
        2: "#DC143C",
        3: "#FF4500",
        4: "#FF8C00",
        5: "#FFA07A",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#DC143C

Color 3#FF4500

Color 4#FF8C00

Color 5#FFA07A

Accessibility

Contrast checker

2:1Fail

2.9:1Fail

4.3:1AA18

5:1AA

2:1Fail

1.5:1Fail

2.1:1Fail

2.5:1Fail

2.9:1Fail

1.5:1Fail

1.7:1Fail

4.3:1AA18

2.1:1Fail

1.5:1Fail

1.2:1Fail

5:1AA

2.5:1Fail

1.7:1Fail

1.2:1Fail

Similar palettes

More like Horizon Inferno Sky

Horizon Inferno Sky

See it in context.

Ready when you are.

Built with Horizon Inferno Sky.

How to use Horizon Inferno Sky

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Bold & Energetic

Warm Gradient

Deep Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Horizon Inferno Sky