Back to palettes

Palette

Basalt Column Grey

A minimalist exploration of the lunar surface, from dark craters to sunlit rocky plains.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Basalt Column Grey 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 Column Grey.

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

Data visualization

#3A3A3A#5A5A5A#7A7A7A#9A9A9A#BABABA

Palette guide

How to use Basalt Column Grey

Overview

The Basalt Column Grey palette offers a minimalist and sophisticated range of greys, perfect for designers and developers seeking a clean, modern aesthetic. Inspired by the lunar surface, from dark craters to sunlit rocky plains, it features shades like the deep #3A3A3A, mid-tone #7A7A7A, and very light #BABABA. With additional values of #5A5A5A and #9A9A9A, this palette provides versatility for creating depth and distinction within a monochrome scheme. It's an excellent choice for projects requiring a sense of understated elegance, neutrality, and robust modernity, ensuring clarity and focus.

Best used for

  • Modern minimalist website and app design
  • Tech product interfaces and branding
  • Industrial design concepts and presentations
  • Architectural renderings and portfolios
  • Scientific data visualization and dashboards
  • Branding for minimalist lifestyle products

Suggested color roles

primary

Utilize the dark grey #3A3A3A for main structural elements, bold typography, or dominant sections, providing a strong anchor.

secondary

Apply the mid-grey #5A5A5A to subheadings, secondary content areas, or borders, adding subtle contrast and definition.

accent

Employ the lighter grey #9A9A9A for subtle highlights, interactive elements in a disabled state, or delicate UI components.

background

Use the very light grey #BABABA for clean, neutral backgrounds, creating an expansive canvas that highlights content.

text

Integrate the darkest grey #3A3A3A for primary text on light backgrounds, or use white for optimal readability on darker shades like #3A3A3A or #5A5A5A.

Accessibility notes

  • The darkest grey #3A3A3A provides excellent contrast on #BABABA for body text, ensuring high readability.
  • Ensure sufficient contrast for text when using #7A7A7A on #BABABA; always check against WCAG guidelines.
  • For optimal readability, use #3A3A3A or #5A5A5A for main body text on lighter backgrounds.
  • Avoid low-contrast pairings such as #7A7A7A text on #9A9A9A background, which may hinder readability.

Recommended combinations

High Contrast

Create clear, readable interfaces with strong visual separation, ideal for primary content and navigation.

#3A3A3A · #BABABA · #5A5A5A

Subtle Gradient

Design smooth, modern transitions and layered effects for sections requiring a sophisticated visual flow.

#5A5A5A · #7A7A7A · #9A9A9A

Dark Mode Base

Establish a sleek, dark-themed interface with varying shades of grey, providing depth and readability.

#3A3A3A · #7A7A7A · #BABABA

CSS variables

:root {
  --basalt-column-grey-1: #3A3A3A;
  --basalt-column-grey-2: #5A5A5A;
  --basalt-column-grey-3: #7A7A7A;
  --basalt-column-grey-4: #9A9A9A;
  --basalt-column-grey-5: #BABABA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "basalt-column-grey": {
        1: "#3A3A3A",
        2: "#5A5A5A",
        3: "#7A7A7A",
        4: "#9A9A9A",
        5: "#BABABA",
      }
    }
  }
}

Related searches

minimalist grey palettemodern neutral colorsdark grey aestheticmonochrome UI designindustrial color schemes

Palette colors

Hex values

Color 1#3A3A3A
·
Color 2#5A5A5A
·
Color 3#7A7A7A
·
Color 4#9A9A9A
·
Color 5#BABABA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4:1AA18
5.9:1AA
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
3.6:1AA18
3
2.6:1Fail
1.6:1Fail
1.5:1Fail
2.2:1Fail
4
4:1AA18
2.5:1Fail
1.5:1Fail
1.4:1Fail
5
5.9:1AA
3.6:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Basalt Column Grey

View all monochrome
Lunar Dust Veil
Cosmic Dark Dust
Licorice Drop
Midnight Ink Spill
Midnight Ink Spill
Obsidian Shard Coast