Back to palettes

Palette

Basalt Rock Formation

A stoic range of dark grays, reflecting the ancient and robust nature of basalt rock.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Basalt Rock Formation 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 Basalt Rock Formation.

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

Data visualization

#1F1F1F#3A3A3A#5B5B5B#7E7E7E#A0A0A0

Palette guide

How to use Basalt Rock Formation

Overview

The Basalt Rock Formation palette presents a stoic range of dark grays, reflecting the ancient and robust nature of basalt rock. Featuring the deepest charcoal #1F1F1F, dark grey #3A3A3A, and light grey #A0A0A0, this collection provides designers and developers with a powerful toolkit for minimalist, grounded designs. The additional shades of #5B5B5B and #7E7E7E complete a spectrum that offers subtle variations, creating depth and a sense of timeless strength. This palette is ideal for projects that demand a clean yet strong aesthetic, emphasizing structure, sophistication, and a natural, raw feel.

Best used for

  • Minimalist website and app interfaces
  • Photography and art portfolios with a stark aesthetic
  • Branding for rugged or industrial products
  • Architectural visualizations and firm identities
  • Dark-themed digital experiences and UI/UX
  • Scientific and data-heavy applications requiring clarity

Suggested color roles

primary

Utilize the deepest charcoal #1F1F1F for strong backgrounds, bold headers, or foundational elements, providing a powerful anchor.

secondary

Apply the dark grey #3A3A3A for main content areas, significant textual blocks, or accent panels, offering clear readability.

accent

Employ the mid-grey #7E7E7E for subtle highlights, interactive elements, or delicate UI components, adding refinement.

background

Use the dark grey #3A3A3A or #1F1F1F for a solid, grounding base, creating an immersive and sophisticated backdrop.

text

Integrate the light grey #A0A0A0 for optimal readability on dark backgrounds, or use #1F1F1F for strong text on light backgrounds.

Accessibility notes

  • The deepest charcoal #1F1F1F provides excellent contrast against #A0A0A0 for body text, ensuring high readability.
  • Ensure #5B5B5B text on #7E7E7E background meets WCAG contrast for legibility.
  • For primary body text on lighter backgrounds, use the darkest shades like #1F1F1F or #3A3A3A.
  • Avoid using #7E7E7E as text on #A0A0A0 due to potential low contrast, which can hinder readability.

Recommended combinations

Bold Readability

Create clear, impactful messaging and main content areas, combining deep darks with a bright, readable text.

#1F1F1F · #A0A0A0 · #3A3A3A

Natural Depth

Design a smooth and sophisticated grayscale effect for layered sections or background elements, providing visual depth.

#3A3A3A · #5B5B5B · #7E7E7E

Minimalist Canvas

Establish a clean, modern dark theme, providing depth and clarity for various UI elements and content blocks.

#1F1F1F · #7E7E7E · #A0A0A0

CSS variables

:root {
  --basalt-rock-formation-1: #1F1F1F;
  --basalt-rock-formation-2: #3A3A3A;
  --basalt-rock-formation-3: #5B5B5B;
  --basalt-rock-formation-4: #7E7E7E;
  --basalt-rock-formation-5: #A0A0A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "basalt-rock-formation": {
        1: "#1F1F1F",
        2: "#3A3A3A",
        3: "#5B5B5B",
        4: "#7E7E7E",
        5: "#A0A0A0",
      }
    }
  }
}

Related searches

dark monochrome palettebasalt stone colorsminimalist grey aestheticnatural rock color schemestoic design palette

Palette colors

Hex values

Color 1#1F1F1F
·
Color 2#3A3A3A
·
Color 3#5B5B5B
·
Color 4#7E7E7E
·
Color 5#A0A0A0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.4:1Fail
4.1:1AA18
6.3:1AA
2
1.4:1Fail
1.7:1Fail
2.8:1Fail
4.3:1AA18
3
2.4:1Fail
1.7:1Fail
1.7:1Fail
2.6:1Fail
4
4.1:1AA18
2.8:1Fail
1.7:1Fail
1.6:1Fail
5
6.3:1AA
4.3:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Basalt Rock Formation

View all monochrome
Slate Rock Path
Granite Canyon Flow
Obsidian Sky Mirror
Shadowed Ink Canvas
Volcanic Ash Bloom
Volcanic Glass Shard