Palette

Sunset City Rooftops

Fiery oranges and deep reds paint the sky above a silhouette of city rooftops during a dramatic sunset.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunset City Rooftops 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 Sunset City Rooftops.

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

Data visualization

#5A1A2B#8D2C3E#C04A5D#E07D70#FFB2A8

Palette guide

How to use Sunset City Rooftops

Overview

The "Sunset City Rooftops" palette is a dramatic and sophisticated collection, capturing the fiery oranges and deep reds that paint the urban sky at dusk. It ranges from the profound depth of #5A1A2B and the rich intensity of #8D2C3E, through the vibrant #C04A5D and the softer #E07D70, culminating in the delicate glow of #FFB2A8. This palette is ideal for designers seeking to evoke a sense of urban elegance, passion, or modern drama. Developers can effectively apply these hues to create engaging interfaces for luxury brands, high-end fashion, cultural events, or any digital product aiming for a sleek, energetic, and visually compelling presence.

Best used for

Luxury brand websites and apps
High-end fashion and cosmetics
Urban lifestyle blogs and magazines
Event promotion (galas, art exhibitions)
Modern architectural portfolios
Sophisticated entertainment platforms

Suggested color roles

primary

#8D2C3E (A deep, sophisticated maroon, perfect for main branding, elegant headlines, or prominent calls to action.)

secondary

#C04A5D (A vibrant rose red, excellent for supporting graphical elements, interactive components, or subheadings, adding energy.)

accent

#5A1A2B (A very deep, rich burgundy, providing a strong, luxurious accent for important icons, selected text, or sophisticated details.)

background

#FFB2A8 (A very light, warm peach-pink, offering a soft, ethereal background that allows the deeper reds to truly glow.)

text

#5A1A2B (For dark, readable text against light backgrounds, or a deep charcoal for general body copy, ensuring excellent legibility.)

Accessibility notes

Ensure sufficient contrast between lighter shades like #E07D70 or #FFB2A8 and any overlaid text.
The contrast between #C04A5D and #E07D70 might be low for small text; reserve for larger elements.
#5A1A2B and #8D2C3E provide excellent contrast for white or very light text, suitable for headlines or buttons.
Avoid using adjacent red-pink shades for critical interactive elements without clear differentiation.

Recommended combinations

Urban Radiance

Creates a warm, inviting glow. #8D2C3E for strong elements, #E07D70 for mid-tones, and #FFB2A8 as a soft, expansive background.

#8D2C3E · #E07D70 · #FFB2A8

Rooftop Drama

For powerful, sophisticated visuals. #5A1A2B for depth, #C04A5D for vibrant focal points, and #E07D70 for subtle highlights.

#5A1A2B · #C04A5D · #E07D70

Sunset Blush

Offers elegant contrast and warmth. #C04A5D for energetic accents, #8D2C3E for grounding, and #FFB2A8 for clean, airy areas.

#C04A5D · #8D2C3E · #FFB2A8

CSS variables

:root {
  --sunset-city-rooftops-1: #5A1A2B;
  --sunset-city-rooftops-2: #8D2C3E;
  --sunset-city-rooftops-3: #C04A5D;
  --sunset-city-rooftops-4: #E07D70;
  --sunset-city-rooftops-5: #FFB2A8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunset-city-rooftops": {
        1: "#5A1A2B",
        2: "#8D2C3E",
        3: "#C04A5D",
        4: "#E07D70",
        5: "#FFB2A8",
      }
    }
  }
}

Hex values

Color 1#5A1A2B

Color 2#8D2C3E

Color 3#C04A5D

Color 4#E07D70

Color 5#FFB2A8

Accessibility

Contrast checker

1.6:1Fail

2.7:1Fail

4.5:1AA

7.5:1AAA

1.6:1Fail

1.7:1Fail

2.9:1Fail

4.8:1AA

2.7:1Fail

1.7:1Fail

2.8:1Fail

4.5:1AA

2.9:1Fail

1.7:1Fail

7.5:1AAA

4.8:1AA

2.8:1Fail

1.7:1Fail

Similar palettes

More like Sunset City Rooftops

Sunset City Rooftops

See it in context.

Ready when you are.

Built with Sunset City Rooftops.

How to use Sunset City Rooftops

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Urban Radiance

Rooftop Drama

Sunset Blush

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sunset City Rooftops