Back to palettes

Palette

Obsidian Night Stone

The deep, impenetrable grays and blacks of obsidian, hinting at hidden strength.

DarkDark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Obsidian Night Stone 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 Obsidian Night Stone.

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

Data visualization

#1C1C1C#2C2C2C#36454F#474B4E#5E6164

Palette guide

How to use Obsidian Night Stone

Overview

Obsidian Night Stone captures the deep, impenetrable grays and blacks of obsidian, hinting at hidden strength. This palette blends classic dark charcoals like #1C1C1C and #2C2C2C with cooler, almost blue-gray tones such as #36454F, #474B4E, and #5E6164. It exudes a robust, grounded, and subtly sophisticated mood, perfect for designs that require a serious yet elegant aesthetic. The varying dark grays provide ample opportunity for creating depth and clear content hierarchy without relying on high contrast colors.

Best used for

  • Architectural portfolios
  • Industrial design showcases
  • Robust application interfaces
  • Masculine branding
  • Geological themed websites
  • High-performance tech products

Suggested color roles

primary

Use #1C1C1C as the dominant background color to establish a strong, deep charcoal foundation.

secondary

Employ #2C2C2C for secondary containers, modals, or distinct content blocks, providing subtle separation.

accent

Apply #474B4E for interactive elements, borders, or subtle data visualizations, adding a cool, defined accent.

background

The deep charcoal #1C1C1C or #2C2C2C serves as an excellent, sturdy background.

text

For primary text, #5E6164 offers clear readability on the darker backgrounds, while #474B4E works well for secondary or descriptive text.

Accessibility notes

  • Ensure sufficient contrast for text, especially with #474B4E on #2C2C2C, to meet WCAG AA standards.
  • Be mindful of the subtle blue undertones; test readability on various screens as they can affect perceived contrast.
  • Provide clear visual feedback for interactive elements to ensure usability in a mostly dark, subtle palette.
  • Consider using slightly larger font sizes for body text to enhance readability against the deep, nuanced grays.

Recommended combinations

Solid Foundation

For a strong, dark background with slightly lighter content areas and highly legible text.

#1C1C1C · #2C2C2C · #5E6164

Cool Depth

Ideal for layering UI elements, where #2C2C2C is the base, #36454F for cards, and #474B4E for borders or icons.

#2C2C2C · #36454F · #474B4E

Subtle Hierarchy

Use a deep background with a cool gray for headlines and a lighter gray for body text to establish clear hierarchy.

#1C1C1C · #474B4E · #5E6164

CSS variables

:root {
  --obsidian-night-stone-1: #1C1C1C;
  --obsidian-night-stone-2: #2C2C2C;
  --obsidian-night-stone-3: #36454F;
  --obsidian-night-stone-4: #474B4E;
  --obsidian-night-stone-5: #5E6164;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-night-stone": {
        1: "#1C1C1C",
        2: "#2C2C2C",
        3: "#36454F",
        4: "#474B4E",
        5: "#5E6164",
      }
    }
  }
}

Related searches

dark stone palettecharcoal grey schemeindustrial color designrobust UI colorsarchitectural dark theme

Palette colors

Hex values

Color 1#1C1C1C
·
Color 2#2C2C2C
·
Color 3#36454F
·
Color 4#474B4E
·
Color 5#5E6164
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.7:1Fail
1.9:1Fail
2.7:1Fail
2
1.2:1Fail
1.4:1Fail
1.6:1Fail
2.2:1Fail
3
1.7:1Fail
1.4:1Fail
1.1:1Fail
1.6:1Fail
4
1.9:1Fail
1.6:1Fail
1.1:1Fail
1.4:1Fail
5
2.7:1Fail
2.2:1Fail
1.6:1Fail
1.4:1Fail

Similar palettes

More like Obsidian Night Stone

View all Dark
Deep Space Void
Gothic Fortress Wall
Gothic Nightshade Bloom
Midnight Velvet Gloom
Starry Night Horizon
Volcanic Glass