Back to palettes

Palette

Starlight Canyon Views

Reflects the dramatic shift of colors in a canyon as the sun dips and stars begin to emerge, creating a majestic panorama.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starlight Canyon Views 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 Starlight Canyon Views.

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

Data visualization

#F1A3A3#F8CF87#B994A1#7C7381#514E69

Palette guide

How to use Starlight Canyon Views

Overview

The "Starlight Canyon Views" palette captures the serene yet dramatic transition from sunset glow to twilight's embrace across a vast landscape. With its warm, dusky tones, this collection offers a sophisticated and natural aesthetic. Designers can leverage the soft coral of #F1A3A3 and the muted gold of #F8CF87 for inviting primary elements, while the dusky rose #B994A1 provides a gentle secondary touch. The deeper hues, #7C7381 (a muted purple-grey) and #514E69 (a rich indigo-slate), anchor the palette, perfect for backgrounds or strong visual accents. This versatile set is ideal for projects aiming for an earthy, contemplative, or subtly luxurious feel, offering warmth without being overtly bright, and depth without being somber. It's excellent for creating immersive digital experiences or elegant print materials.

Best used for

  • Luxury travel branding and websites
  • Nature-inspired digital interfaces
  • Relaxation or wellness application design
  • High-end artisanal product packaging
  • Editorial layouts for lifestyle magazines
  • Interior design visualization and mood boards

Suggested color roles

primary

Use #F1A3A3 as a welcoming primary color for headers, call-to-action buttons, or main content blocks, evoking warmth and approachability.

secondary

Employ #B994A1 to complement the primary, ideal for subheadings, secondary buttons, or decorative elements, adding a touch of subtle elegance.

accent

Reserve #514E69 for impactful accents like icons, progress indicators, or subtle borders, providing depth and a strong visual anchor.

background

Utilize #7C7381 for rich, atmospheric backgrounds in sections where depth is desired, or as a footer color. For lighter backgrounds, consider off-white or a very desaturated version of #F8CF87.

text

For optimal readability, use a dark charcoal like #333333 on lighter palette colors, and pure white #FFFFFF on the darker shades like #7C7381 and #514E69.

Accessibility notes

  • #F1A3A3 and #F8CF87 lack sufficient contrast for standard text against white or each other; pair them with darker colors like #514E69 for readability.
  • Ensure text set in #B994A1 has a contrast ratio of at least 4.5:1 against its background, especially for body text.
  • The darker shades, #7C7381 and #514E69, provide excellent contrast for light text (e.g., white #FFFFFF), making them suitable for backgrounds or main text areas against light elements.
  • Exercise caution when using #F1A3A3 and #F8CF87 together in small elements, as their proximity in lightness might reduce perceived contrast for some users.

Recommended combinations

Dusky Horizon

Ideal for a soft, gradient-like transition in hero sections or large banners, evoking a peaceful dusk.

#F8CF87 · #B994A1 · #7C7381

Canyon Depths

Creates a strong, sophisticated contrast, perfect for data visualization, dashboards, or elegant UI elements where hierarchy is key.

#514E69 · #7C7381 · #F1A3A3

Twilight Glow

A balanced trio for branding accents, interactive elements, or illustrations, offering a blend of warmth and grounded sophistication.

#F1A3A3 · #B994A1 · #514E69

CSS variables

:root {
  --starlight-canyon-views-1: #F1A3A3;
  --starlight-canyon-views-2: #F8CF87;
  --starlight-canyon-views-3: #B994A1;
  --starlight-canyon-views-4: #7C7381;
  --starlight-canyon-views-5: #514E69;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-canyon-views": {
        1: "#F1A3A3",
        2: "#F8CF87",
        3: "#B994A1",
        4: "#7C7381",
        5: "#514E69",
      }
    }
  }
}

Related searches

starlight canyon color schemewarm dusky color palettenatural sunset color codesearthy sophisticated palettecanyon inspired ui colors

Palette colors

Hex values

Color 1#F1A3A3
·
Color 2#F8CF87
·
Color 3#B994A1
·
Color 4#7C7381
·
Color 5#514E69
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.3:1Fail
2.3:1Fail
4:1AA18
2
1.4:1Fail
1.8:1Fail
3.1:1AA18
5.4:1AA
3
1.3:1Fail
1.8:1Fail
1.7:1Fail
3:1Fail
4
2.3:1Fail
3.1:1AA18
1.7:1Fail
1.7:1Fail
5
4:1AA18
5.4:1AA
3:1Fail
1.7:1Fail

Similar palettes

More like Starlight Canyon Views

View all warm
Canyon Ridge Ember
Canyon Trail Sunset
Sunset Canyon Trail
Sunset Canyon View
Amber Sundown Glow
Canyon Fire Sunset