Palette

Agate Geode Core

Cool, earthy greys and blues mirroring the intricate layers and core beauty of an agate geode.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A474D#60737C#8CA2AA#BBC9D0#E4EEF2

Palette guide

How to use Agate Geode Core

Overview

The Agate Geode Core palette features cool, earthy greys and blues, mirroring the intricate layers and core beauty of an agate geode. This grounded collection includes a deep charcoal #3A474D, a medium grey-blue #60737C, a lighter stone grey #8CA2AA, a soft pale grey #BBC9D0, and a near-white #E4EEF2. It's perfect for designers aiming to convey stability, natural elegance, and a sense of refined calm. Developers will find these sophisticated hex codes excellent for creating minimalist interfaces, robust branding, and content that evokes strength and subtle complexity.

Best used for

Mineral and gem enthusiast websites
High-end architectural firms
Modern minimalist product design
Corporate branding (stable, reliable)
Interior design (cool, contemporary)
Scientific or research publications

Suggested color roles

primary

Use #3A474D as a strong primary for main headings or foundational elements, providing depth and gravitas.

secondary

Employ #60737C for secondary information, borders, or large content blocks, maintaining sophistication.

accent

Apply #8CA2AA sparingly for subtle highlights or interactive elements, offering a gentle contrast.

background

Utilize #E4EEF2 for clean, spacious backgrounds, mimicking the raw, unpolished stone.

text

A dark grey or black works perfectly on #E4EEF2, while white text is ideal on #3A474D for strong readability.

Accessibility notes

Ensure high contrast for text on #E4EEF2; a dark text color like #3A474D is essential.
Avoid using #BBC9D0 for text against #E4EEF2 as contrast will be too low.
White text on #3A474D and #60737C should meet WCAG AA contrast standards.
For interactive elements, ensure distinct visual feedback (e.g., bolding, underline) in addition to color.

Recommended combinations

Geode Layers

For layered UI elements or gradients, mimicking natural stone formations.

#3A474D · #60737C · #8CA2AA

Crystal Core

Ideal for clean backgrounds or delicate design elements, creating a refined look.

#E4EEF2 · #BBC9D0 · #8CA2AA

Deep Stone

Effective for headers or footers, offering strong contrast and a grounded feel.

#3A474D · #BBC9D0 · #E4EEF2

CSS variables

:root {
  --agate-geode-core-1: #3A474D;
  --agate-geode-core-2: #60737C;
  --agate-geode-core-3: #8CA2AA;
  --agate-geode-core-4: #BBC9D0;
  --agate-geode-core-5: #E4EEF2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "agate-geode-core": {
        1: "#3A474D",
        2: "#60737C",
        3: "#8CA2AA",
        4: "#BBC9D0",
        5: "#E4EEF2",
      }
    }
  }
}

Hex values

Color 1#3A474D

Color 2#60737C

Color 3#8CA2AA

Color 4#BBC9D0

Color 5#E4EEF2

Accessibility

Contrast checker

1.9:1Fail

3.6:1AA18

5.7:1AA

8.1:1AAA

1.9:1Fail

2.9:1Fail

4.2:1AA18

3.6:1AA18

1.9:1Fail

1.6:1Fail

2.3:1Fail

5.7:1AA

2.9:1Fail

1.6:1Fail

1.4:1Fail

8.1:1AAA

4.2:1AA18

2.3:1Fail

1.4:1Fail

Similar palettes

More like Agate Geode Core

Agate Geode Core

See it in context.

Ready when you are.

Built with Agate Geode Core.

How to use Agate Geode Core

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Geode Layers

Crystal Core

Deep Stone

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Agate Geode Core