Palette

Urban Canyon Sunset

Vivid oranges and deep rusts capture the dramatic sky of a city sunset, reflecting off concrete canyons.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Canyon Sunset 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 Urban Canyon Sunset.

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

Data visualization

#F7DFD6#E8B088#CC7A44#A34E1D#7A2E0F

Palette guide

How to use Urban Canyon Sunset

Overview

The "Urban Canyon Sunset" palette vividly captures the dramatic sky of a city sunset, reflecting off concrete canyons with its energetic blend of oranges and deep rusts. From the soft, glowing #F7DFD6 (Peach Puff) to the intense #7A2E0F (Dark Terra Cotta), this palette progresses through #E8B088 (Light Salmon), #CC7A44 (Vivid Orange), and #A34E1D (Burnt Sienna). It's a highly dynamic and warm scheme, perfect for designs that aim to evoke excitement, passion, and a modern urban vibrancy. This palette is especially effective for projects requiring a bold, inviting, and memorable visual identity.

Best used for

Event promotion and festival branding
Food and beverage industry marketing
Travel and tourism websites, especially for city breaks
Youth-oriented fashion or lifestyle brands
Creative portfolios and digital art
Dynamic app interfaces requiring an energetic feel

Suggested color roles

primary

#7A2E0F (Dark Terra Cotta) - A powerful, grounding color for main headers, footers, or dominant sections, conveying strength and intensity.

secondary

#A34E1D (Burnt Sienna) - Excellent for subheadings, navigation, or larger content blocks, maintaining warmth and depth.

accent

#CC7A44 (Vivid Orange) - The perfect vibrant accent for call-to-action buttons, interactive elements, or key highlights, demanding attention.

background

#F7DFD6 (Peach Puff) - A soft, luminous background that provides excellent contrast for darker text and creates an inviting, airy feel.

text

#7A2E0F (Dark Terra Cotta) for dark text on lighter backgrounds, or a crisp white like #FFFFFF for text on #7A2E0F, #A34E1D, or #CC7A44.

Accessibility notes

Ensure #E8B088 or #CC7A44 has sufficient contrast when used for text against #F7DFD6.
Prioritize #7A2E0F for all critical text on lighter backgrounds for optimal readability.
Avoid using lighter shades like #F7DFD6 for small text on similar light backgrounds.
Always verify contrast ratios for interactive elements to ensure usability for all users.

Recommended combinations

Sunset Glow

Create soft, glowing gradients for hero sections or background elements, mimicking a vibrant sky.

#F7DFD6 · #E8B088 · #CC7A44

Deep Urban

Ideal for establishing a strong visual hierarchy in content blocks, moving from deep to soft tones.

#7A2E0F · #A34E1D · #E8B088

Energetic Action

Use for call-to-action buttons and corresponding hover states, providing a clear and engaging interaction.

#A34E1D · #CC7A44 · #F7DFD6

CSS variables

:root {
  --urban-canyon-sunset-1: #F7DFD6;
  --urban-canyon-sunset-2: #E8B088;
  --urban-canyon-sunset-3: #CC7A44;
  --urban-canyon-sunset-4: #A34E1D;
  --urban-canyon-sunset-5: #7A2E0F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-canyon-sunset": {
        1: "#F7DFD6",
        2: "#E8B088",
        3: "#CC7A44",
        4: "#A34E1D",
        5: "#7A2E0F",
      }
    }
  }
}

Hex values

Color 1#F7DFD6

Color 2#E8B088

Color 3#CC7A44

Color 4#A34E1D

Color 5#7A2E0F

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

4.5:1AA18

7.4:1AAA

1.5:1Fail

1.7:1Fail

3:1AA18

4.9:1AA

2.6:1Fail

1.7:1Fail

1.8:1Fail

2.9:1Fail

4.5:1AA18

3:1AA18

1.8:1Fail

1.6:1Fail

7.4:1AAA

4.9:1AA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Urban Canyon Sunset