Back to palettes

Palette

Slate Cavern

Muted greys capture the cool, quiet essence of ancient rock formations within a hidden cavern's embrace.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Slate Cavern 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 Slate Cavern.

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

Data visualization

#4D5656#7F8C8D#BCCFD1#333C3C#627071

Palette guide

How to use Slate Cavern

Overview

The "Slate Cavern" palette captures the cool, quiet essence of ancient rock formations, offering a sophisticated range of muted greens and grays. With deep charcoal #333C3C, a subtle slate green #4D5656, a balanced mid-tone #627071, a lighter grey-green #7F8C8D, and the airy #BCCFD1, this collection exudes a minimalist and earthy elegance. It's highly practical for designers and developers seeking to create a sense of groundedness, tranquility, and understated luxury. These colors are excellent for architectural, sustainable, or high-end natural product branding, providing a stable and refined aesthetic.

Best used for

  • Architectural firm branding
  • Sustainable product packaging
  • High-end furniture design websites
  • Minimalist user interfaces
  • Luxury spa and wellness materials
  • Nature-inspired digital art

Suggested color roles

primary

#333C3C - A deep, rich charcoal with a green undertone, ideal for primary text, main navigation, or strong foundational elements to convey solidity and sophistication.

secondary

#4D5656 - A dark slate green, excellent for secondary text, subheadings, or subtle background differentiation in content blocks.

accent

#7F8C8D - A lighter, balanced grey-green, perfect for subtle accents, borders, or hover states where a soft, natural touch is desired.

background

#BCCFD1 - The lightest, almost off-white grey-green, providing a clean, airy background that feels natural and calm, ideal for main content areas.

text

White text on #333C3C and #4D5656. Dark grey or black on #7F8C8D, #627071, and #BCCFD1. #333C3C is ideal for text on lighter backgrounds.

Accessibility notes

  • White text on #333C3C and #4D5656 will provide good contrast.
  • Dark text (e.g., #333C3C or black) is necessary for #7F8C8D, #627071, and #BCCFD1 backgrounds.
  • Avoid using #7F8C8D or #BCCFD1 for text unless against a very dark background.
  • Ensure interactive elements have clear visual cues that meet contrast requirements, especially within the lighter range.

Recommended combinations

Cavern Depth

Creates a strong, grounded visual hierarchy for headers or important content sections.

#333C3C · #4D5656 · #7F8C8D

Misty Layers

Ideal for subtle gradients or layered UI elements, suggesting depth and atmosphere.

#BCCFD1 · #7F8C8D · #627071

Natural Contrast

Excellent for clean layouts where a sophisticated dark color provides anchor points against a light, airy background.

#4D5656 · #BCCFD1 · #333C3C

CSS variables

:root {
  --slate-cavern-1: #4D5656;
  --slate-cavern-2: #7F8C8D;
  --slate-cavern-3: #BCCFD1;
  --slate-cavern-4: #333C3C;
  --slate-cavern-5: #627071;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "slate-cavern": {
        1: "#4D5656",
        2: "#7F8C8D",
        3: "#BCCFD1",
        4: "#333C3C",
        5: "#627071",
      }
    }
  }
}

Related searches

muted green grey paletteminimalist earthy colorssophisticated neutral tonesnatural ui designcalm professional aesthetic

Palette colors

Hex values

Color 1#4D5656
·
Color 2#7F8C8D
·
Color 3#BCCFD1
·
Color 4#333C3C
·
Color 5#627071
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
4.7:1AA
1.5:1Fail
1.5:1Fail
2
2.2:1Fail
2.2:1Fail
3.3:1AA18
1.5:1Fail
3
4.7:1AA
2.2:1Fail
7:1AAA
3.2:1AA18
4
1.5:1Fail
3.3:1AA18
7:1AAA
2.2:1Fail
5
1.5:1Fail
1.5:1Fail
3.2:1AA18
2.2:1Fail

Similar palettes

More like Slate Cavern

View all neutral