Back to palettes

Palette

Obsidian Shard Coast

Stark and powerful, featuring deep charcoal and almost-black tones, inspired by volcanic glass shores.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Obsidian Shard Coast 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 Shard Coast.

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

Data visualization

#1A1A1A#333333#555555#0A0A0A#222222

Palette guide

How to use Obsidian Shard Coast

Overview

Obsidian Shard Coast is a stark and powerful palette, featuring deep charcoal and almost-black tones inspired by volcanic glass shores. With shades like #0A0A0A, #1A1A1A, #222222, #333333, and #555555, this palette emphasizes depth, minimalism, and raw sophistication. It provides a robust foundation for designs that require a strong, uncompromising aesthetic. The subtle variations in near-black allow for elegant layering and clear content separation without introducing distracting colors, perfect for a truly dark and modern visual experience.

Best used for

  • Minimalist portfolio sites
  • Luxury automotive branding
  • High-tech product displays
  • Dark mode applications
  • Architectural renderings
  • Exclusive digital publications

Suggested color roles

primary

Utilize #0A0A0A as the deepest background, establishing a stark, profound base.

secondary

Employ #1A1A1A or #222222 for secondary content areas, cards, or subtle overlays, providing minimal contrast.

accent

Apply #555555 for subtle interactive elements, borders, or delicate highlights, ensuring visibility.

background

The deepest black, #0A0A0A, is ideal for creating an immersive and sharp visual experience.

text

For primary text, #555555 provides excellent readability on the darkest backgrounds, while #333333 can be used for secondary text.

Accessibility notes

  • Ensure very high contrast for #555555 text on #0A0A0A or #1A1A1A to meet WCAG AA/AAA standards, especially for body text.
  • Avoid using small font sizes for any text, as the subtle differences in dark grays can make it hard to distinguish.
  • Provide clear focus indicators for interactive elements that stand out against the dark, monochromatic scheme.
  • Test on various displays and lighting conditions, as slight variations in screen calibration can affect perceived contrast.

Recommended combinations

Stark Depth

For a deep, stark background, a slightly lighter off-black for containers, and a clear mid-gray for readable text.

#0A0A0A · #1A1A1A · #555555

Layered Obsidian

Ideal for creating depth through subtle tonal shifts for different UI elements, such as panels on a background.

#1A1A1A · #222222 · #333333

Minimalist Contrast

Use a profound background with a darker gray for headlines or key information and a lighter gray for body text.

#0A0A0A · #333333 · #555555

CSS variables

:root {
  --obsidian-shard-coast-1: #1A1A1A;
  --obsidian-shard-coast-2: #333333;
  --obsidian-shard-coast-3: #555555;
  --obsidian-shard-coast-4: #0A0A0A;
  --obsidian-shard-coast-5: #222222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-shard-coast": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#555555",
        4: "#0A0A0A",
        5: "#222222",
      }
    }
  }
}

Related searches

obsidian black palettestark dark thememinimalist grey designvolcanic glass colorshigh-tech dark UI

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#333333
·
Color 3#555555
·
Color 4#0A0A0A
·
Color 5#222222
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.3:1Fail
1.1:1Fail
1.1:1Fail
2
1.4:1Fail
1.7:1Fail
1.6:1Fail
1.3:1Fail
3
2.3:1Fail
1.7:1Fail
2.7:1Fail
2.1:1Fail
4
1.1:1Fail
1.6:1Fail
2.7:1Fail
1.2:1Fail
5
1.1:1Fail
1.3:1Fail
2.1:1Fail
1.2:1Fail

Similar palettes

More like Obsidian Shard Coast

View all monochrome
Licorice Drop
Midnight Ink Spill
Shadowed Obsidian
Volcanic Cinder Trail
Volcanic Glass Spires
Volcanic Obsidian Flow