Palette

Volcanic Rock Embrace

A gradient of deep grays to lighter shades, mirroring the rugged textures of volcanic rock.

monochromenatural5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Rock Embrace 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 Rock Embrace.

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

Data visualization

#2C3E50#546A76#7D8A93#A5B3BE#CFD7DB

Palette guide

How to use Volcanic Rock Embrace

Overview

The "Volcanic Rock Embrace" palette presents a sophisticated gradient from deep, cool blue-grey `#2C3E50` to a soft, ethereal light grey `#CFD7DB`. This monochromatic scheme beautifully mirrors the rugged yet serene textures of volcanic rock, offering a sense of stability, natural elegance, and calm. It is highly versatile for creating designs that feel grounded, modern, and understated, providing designers and developers with a professional and timeless aesthetic, perfect for calming digital experiences or sophisticated branding.

Best used for

Corporate and professional branding
Minimalist web and app design
Interior design concepts and mood boards
Natural product packaging and marketing
Tech interfaces and data visualization
Calming digital experiences and meditation apps

Suggested color roles

primary

Use `#546A76` as a balanced mid-tone for main content areas or primary navigation, offering stability.

secondary

Apply `#7D8A93` as a lighter mid-tone for subtle distinctions, secondary information, or layered backgrounds.

accent

Utilize `#A5B3BE` as a soft highlight for UI elements, interactive states, or subtle visual cues.

background

Employ `#2C3E50` as a deep, grounding background, providing a sophisticated and stable foundation.

text

For optimal legibility on dark backgrounds, use `#CFD7DB` for text or a dark charcoal like `#333333` for text on lighter shades.

Accessibility notes

Text in `#CFD7DB` will provide excellent contrast on `#2C3E50` and `#546A76` backgrounds.
Be cautious when pairing `#A5B3BE` text on `#7D8A93`; always check contrast carefully to ensure readability.
For darker text on lighter backgrounds, consider using `#2C3E50` or `#546A76` on `#CFD7DB`.
Ensure interactive elements have sufficient contrast against their background states to meet WCAG AA standards.

Recommended combinations

Stone Depth

Creates a deep base with contrasting light accents, ideal for headers and main content areas.

#2C3E50 · #546A76 · #CFD7DB

Misty Ridge

Combines lighter tones with a strong dark anchor, useful for layered UI or subtle visual interest.

#7D8A93 · #A5B3BE · #2C3E50

Smooth Flow

Provides a subtle, harmonious progression for visual depth in backgrounds or component cards.

#546A76 · #7D8A93 · #A5B3BE

CSS variables

:root {
  --volcanic-rock-embrace-1: #2C3E50;
  --volcanic-rock-embrace-2: #546A76;
  --volcanic-rock-embrace-3: #7D8A93;
  --volcanic-rock-embrace-4: #A5B3BE;
  --volcanic-rock-embrace-5: #CFD7DB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-rock-embrace": {
        1: "#2C3E50",
        2: "#546A76",
        3: "#7D8A93",
        4: "#A5B3BE",
        5: "#CFD7DB",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#546A76

Color 3#7D8A93

Color 4#A5B3BE

Color 5#CFD7DB

Accessibility

Contrast checker

1.9:1Fail

3.1:1AA18

5.1:1AA

7.5:1AAA

1.9:1Fail

1.6:1Fail

2.6:1Fail

3.9:1AA18

3.1:1AA18

1.6:1Fail

1.7:1Fail

2.4:1Fail

5.1:1AA

2.6:1Fail

1.7:1Fail

1.5:1Fail

7.5:1AAA

3.9:1AA18

2.4:1Fail

1.5:1Fail

Similar palettes

More like Volcanic Rock Embrace