Palette

Volcanic Glass Beach

The striking contrast of a dark volcanic sand beach meeting the deep, mysterious ocean waters.

Darkdark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1C1C1C#36454F#76EEC6#4682B4#654321

Palette guide

How to use Volcanic Glass Beach

Overview

The Volcanic Glass Beach palette beautifully captures the striking contrast of dark volcanic sand meeting mysterious ocean waters. It grounds designs with deep, cool tones like #1C1C1C and #36454F, introducing refreshing accents of teal #76EEC6 and deep blue #4682B4, with an earthy touch of #654321. This palette is excellent for creating a sophisticated yet natural atmosphere. Designers can use the dark hues for a strong foundation, while developers can leverage the vibrant teal and blue for impactful UI elements, ensuring a harmonious balance between nature's power and tranquility.

Best used for

Eco-tourism websites
Sustainable product branding
Coastal property marketing
Nature documentary graphics
Spa and wellness centers
Contemporary art portfolios

Suggested color roles

primary

#1C1C1C - A deep, dark charcoal, perfect for main backgrounds, strong headers, or foundational UI elements.

secondary

#36454F - A muted deep blue-grey, excellent for subheadings, navigation, or secondary graphic elements.

accent

#76EEC6 - A bright, refreshing teal, ideal for calls-to-action, interactive elements, or key information that needs to stand out.

background

#1C1C1C - Provides a sophisticated dark canvas, allowing the cooler blues and teal to shine.

text

#4682B4 - Suitable for larger headings or graphic text on very dark backgrounds; for body text, use white or a light grey.

Accessibility notes

Ensure #76EEC6 text has sufficient contrast against #1C1C1C or #36454F for optimal readability.
Avoid using #1C1C1C and #36454F for text/background pairings due to low contrast.
White or a very light grey should be used for primary body text on the darker background hues.
Test colorblind compatibility, especially with the muted blue-grey and the vibrant teal.

Recommended combinations

Deep Ocean

Creates a serene, deep-sea gradient for backgrounds or sophisticated UI components.

#1C1C1C · #36454F · #4682B4

Coastal Contrast

Ideal for highlighting features or calls-to-action, evoking the beach's natural elements.

#1C1C1C · #76EEC6 · #654321

Earth & Sky

Excellent for data visualization or infographics, representing natural elements with clarity.

#36454F · #76EEC6 · #4682B4

CSS variables

:root {
  --volcanic-glass-beach-2-1: #1C1C1C;
  --volcanic-glass-beach-2-2: #36454F;
  --volcanic-glass-beach-2-3: #76EEC6;
  --volcanic-glass-beach-2-4: #4682B4;
  --volcanic-glass-beach-2-5: #654321;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass-beach-2": {
        1: "#1C1C1C",
        2: "#36454F",
        3: "#76EEC6",
        4: "#4682B4",
        5: "#654321",
      }
    }
  }
}

Hex values

Color 1#1C1C1C

Color 2#36454F

Color 3#76EEC6

Color 4#4682B4

Color 5#654321

Accessibility

Contrast checker

1.7:1Fail

12:1AAA

4.1:1AA18

1.9:1Fail

1.7:1Fail

7:1AA

2.4:1Fail

1.1:1Fail

12:1AAA

7:1AA

2.9:1Fail

6.2:1AA

4.1:1AA18

2.4:1Fail

2.9:1Fail

2.1:1Fail

1.9:1Fail

1.1:1Fail

6.2:1AA

2.1:1Fail

Similar palettes

More like Volcanic Glass Beach

View all Dark

Arid Dusk Hues

Gothic Garden Nocturne

Midnight Ocean Depths

Rainy City Nights

Abyssal Light Organism

Deep Sea Lumen