Palette

Agate Grotto

A serene and cool palette inspired by polished agate stones found within a tranquil, hidden grotto.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Agate Grotto 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 Agate Grotto.

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

Data visualization

#4F5D75#708A9F#A3B7C9#D0DCE5#3A4A5C

Palette guide

How to use Agate Grotto

Overview

The Agate Grotto palette offers a serene and cool collection inspired by polished agate stones found within a tranquil, hidden grotto. This sophisticated range includes a deep slate blue #3A4A5C, a muted grey-blue #4F5D75, a medium ocean blue #708A9F, a light stone blue #A3B7C9, and a very pale grey-blue #D0DCE5. It's perfect for designers aiming to convey calm, natural elegance, and a sense of understated luxury. Developers will find these harmonious hex codes excellent for creating peaceful user interfaces, refined branding, and content that evokes quiet strength and natural beauty.

Best used for

Luxury spa and wellness brands
Architectural and interior design firms
High-end jewelry displays
Boutique hotel websites
Eco-conscious fashion brands
Abstract art and photography

Suggested color roles

primary

Use #4F5D75 as a sophisticated primary for main headings or key brand elements, embodying depth.

secondary

Employ #708A9F for secondary information, borders, or large content blocks, providing a calming presence.

accent

Apply #3A4A5C sparingly for impactful calls to action or important details, adding gravitas.

background

Utilize #D0DCE5 for clean, expansive backgrounds, mimicking the soft light within a grotto.

text

A dark charcoal or black works perfectly on #D0DCE5, while white text is ideal on #3A4A5C for strong readability.

Accessibility notes

Ensure high contrast for text on #D0DCE5; a dark text color like #3A4A5C is essential.
Avoid using #A3B7C9 for text against #D0DCE5 as contrast will be too low for readability.
White text on #3A4A5C, #4F5D75, and #708A9F should meet WCAG AA contrast standards.
For interactive elements, ensure distinct visual cues beyond color, especially for subtle hue shifts.

Recommended combinations

Grotto Depths

For footers, navigation, or elements requiring significant depth and a mysterious feel.

#3A4A5C · #4F5D75 · #708A9F

Polished Stone

Ideal for gradients or large background sections, mimicking a smooth, layered surface.

#D0DCE5 · #A3B7C9 · #708A9F

Agate Layers

Effective for creating distinct content blocks with strong contrast and natural elegance.

#3A4A5C · #A3B7C9 · #D0DCE5

CSS variables

:root {
  --agate-grotto-1: #4F5D75;
  --agate-grotto-2: #708A9F;
  --agate-grotto-3: #A3B7C9;
  --agate-grotto-4: #D0DCE5;
  --agate-grotto-5: #3A4A5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "agate-grotto": {
        1: "#4F5D75",
        2: "#708A9F",
        3: "#A3B7C9",
        4: "#D0DCE5",
        5: "#3A4A5C",
      }
    }
  }
}

Hex values

Color 1#4F5D75

Color 2#708A9F

Color 3#A3B7C9

Color 4#D0DCE5

Color 5#3A4A5C

Accessibility

Contrast checker

1.8:1Fail

3.2:1AA18

4.8:1AA

1.4:1Fail

1.8:1Fail

1.7:1Fail

2.6:1Fail

2.5:1Fail

3.2:1AA18

1.7:1Fail

1.5:1Fail

4.4:1AA18

4.8:1AA

2.6:1Fail

1.5:1Fail

6.5:1AA

1.4:1Fail

2.5:1Fail

4.4:1AA18

6.5:1AA

Similar palettes

More like Agate Grotto

Coastal Serenity Shores

Cool River Stone

Dawn Lake Whisper