Back to palettes

Palette

Basalt Ridge Shadow

A rugged blend of deep greys, mimicking the somber tones of cooled basalt rock formations.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Basalt Ridge Shadow 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 Ridge Shadow.

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

Data visualization

#2C2C2C#4A4A4A#6C6C6C#8E8E8E#AAAAAA

Palette guide

How to use Basalt Ridge Shadow

Overview

The Basalt Ridge Shadow palette presents a rugged blend of deep greys, mimicking the somber tones of cooled basalt rock formations. Featuring the profound charcoal #2C2C2C, mid-grey #6C6C6C, and light grey #AAAAAA, this collection provides designers and developers with a robust and sophisticated range for dark, earthy designs. The additional shades of #4A4A4A and #8E8E8E complete a spectrum that offers subtle variations, creating depth and a sense of raw, natural power. This palette is ideal for projects that require a minimalist yet strong aesthetic, emphasizing texture and a grounding presence.

Best used for

  • Modern corporate websites and branding
  • Architecture portfolios and firm identities
  • Product design showcases with a clean aesthetic
  • Urban and industrial branding projects
  • Dark mode user interfaces and applications
  • Scientific or geological presentation materials

Suggested color roles

primary

Utilize the deep charcoal #2C2C2C for primary backgrounds, strong typography, or dominant sections, providing a robust anchor.

secondary

Apply the dark grey #4A4A4A for secondary content panels, headers, or significant textual blocks, adding subtle distinction.

accent

Employ the lighter grey #8E8E8E for subtle highlights, interactive states, or delicate UI components, offering a touch of refinement.

background

Use the mid-grey #6C6C6C for a balanced base, or #2C2C2C for a darker, more immersive feel.

text

Integrate the lightest grey #AAAAAA for optimal readability on dark backgrounds, or use #2C2C2C for strong text on light backgrounds.

Accessibility notes

  • The deep charcoal #2C2C2C provides excellent contrast against #AAAAAA for body text, ensuring high readability.
  • Ensure #6C6C6C text on #8E8E8E background meets WCAG contrast requirements for legibility.
  • For primary body text on lighter backgrounds, use the darkest shades like #2C2C2C or #4A4A4A.
  • Avoid low-contrast pairings such as #8E8E8E text on #AAAAAA, as it may significantly hinder readability.

Recommended combinations

High Readability

Create clear text and a sophisticated look, ideal for main content, navigation, and informational sections.

#2C2C2C · #AAAAAA · #4A4A4A

Smooth Transition

Design a subtle, natural gradient effect for layered sections or background elements, providing visual depth.

#4A4A4A · #6C6C6C · #8E8E8E

Dark Base

Establish a robust and modern dark theme, providing depth and clarity for various UI elements.

#2C2C2C · #6C6C6C · #AAAAAA

CSS variables

:root {
  --basalt-ridge-shadow-1: #2C2C2C;
  --basalt-ridge-shadow-2: #4A4A4A;
  --basalt-ridge-shadow-3: #6C6C6C;
  --basalt-ridge-shadow-4: #8E8E8E;
  --basalt-ridge-shadow-5: #AAAAAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "basalt-ridge-shadow": {
        1: "#2C2C2C",
        2: "#4A4A4A",
        3: "#6C6C6C",
        4: "#8E8E8E",
        5: "#AAAAAA",
      }
    }
  }
}

Related searches

dark grey natural palettevolcanic monochrome schemerugged earth tonesminimalist grey brandingraw texture colors

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#4A4A4A
·
Color 3#6C6C6C
·
Color 4#8E8E8E
·
Color 5#AAAAAA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.3:1AA18
6:1AA
2
1.6:1Fail
1.7:1Fail
2.7:1Fail
3.8:1AA18
3
2.7:1Fail
1.7:1Fail
1.6:1Fail
2.3:1Fail
4
4.3:1AA18
2.7:1Fail
1.6:1Fail
1.4:1Fail
5
6:1AA
3.8:1AA18
2.3:1Fail
1.4:1Fail

Similar palettes

More like Basalt Ridge Shadow

View all dark
Lava Rock Texture
Crater Lake Depth
Fiery Volcanic Ash
Lava Flow Ember
Magma Flow Descent
Obsidian Flow Texture