Back to palettes

Palette

Mountain Peak Basalt

Dark, earthy greys and charcoals, reflecting the raw, robust beauty of basalt rock peaks.

monochromenatural5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mountain Peak Basalt 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 Mountain Peak Basalt.

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

Data visualization

#4A4A4A#616161#777777#8E8E8E#A4A4A4

Palette guide

How to use Mountain Peak Basalt

Overview

The Mountain Peak Basalt palette embodies the raw, robust beauty of basalt rock, featuring a sophisticated monochrome range of dark, earthy grays and charcoals. This collection spans from the deep, grounding #4A4A4A to the lighter, yet still substantial #A4A4A4. Each shade, including #616161, #777777, and #8E8E8E, provides a subtle shift in tone, allowing for depth and texture within a minimalist framework. This palette is perfect for designs that aim to convey strength, reliability, and a timeless, sophisticated aesthetic. Designers can leverage its inherent versatility for creating clean, professional, and impactful experiences across various digital and print applications.

Best used for

  • luxury automotive brands
  • high-end watch websites
  • architectural firms portfolios
  • modern art galleries
  • professional services branding
  • industrial design presentations

Suggested color roles

primary

Use #4A4A4A as a strong primary for main navigation or foundational elements, providing a deep, sophisticated anchor.

secondary

Apply #616161 for secondary content blocks or larger graphical elements, offering a solid, balanced mid-tone.

accent

Introduce #A4A4A4 as a subtle accent for interactive states or highlights, adding a touch of refined lightness.

background

Employ #A4A4A4 for clean, professional backgrounds, offering excellent readability for darker text and a modern feel.

text

For optimal readability, use #4A4A4A for text on #A4A4A4, or a true black for strong contrast on any lighter gray.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing adjacent gray tones.
  • Text in #4A4A4A on #A4A4A4 provides good readability; consider pure black for critical text on #A4A4A4.
  • Avoid using #8E8E8E for small text on #A4A4A4 as contrast may be insufficient.
  • Pair #616161 with #A4A4A4 for larger text or UI elements to ensure good visibility.

Recommended combinations

Basalt Layers

Excellent for creating depth in UI elements or layered backgrounds, mimicking rock formations.

#4A4A4A · #616161 · #777777

Stone Texture

Ideal for content sections, with #A4A4A4 as background, #8E8E8E for secondary text, and #616161 for headings.

#A4A4A4 · #8E8E8E · #616161

Peak Shadow

Suitable for subtle branding or icon sets, offering a cohesive gray progression with a strong anchor.

#777777 · #8E8E8E · #4A4A4A

CSS variables

:root {
  --mountain-peak-basalt-1: #4A4A4A;
  --mountain-peak-basalt-2: #616161;
  --mountain-peak-basalt-3: #777777;
  --mountain-peak-basalt-4: #8E8E8E;
  --mountain-peak-basalt-5: #A4A4A4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mountain-peak-basalt": {
        1: "#4A4A4A",
        2: "#616161",
        3: "#777777",
        4: "#8E8E8E",
        5: "#A4A4A4",
      }
    }
  }
}

Related searches

monochrome gray palettedark charcoal color schemerugged natural tonessophisticated gray designminimalist rock palette

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#616161
·
Color 3#777777
·
Color 4#8E8E8E
·
Color 5#A4A4A4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
2.7:1Fail
3.6:1AA18
2
1.4:1Fail
1.4:1Fail
1.9:1Fail
2.5:1Fail
3
2:1Fail
1.4:1Fail
1.4:1Fail
1.8:1Fail
4
2.7:1Fail
1.9:1Fail
1.4:1Fail
1.3:1Fail
5
3.6:1AA18
2.5:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Mountain Peak Basalt

View all monochrome