Back to palettes

Palette

Basalt Edge

Reflecting the deep, dark tones of volcanic basalt against a stark, dramatic sky, evoking a sense of ancient power.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1C20#3E4C5F#627B9D#A5BBDC#2C343D

Palette guide

How to use Basalt Edge

Overview

The Basalt Edge palette offers a dramatic blend of deep blue-greys, inspired by volcanic basalt against a stark sky. Featuring the profound charcoal blue #1A1C20, the dark blue-grey #2C343D, and the muted sky blue #A5BBDC, this collection is ideal for designers and developers seeking to evoke ancient power with a modern, minimalist edge. The additional shades of #3E4C5F and #627B9D complete a sophisticated spectrum that provides depth and understated coolness. This palette is perfect for projects that require a robust yet refined aesthetic, combining intensity with a contemporary feel.

Best used for

  • Tech and software interfaces and branding
  • Modern architectural design and visualization
  • Automotive branding and digital presentations
  • Science and engineering data visualizations
  • Dark mode application themes and UI/UX
  • Branding for rugged outdoor gear or extreme sports

Suggested color roles

primary

Utilize the deep charcoal blue #1A1C20 for dominant backgrounds, strong typography, or foundational elements, providing a powerful anchor.

secondary

Apply the dark blue-grey #2C343D for section headers, secondary content panels, or borders, adding subtle distinction.

accent

Employ the muted sky blue #A5BBDC for subtle highlights, interactive elements, or delicate UI components, providing a touch of lightness.

background

Use the mid-tone blue-grey #3E4C5F for content areas, or #1A1C20 for a deep, immersive dark mode experience.

text

Integrate the light blue-grey #627B9D for secondary text on darker backgrounds, or use white or near-white for optimal readability on #1A1C20 or #2C343D.

Accessibility notes

  • The darkest shades #1A1C20 and #2C343D offer excellent contrast for white or very light grey text, ensuring readability.
  • The muted sky blue #A5BBDC provides good readability when used as text on darker backgrounds like #1A1C20 or #3E4C5F.
  • Be cautious when using #627B9D for text on #3E4C5F; always check WCAG contrast ratios to ensure legibility.
  • Ensure sufficient contrast for all interactive elements, especially when using lighter shades on darker backgrounds.

Recommended combinations

Deep Contrast

Create a striking dark mode interface with clear visual hierarchy, combining deep tones with a bright accent.

#1A1C20 · #A5BBDC · #3E4C5F

Modern Gradient

Design a smooth, sophisticated visual flow for layered sections or background elements, providing subtle depth.

#2C343D · #3E4C5F · #627B9D

Subtle Highlight

Add depth and a touch of brightness to dark themes, perfect for secondary information or decorative elements.

#1A1C20 · #627B9D · #A5BBDC

CSS variables

:root {
  --basalt-edge-1: #1A1C20;
  --basalt-edge-2: #3E4C5F;
  --basalt-edge-3: #627B9D;
  --basalt-edge-4: #A5BBDC;
  --basalt-edge-5: #2C343D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "basalt-edge": {
        1: "#1A1C20",
        2: "#3E4C5F",
        3: "#627B9D",
        4: "#A5BBDC",
        5: "#2C343D",
      }
    }
  }
}

Related searches

dark blue grey palettemodern minimalist colorsbasalt rock color schemetech UI colorscool dark aesthetic

Palette colors

Hex values

Color 1#1A1C20
·
Color 2#3E4C5F
·
Color 3#627B9D
·
Color 4#A5BBDC
·
Color 5#2C343D
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.9:1AA18
8.7:1AAA
1.4:1Fail
2
2:1Fail
2:1Fail
4.5:1AA18
1.4:1Fail
3
3.9:1AA18
2:1Fail
2.2:1Fail
2.9:1Fail
4
8.7:1AAA
4.5:1AA18
2.2:1Fail
6.4:1AA
5
1.4:1Fail
1.4:1Fail
2.9:1Fail
6.4:1AA

Similar palettes

More like Basalt Edge

View all dark
Charcoal Depths
City Neon Rain
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths