Palette

Geode Crystal Veins

Cool, subtle blues and grays that mirror the delicate, crystalline structures within a geode.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Geode Crystal Veins 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 Geode Crystal Veins.

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

Data visualization

#E7EEF1#C7DAE1#9BBEC9#6F9EAC#4A6E7C

Palette guide

How to use Geode Crystal Veins

Overview

The Geode Crystal Veins palette offers a serene and sophisticated collection of cool blues and subtle grays, perfectly mirroring the delicate, crystalline structures found within natural geodes. This versatile scheme, featuring shades like the airy #E7EEF1, the calming #C7DAE1, and the deeper, grounding #4A6E7C, is ideal for designs seeking a minimalist yet rich aesthetic. Designers can leverage the mid-tone #9BBEC9 for depth and #6F9EAC as a balanced accent, creating harmonious and tranquil visual experiences for users across various platforms.

Best used for

Minimalist web design and UI/UX
Spa and wellness branding
Eco-friendly product packaging
Interior design concepts (calm spaces)
Scientific or educational content
Luxury hotel or resort branding

Suggested color roles

primary

Use #4A6E7C as a solid anchor for headers, primary buttons, or significant graphic elements, providing depth and stability.

secondary

Apply #6F9EAC for secondary calls-to-action, active states, or supporting information sections, offering a gentle contrast.

accent

Highlight key interactive elements or small decorative details with #9BBEC9 to draw attention without overpowering the design.

background

Utilize #E7EEF1 as the main background color for a clean, open, and airy feel, promoting readability and calm.

text

For body text, consider #4A6E7C or a deep charcoal against light backgrounds for optimal readability, ensuring strong contrast.

Accessibility notes

Ensure sufficient contrast between #E7EEF1 backgrounds and #4A6E7C text for WCAG AA compliance.
When using #C7DAE1 as a background, avoid light gray text; opt for darker shades like #6F9EAC or #4A6E7C.
The lighter shades, such as #E7EEF1 and #C7DAE1, may not provide enough contrast for text when used together.
Test all button and link text colors against their respective backgrounds to maintain readability for all users.

Recommended combinations

Deep Serenity

Ideal for a strong brand presence: dark text on a light background, with a cool accent for highlights.

#4A6E7C · #E7EEF1 · #9BBEC9

Crystal Gradient

Excellent for subtle visual transitions, background layers, or data visualizations that require a smooth flow.

#C7DAE1 · #9BBEC9 · #6F9EAC

Airy Contrast

Use the lightest shade as a base, with #6F9EAC for secondary elements and #4A6E7C for impactful text or icons.

#E7EEF1 · #6F9EAC · #4A6E7C

CSS variables

:root {
  --geode-crystal-veins-2-1: #E7EEF1;
  --geode-crystal-veins-2-2: #C7DAE1;
  --geode-crystal-veins-2-3: #9BBEC9;
  --geode-crystal-veins-2-4: #6F9EAC;
  --geode-crystal-veins-2-5: #4A6E7C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "geode-crystal-veins-2": {
        1: "#E7EEF1",
        2: "#C7DAE1",
        3: "#9BBEC9",
        4: "#6F9EAC",
        5: "#4A6E7C",
      }
    }
  }
}

Hex values

Color 1#E7EEF1

Color 2#C7DAE1

Color 3#9BBEC9

Color 4#6F9EAC

Color 5#4A6E7C

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

2.5:1Fail

4.7:1AA

1.2:1Fail

1.4:1Fail

2:1Fail

3.8:1AA18

1.7:1Fail

1.4:1Fail

1.5:1Fail

2.8:1Fail

2.5:1Fail

2:1Fail

1.5:1Fail

1.9:1Fail

4.7:1AA

3.8:1AA18

2.8:1Fail

1.9:1Fail

Similar palettes

More like Geode Crystal Veins