Back to palettes

Palette

Granite Peak Twilight

Captures the quiet, stony grandeur of a mountain peak at dusk, with various shades of cool grey.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Granite Peak Twilight 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 Granite Peak Twilight.

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

Data visualization

#3A3F51#626C84#8BA6BB#BEC8D4#DFE3E6

Palette guide

How to use Granite Peak Twilight

Overview

The Granite Peak Twilight palette captures the quiet, stony grandeur of a mountain peak at dusk, with various shades of cool gray. From the deep #3A3F51 to the serene #DFE3E6, and encompassing mid-tones like #626C84, #8BA6BB, and #BEC8D4, this collection offers a sophisticated and calming aesthetic. It's an excellent choice for designers and developers aiming for a minimalist yet profound design that evokes tranquility, strength, and understated elegance. This palette is particularly well-suited for projects that require a cool, contemporary, and professional feel with a touch of natural inspiration.

Best used for

  • Luxury brand identities and websites
  • High-end tech and software interfaces
  • Modern corporate presentations
  • Spa and wellness brand design
  • Architectural renderings and portfolios
  • Minimalist photography and art displays

Suggested color roles

primary

Use #3A3F51 as a strong primary for backgrounds, headers, or foundational elements, providing a sense of depth and calm.

secondary

Employ #626C84 for secondary sections, navigation, or subtle dividers, maintaining a cohesive, cool-toned aesthetic.

accent

Apply #8BA6BB for subtle accents, interactive states, or to highlight important information without being overtly bright.

background

The light #DFE3E6 or #BEC8D4 serves as an excellent clean background, offering optimal readability for darker text.

text

For dark text, #3A3F51 or a standard charcoal provides excellent readability on lighter backgrounds. For lighter text on dark backgrounds, #DFE3E6 ensures clarity.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using similar cool gray tones (e.g., #BEC8D4 on #DFE3E6).
  • Use a contrast checker to verify all text and interactive element pairings meet WCAG contrast guidelines.
  • Consider using slightly warmer or cooler shades for interactive states to clearly differentiate them.
  • Avoid using too many similar shades in close proximity for critical information to prevent visual fatigue.

Recommended combinations

Twilight Depth

A robust, high-contrast base for professional websites, luxury branding, or serene digital interfaces.

#3A3F51 · #DFE3E6 · #626C84

Cool Layers

Ideal for creating visual hierarchy, distinguishing content blocks, or subtle backgrounds in a sophisticated design.

#626C84 · #8BA6BB · #BEC8D4

Peak Serenity

Perfect for clean, airy interfaces, backgrounds, or where subtle distinctions in tone are used to define elements in a minimalist aesthetic.

#DFE3E6 · #BEC8D4 · #8BA6BB

CSS variables

:root {
  --granite-peak-twilight-1: #3A3F51;
  --granite-peak-twilight-2: #626C84;
  --granite-peak-twilight-3: #8BA6BB;
  --granite-peak-twilight-4: #BEC8D4;
  --granite-peak-twilight-5: #DFE3E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "granite-peak-twilight": {
        1: "#3A3F51",
        2: "#626C84",
        3: "#8BA6BB",
        4: "#BEC8D4",
        5: "#DFE3E6",
      }
    }
  }
}

Related searches

cool gray color palettemountain dusk colorsminimalist stone aestheticelegant blue gray schemesophisticated neutral palette

Palette colors

Hex values

Color 1#3A3F51
·
Color 2#626C84
·
Color 3#8BA6BB
·
Color 4#BEC8D4
·
Color 5#DFE3E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
4.1:1AA18
6.2:1AA
8.1:1AAA
2
2:1Fail
2.1:1Fail
3.1:1AA18
4.1:1AA18
3
4.1:1AA18
2.1:1Fail
1.5:1Fail
2:1Fail
4
6.2:1AA
3.1:1AA18
1.5:1Fail
1.3:1Fail
5
8.1:1AAA
4.1:1AA18
2:1Fail
1.3:1Fail

Similar palettes

More like Granite Peak Twilight

View all monochrome
Basalt Stream Pebble
Monochromatic Granite
Stone Cairn Trail
Arctic Explorer Suit
Arctic Whispers Snow
Beach Stone Sketch