Palette

Sunrise Peak Ascent

Inspired by a dramatic mountain sunrise, with warm glow against cool, rugged peaks and grey skies.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunrise Peak Ascent 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 Sunrise Peak Ascent.

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

Data visualization

#F06449#F5D7B7#A8A8A8#4C5E6B#273238

Palette guide

How to use Sunrise Peak Ascent

Overview

The "Sunrise Peak Ascent" palette captures the dramatic beauty of a mountain sunrise, blending warm glows with cool, rugged tones. This earthy and balanced collection features a striking coral-red (#F06449), a soft, sandy beige (#F5D7B7), a neutral medium gray (#A8A8A8), a deep slate blue-gray (#4C5E6B), and a profound charcoal gray (#273238). It's an excellent choice for designers and developers aiming to create sophisticated, natural, or rugged designs that convey a sense of adventure, strength, and grounding. The contrast between the warm sunrise hues and the cool mountain grays offers rich possibilities for creating compelling visual narratives and immersive user experiences across various digital and print mediums.

Best used for

Outdoor gear and apparel brands
Travel and adventure blogs
Photography and nature portfolios
Masculine or industrial design aesthetics
Automotive or heavy machinery websites
Eco-tourism marketing materials

Suggested color roles

primary

Use #F06449 (Striking Coral-Red) for calls to action, prominent headlines, or elements needing a powerful, warm accent.

secondary

Apply #4C5E6B (Deep Slate Blue-Gray) for main content areas, navigation, or strong brand elements, providing a cool, stable foundation.

accent

Employ #A8A8A8 (Neutral Medium Gray) for subtle highlights, borders, or secondary information, offering balance and sophistication.

background

Utilize #F5D7B7 (Soft Sandy Beige) as a warm, light background that provides a clean, natural canvas and allows the bolder colors to stand out.

text

A very dark, almost black, text color like #273238 (Profound Charcoal Gray) offers superb readability and complements the rugged feel of the palette.

Accessibility notes

Text in #273238 or #4C5E6B on #F5D7B7 backgrounds will provide excellent contrast and readability.
#F06449 as text on #F5D7B7 should be large or bold to ensure readability for headlines and important information.
Avoid using #A8A8A8 for small text on #F5D7B7 due to potential low contrast, especially for body text.
Always check WCAG 2.1 AA compliance for all text and interactive elements to ensure universal access and legibility.

Recommended combinations

Mountain Dawn

A dramatic contrast of warm and cool, perfect for striking hero images, adventure branding, or compelling website layouts.

#F06449 · #4C5E6B · #F5D7B7

Rugged Horizon

Emphasizes the cool, earthy grays, ideal for clean, masculine interfaces, technical documentation, or sophisticated dark themes.

#273238 · #A8A8A8 · #4C5E6B

Ascent Path

Uses the light background with a vibrant accent and dark text, suitable for clear, engaging content layouts and strong visual hierarchy.

#F5D7B7 · #F06449 · #273238

CSS variables

:root {
  --sunrise-peak-ascent-1: #F06449;
  --sunrise-peak-ascent-2: #F5D7B7;
  --sunrise-peak-ascent-3: #A8A8A8;
  --sunrise-peak-ascent-4: #4C5E6B;
  --sunrise-peak-ascent-5: #273238;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunrise-peak-ascent": {
        1: "#F06449",
        2: "#F5D7B7",
        3: "#A8A8A8",
        4: "#4C5E6B",
        5: "#273238",
      }
    }
  }
}

Hex values

Color 1#F06449

Color 2#F5D7B7

Color 3#A8A8A8

Color 4#4C5E6B

Color 5#273238

Accessibility

Contrast checker

2.3:1Fail

1.3:1Fail

2.1:1Fail

4.1:1AA18

2.3:1Fail

1.7:1Fail

4.9:1AA

9.6:1AAA

1.3:1Fail

1.7:1Fail

2.8:1Fail

5.5:1AA

2.1:1Fail

4.9:1AA

2.8:1Fail

2:1Fail

4.1:1AA18

9.6:1AAA

5.5:1AA

2:1Fail

Similar palettes

More like Sunrise Peak Ascent

View all earth

Boho Trailblazer Hues