Back to palettes

Palette

Obsidian Night Flow

A sophisticated grayscale, mirroring the sleek, dark sheen of volcanic obsidian under a moonless sky.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1C1C1C#363636#505050#707070#909090

Palette guide

How to use Obsidian Night Flow

Overview

The Obsidian Night Flow palette offers a sophisticated grayscale experience, mirroring the sleek, dark sheen of volcanic obsidian under a moonless sky. Featuring deep charcoal tones like #1C1C1C and #363636, it provides a robust foundation for modern designs. Lighter grays such as #707070 and #909090 introduce subtle contrast and hierarchy, making it ideal for creating minimalist yet impactful interfaces. This monochrome scheme ensures visual harmony while offering enough variation for effective UI/UX design, from backgrounds to interactive elements.

Best used for

  • Sleek tech interfaces
  • Luxury brand identity
  • Minimalist website designs
  • Dark mode applications
  • Professional presentations
  • Modern art portfolios

Suggested color roles

primary

Use #1C1C1C as the dominant background or primary container color, establishing a deep, sophisticated base.

secondary

Employ #363636 for secondary backgrounds, cards, or subtle section dividers, adding depth without harsh contrast.

accent

Apply #707070 for subtle interactive elements, hover states, or delicate outlines to provide visual cues.

background

The ideal base is #1C1C1C or #363636, creating a clean, dark canvas for content.

text

For body text and labels, use #909090 or #707070 against the darker backgrounds to ensure excellent readability.

Accessibility notes

  • Ensure sufficient contrast (AA or AAA) for text elements, especially with #707070 on #363636.
  • Use larger font sizes or bolder weights for critical information when using mid-tone grays like #505050 on darker backgrounds.
  • Provide clear focus indicators for interactive elements that stand out against the monochrome scheme.
  • Test readability across various screen types and lighting conditions, as subtle gray differences can be hard to distinguish.

Recommended combinations

Deep Foundation

For primary backgrounds, secondary panels, and clear, legible text or headlines.

#1C1C1C · #363636 · #909090

Subtle Depth

Effective for card backgrounds, section breaks, and secondary text or descriptive elements.

#363636 · #505050 · #707070

Highlight Contrast

Use a dark base with lighter grays for accents, icons, or interactive states, providing subtle yet effective contrast.

#1C1C1C · #707070 · #909090

CSS variables

:root {
  --obsidian-night-flow-1: #1C1C1C;
  --obsidian-night-flow-2: #363636;
  --obsidian-night-flow-3: #505050;
  --obsidian-night-flow-4: #707070;
  --obsidian-night-flow-5: #909090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-night-flow": {
        1: "#1C1C1C",
        2: "#363636",
        3: "#505050",
        4: "#707070",
        5: "#909090",
      }
    }
  }
}

Related searches

dark grey palettemonochrome design colorssleek UI graysminimalist website paletteprofessional dark theme

Palette colors

Hex values

Color 1#1C1C1C
·
Color 2#363636
·
Color 3#505050
·
Color 4#707070
·
Color 5#909090
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
3.4:1AA18
5.3:1AA
2
1.4:1Fail
1.5:1Fail
2.4:1Fail
3.8:1AA18
3
2.1:1Fail
1.5:1Fail
1.6:1Fail
2.5:1Fail
4
3.4:1AA18
2.4:1Fail
1.6:1Fail
1.6:1Fail
5
5.3:1AA
3.8:1AA18
2.5:1Fail
1.6:1Fail

Similar palettes

More like Obsidian Night Flow

View all monochrome
Grey Scale Journey
Obsidian Sky Mirror
Abstract Canvas Swirl
Architectural Grid Hues
Art Gallery Minimal
Brushed Steel Aura