Palette

Crater Lake Depth

A powerful combination of dark, earthy tones and deep, mysterious blues found in volcanic crater lakes.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Crater Lake Depth 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 Crater Lake Depth.

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

Data visualization

#525252#2C3E50#0A0A0A#4CAF50#90CAF9

Palette guide

How to use Crater Lake Depth

Overview

The Crater Lake Depth palette is a powerful combination of dark, earthy tones and deep, mysterious blues, reflecting the profound beauty of volcanic crater lakes. It ranges from the absolute #0A0A0A to the vibrant #90CAF9. Designers and developers can leverage #2C3E50 for foundational depth and #525252 for a sophisticated, neutral grey. The unexpected #4CAF50 introduces a striking natural accent, while #90CAF9 offers a clear, sky-like contrast. This palette is ideal for projects seeking to convey strength, mystery, and a connection to nature, perfect for outdoor brands, tech interfaces, or sophisticated editorial content.

Best used for

Outdoor adventure and travel branding
Tech company websites and applications
Modern interior design with natural elements
Environmental conservation marketing
Documentary film or photography portfolios
User interfaces for data visualization platforms

Suggested color roles

primary

Use #2C3E50 as a deep, sophisticated primary for large sections or main backgrounds, establishing a profound, stable mood.

secondary

Employ #525252 for subheadings, navigation, or secondary content, offering a balanced, neutral grey.

accent

Introduce #4CAF50 for striking calls to action or key interactive elements, providing a vibrant, natural pop.

background

The deepest shade, #0A0A0A, creates a dramatic, enveloping background. For a lighter touch, a very light grey or white can be used.

text

On dark backgrounds, white or #90CAF9 ensures excellent readability. For light backgrounds, #0A0A0A or a dark charcoal is ideal.

Accessibility notes

Ensure sufficient contrast when pairing #525252 with #2C3E50 for text or interactive elements.
Text on #0A0A0A, #2C3E50, or #525252 will require light text (e.g., white or #90CAF9) for legibility.
The vibrant #4CAF50 and #90CAF9 offer good contrast against the darker colors, but check for color blindness.
Always test contrast ratios with accessibility tools to meet WCAG 2.1 AA standards for all text and UI elements.

Recommended combinations

Deep Waters

Creates a deep, mysterious base with a clear, sky-like accent for modern designs.

#0A0A0A · #2C3E50 · #90CAF9

Volcanic Earth

Ideal for natural, rugged branding, balancing earthy grey with a vibrant green.

#525252 · #4CAF50 · #2C3E50

Misty Shore

Excellent for subtle gradients or layered elements, evoking a serene, natural landscape.

#2C3E50 · #525252 · #90CAF9

CSS variables

:root {
  --crater-lake-depth-1: #525252;
  --crater-lake-depth-2: #2C3E50;
  --crater-lake-depth-3: #0A0A0A;
  --crater-lake-depth-4: #4CAF50;
  --crater-lake-depth-5: #90CAF9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "crater-lake-depth": {
        1: "#525252",
        2: "#2C3E50",
        3: "#0A0A0A",
        4: "#4CAF50",
        5: "#90CAF9",
      }
    }
  }
}

Hex values

Color 1#525252

Color 2#2C3E50

Color 3#0A0A0A

Color 4#4CAF50

Color 5#90CAF9

Accessibility

Contrast checker

1.4:1Fail

2.5:1Fail

2.8:1Fail

4.5:1AA18

1.4:1Fail

1.8:1Fail

4:1AA18

6.3:1AA

2.5:1Fail

1.8:1Fail

7.1:1AAA

11.3:1AAA

2.8:1Fail

4:1AA18

7.1:1AAA

1.6:1Fail

4.5:1AA18

6.3:1AA

11.3:1AAA

1.6:1Fail

Similar palettes

More like Crater Lake Depth

Obsidian Flow Texture

Volcanic Ash Ridge