Palette

Volcanic Glass Shard

Sharp, deep blues and greys inspired by the smooth, reflective surface of obsidian volcanic glass.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Glass Shard 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 Volcanic Glass Shard.

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

Data visualization

#2C3E50#4C6F8E#6B95B8#93BDDF#1B293A

Palette guide

How to use Volcanic Glass Shard

Overview

The Volcanic Glass Shard palette offers a sophisticated range of cool blues and deep greys, reminiscent of obsidian's sharp, reflective surface. With anchoring tones like #1B293A and #2C3E50, progressing to lighter, airy blues like #93BDDF, this palette provides a harmonious balance between depth and clarity. Designers and developers can leverage these colors to create sleek, professional, and calming interfaces that convey trust and innovation. It's particularly effective for digital products where a clean, modern aesthetic is paramount, offering excellent versatility for both foreground elements and immersive backgrounds.

Best used for

Corporate and financial applications
Tech product interfaces and dashboards
Maritime or environmental branding
Sophisticated web design projects
Winter-themed digital campaigns
Educational platforms with a serious tone

Suggested color roles

primary

Use #2C3E50 as the main brand color, ideal for prominent headers, brand logos, or large sections.

secondary

Apply #4C6F8E for supporting content areas, secondary navigation, or distinct panel backgrounds.

accent

Utilize #93BDDF for interactive elements, call-to-action buttons, or subtle highlights that need to stand out.

background

Choose #1B293A for a deep, immersive background that provides a strong foundation for lighter elements.

text

For body text, #6B95B8 or #93BDDF offers excellent readability against the darker blues and greys.

Accessibility notes

Ensure sufficient contrast between #93BDDF and darker background colors like #1B293A or #2C3E50.
Avoid using #4C6F8E text on #2C3E50, as contrast may not meet WCAG guidelines.
Test color pairings for text and interactive elements thoroughly, especially for small font sizes.
Consider using a stark white text on #1B293A for critical information to maximize readability.

Recommended combinations

Deep & Cool Base

Establishes a solid, cool foundation for backgrounds, main content, and layered sections.

#1B293A · #2C3E50 · #4C6F8E

Clarity & Contrast

Creates visual hierarchy for text, headings, and interactive elements on darker backgrounds.

#2C3E50 · #6B95B8 · #93BDDF

UI Interactions

Ideal for buttons, links, hover states, and subtle indicators within the user interface.

#4C6F8E · #93BDDF · #6B95B8

CSS variables

:root {
  --volcanic-glass-shard-2-1: #2C3E50;
  --volcanic-glass-shard-2-2: #4C6F8E;
  --volcanic-glass-shard-2-3: #6B95B8;
  --volcanic-glass-shard-2-4: #93BDDF;
  --volcanic-glass-shard-2-5: #1B293A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass-shard-2": {
        1: "#2C3E50",
        2: "#4C6F8E",
        3: "#6B95B8",
        4: "#93BDDF",
        5: "#1B293A",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#4C6F8E

Color 3#6B95B8

Color 4#93BDDF

Color 5#1B293A

Accessibility

Contrast checker

2.1:1Fail

3.5:1AA18

5.5:1AA

1.3:1Fail

2.1:1Fail

1.7:1Fail

2.7:1Fail

2.8:1Fail

3.5:1AA18

1.7:1Fail

1.6:1Fail

4.6:1AA

5.5:1AA

2.7:1Fail

1.6:1Fail

7.4:1AAA

1.3:1Fail

2.8:1Fail

4.6:1AA

7.4:1AAA

Similar palettes

More like Volcanic Glass Shard

View all cool

Bioluminescent Abyss

Cobalt Abyss Depths

Midnight Ocean Trench

Rainy City Reflections

Stormy Coast Horizon

Twilight Metropolis Blue